:root {
    --outline-color: rgb(178, 186, 202);
    --outline-color-darker: rgb(124, 130, 141);
    --font-size: 10vh;
}

#game {
    display: none;
}

#menu {
    display: flex;
    align-items: center;
}

#input {
    display: none;
    align-items: center;
}

#game-ended {
    display: none;
    align-items: center;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-height: 100vh;
    margin: 0;
}

* {
    font-family: "Courier New", Courier, monospace;
}

article {
    width: 100%;
    height: 100vh;
    max-width: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

article > section {
    margin: 1vh;
}

#word {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5vh;
}

#word > div {
    aspect-ratio: 1 / 1;
    max-width: 5vh;
    display: grid;
    justify-content: center;
    align-items: center;
    border: 0.3vh solid var(--outline-color);
    flex-grow: 1;
    font-size: 2vh;
    box-sizing: border-box;
}

#image {
    display: flex;
    justify-content: center;
    align-items: center;
}

#image > img {
    width: 70%;
    max-width: 30vh;
}

#keyboard {
    display: flex;
    flex-direction: column;
}

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

.keyboard-letter {
    flex-grow: 1;
    max-width: 4vh;
    height: 7vh;
    border: 0.3vh solid var(--outline-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2vh;
    cursor: pointer;
    background-color: white;
    border-radius: 0.5vh;
    box-sizing: border-box;
}

.keyboard-letter:not(.used):hover {
    border-color: var(--outline-color-darker);
}

.keyboard-letter.used {
    background-color: var(--outline-color);
    color: var(--outline-color-darker);
    cursor: default;
}

#game-ended-title {
    font-size: 5vh;
}

#game-ended-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

#game-ended-image > img {
    width: 70%;
    max-width: 30vh;
}

#game-ended-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20vh;
    height: 5vh;
    border: 0.3vh solid var(--outline-color);
    background-color: white;
    border-radius: 0.5vh;
    cursor: pointer;
    font-size: 2vh;
}

#game-ended-button:hover {
    border-color: var(--outline-color-darker);
}

#menu > h1 {
    font-size: 5vh;
}

#menu > .image {
    display: flex;
    justify-content: center;
    align-items: center;
}

#menu > .image > img {
    width: 40%;
    max-width: 30vh;
}

#menu > .buttons {
    display: flex;
    flex-direction: column;
    gap: 1vh;
}

#menu > .buttons > button {
    width: 20vh;
    height: 5vh;
    border: 0.3vh solid var(--outline-color);
    background-color: white;
    border-radius: 0.5vh;
    cursor: pointer;
    font-size: 2vh;
    margin-bottom: 5vh;
}

#menu > .buttons > button:hover {
    border-color: var(--outline-color-darker);
}

#input > h1 {
    font-size: 5vh;
}

#input-word {
    width: 100%;
    height: 5vh;
    border: 0.3vh solid var(--outline-color);
    background-color: white;
    border-radius: 0.5vh;
    cursor: pointer;
    font-size: 3vh;
    margin-bottom: 5vh;
}

#input-word:hover {
    border-color: var(--outline-color-darker);
}

#input-word:focus {
    border-color: var(--outline-color-darker);
    outline: none;
}

#input-button {
    width: 20vh;
    height: 5vh;
    border: 0.3vh solid var(--outline-color);
    background-color: white;
    border-radius: 0.5vh;
    cursor: pointer;
    font-size: 2vh;
    margin-bottom: 5vh;
}

#input-button:hover {
    border-color: var(--outline-color-darker);
}