body {
    margin: 0px;
    height: 100%;
}

:root {
    height: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.bg_correct {
    background-color: #00FF00;
    animation: fadeout linear 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.bg_incorrect {
    background-color: #FF0000;
    animation: fadeout linear 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes fadeout {
    100% {
        background-color: white;
    }
}

.note_container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0px;
    height: 30vh;
}

@media screen and (orientation: portrait) {
    .note_container {
        width: 70vw;
        height: auto;
    }
}

.note_container img {
    height: 100%;
    user-select: none;
}

.displayed_note_container {
    display: flex;
    width: 0%;
    height: 100%;
}

.displayed_note {
    display: flex;
    width: 0%;
    height: 100%;
}

.option_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5vh;
}

.option_container > .header {
    text-align: center;
    font-size: 4vh;
    font-weight: 600;
}

#selection_options {
    display: flex;
    gap: 2vw;
}

.selection_button {
    font-size: 3vh;
    font-weight: 500;
    aspect-ratio: 1;
    height: 10vh;
    min-width: 5vw;
    max-width: 25vw;
}

.keyboardMenu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2vh;
}

.keyboard {
    display: flex;
    gap: 3vw;
    flex-wrap: wrap;
    justify-content: center;
}

.keyboard > div {
    display: flex;
    gap: 0.5vw;
    justify-content: center;
    flex-wrap: wrap;
}

#keyboard_submit_button {
    font-size: 100%;
    aspect-ratio: 2 / 1;
}

#settings_button {
    position: absolute;
    top: 0px;
    right: 0px;
    margin: 5px;
}