:root {
    --animTime: 0.3s;
}

body {
    background-color: #111;
    color: #fff;
    font-family: sans-serif;
    margin: 0;
    height: 100%;
    overflow: hidden;
}

#container {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#gameContainer {
    width: 100vw;
    height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform var(--animTime);
}

/*GUESSES*/
.guesses {
    display: flex;
    flex-direction: column;
    gap: 0.3vh;
    font-size: min(2.5rem, 9.5vh);
}

.guessRow {
    display: flex;
    gap: 1vh;
}

.guessChar {
    border: 1px solid #555;
    border-radius: 5%;
    padding: 0.5vh;
    width: min(3rem, 10vh);
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
}

.submitted {
    background-color: rgb(61, 61, 61);
}

.bounce {
    animation-name: bounce;
    animation-duration: 0.1s;
}

/*KEYBOARD*/

#keyboard {
    width: 100%;
}

.keyboardRow {
    display: flex;
    justify-content: center;
    gap: 0.5vh;
    margin-bottom: 0.5vh;
}

.keyboardKey {
    background-color: #555;
    border-radius: 15%;
    width: min(3rem, 9vw);
    height: min(3rem, 9vh);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    user-select: none;
    transition: opacity 0.1s;
}

.keyboardKey.enterKey {
    width: min(8rem, 20vh);
    aspect-ratio: 2 / 1;
}

.keyboardKey:hover {
    opacity: 80%
}

/*HINTS*/
span.correctPosition, span.wordContains.correctPosition {
    background-color: rgb(40, 141, 40);
}

span.wordContains {
    background-color: rgb(189, 189, 31);
}

span.keyboardKey.notInWord, .shrink {
    transform: scale(0);
}

/*ENDGAME*/
#endGame {
    text-align: center;
    font-size: 2rem;
    animation-name: slideUp;
    animation-duration: 1s;
}

@keyframes slideUp {
    from { transform: translateY(700%); }
    to { transform: translateY(0%); }
}

/*SCOREBOARD*/
#scoreboardContainer {
    position: absolute;
    top:10%;
    left: auto;
    right: auto;
    bottom: auto;
    text-align: center;
    transition: transform var(--animTime);
}

/*MESSAGE*/

@keyframes fadeOut {
    0% { opacity: 100%; }
    50% {opacity: 100%; }
    100% {opacity: 0%; }
}

#message {
    opacity: 0%;
    font-size: 4vh;
    min-height: 4vh;
    margin: 1vh 0;
    user-select: none;
}

#message.animate {
    animation-name: fadeOut;
    animation-duration: 2s;
}

/*EFFECTS*/

@keyframes bounce {
    0% { transform: scale(100%); }
    50% { transform: scale(110%); }
    100% {transform: scale(100%); }
}

.slideBottom {
    transition: transform 1s;
    transform: translateY(700%);
}

.hidden {
    opacity: 0%;
}


/*HIGHSCORES*/

#scoresTable {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    transition: transform var(--animTime);
    text-align: left;
}

h2, h3 {
    margin: 0 0 1rem 0;
}

#scoresTable :is(td, th):not(:last-child) {
    width: 30vw;
    max-width: 13ch;
}

#scoresTable tbody {
    white-space: nowrap;
    max-height: 50vh;
    overflow-y: scroll;
}

.highScoreForm {
    vertical-align: middle;
    margin: 0 0 0.5rem 0;
}

input {
    max-width: 18ch;
}

button, input {
    font-size: 1.5rem;
    margin-top: 0.5rem;
    padding: 0.5rem;
    background-color: #555;
    color: white;
    border: none;
}

button:hover {
    background-color: #333;
    cursor: pointer;
}