* {
    margin: 0;
    padding: 0;
}

body {
    font-family: sans-serif;
}

#container {
    display: flex;
    flex-direction: column;
    min-height: 85vh;
}

#grid {
    display: flex;
    flex-direction: column;
    overflow: scroll;
    margin: auto;
    font-size: 4vh;
}

#keyboard {
    height: 24vh;
    width: 48vh;
    margin: auto;
    font-size: 2vh;
}

.grid-row {
    flex-grow: 1;
    display: flex;
    margin: 0.16vh 0;
}

.grid-element {
    color: #4A4D4F;
    background-color: #FAFDFF;
    font-weight: bold;
    border: 2px solid #DDE0EA;
    border-radius: 8px;
    flex-grow: 1;
    width: 8vh;
    height: 8vh;
    margin: 0 0.16vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.keyboard-row {
    width: 100%;
    height: 33%;
}

.keyboard-row td {
    color: #5A647A;
    background-color: #DAE0EB;
    font-weight: bold;
    width: 10%;
    text-align: center;
    border: 1px solid transparent;
    border-radius: 4px;

    touch-action: manipulation;
}

.keyboard-row td[data-active="active"] {
    background-color: #CAD0DB;
}

.keyboard-row td.medium {
   width: 11%;
}

.keyboard-row td.large {
    width: 15%;
}


[data-guess-status="right-letter-right-place"] {
    background-color: #AAFFAA !important;
}

.grid-element[data-guess-status="right-letter-right-place"] {
    border: 2px solid #AAFFAA !important;
}

[data-guess-status="right-letter-wrong-place"] {
    background-color: #FFFFAA !important;
}

.grid-element[data-guess-status="right-letter-wrong-place"] {
    border: 2px solid #FFFFAA !important;
}

[data-guess-status="wrong-letter"] {
    background-color: #BABDBF !important;
}

.grid-element[data-guess-status="wrong-letter"] {
    border: 2px solid #BABDBF !important;
}

#message.hidden {
    display: none;
}

#message.revealed {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    text-align: center;
    position: absolute;
    top: 25%;
    left: 16%;
    width: 67%;
    height: 25%;
    font-size: 5vh;
    border: 1px solid #E0E8EF;
    border-radius: 16px;
    color: #5A647A;
    background-color: #FDFEFF;
}