@import url('https://fonts.googleapis.com/css2?family=Kirang+Haerang&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Slackey&display=swap');

.kirang-haerang-regular {
  font-family: "Kirang Haerang", system-ui;
  font-weight: 200;
  font-style: normal;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.hide-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.slackey-regular {
  font-family: "Slackey", sans-serif;
  font-weight: 400;
  font-style: normal;
}

body {
    margin: 0%;
    background-color: #eff1f5;
}

header {
    background-color: #dce0e8;
}

header h1 {
    text-align: center;
    margin: 0%;
    color: #4c4f69;
    font-size: 4rem;
}

#container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90vh;
}

#console {
    background-color: #acb0be;
    height: 85vh;
    width: 60vh;
    border-radius: 2%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

#screen {
    background-color: black;
    height: 35vh;
    width: 50vh;
    border: 2vh solid #7c7f93;
    overflow-y: scroll;
}

#button-area {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 38vh;
    width: 50vh;
}
#play-button {
    width: 20vh;
    height: 20vh;
    margin-top: 3rem;
    background-color: #7c7f93;
    border: 0.5rem double #ccd0da;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#play-button:hover {
    background-color: #9ca0b0;
}

/* Shrinks the play button when clicked */
#play-button:active {
    transform: scale(0.95); 
}

#buttons {
    display: flex;
    justify-content: space-around;
    width: 50vh;
    margin-top: 2vh;
}

.restart-btn,
.btn {
    border: 1vh solid #8c8fa1;
    background-color: #ccd0da;
    border-radius: 10%;
}

.restart-btn {
    width: 48vh;
    font-size: 10vh;
    color: #6c6f85;
    margin-bottom: 2vh;
}

.restart-btn:hover,
.btn:hover {
    background-color: #e6e9ef;
}

.restart-btn:active,
.btn:active {
    transform: scale(0.95);
}

#message-area {
    margin: 2vh;
    font-family: 'Courier New', Courier, monospace;
}

.messages {
    color: #04a5e5;
}

.score {
    color: #179299;
}