html {
  touch-action: manipulation;
}

:root{
    --gap: 5px;
    --tile: min(
        60px,
        calc((100vw - 40px - 4 * var(--gap)) / 5),
        calc((44dvh - 5 * var(--gap)) / 6)
    );
    --key-w: min(50px, calc((100vw - 10px - 9 * var(--gap)) / 10));
    --key-h: min(58px, calc((32dvh - 2 * var(--gap)) / 3));
}

body{
    margin: 0;
    font-family: arial, helvetica, sans-serif;
    text-align: center;
    background-color: #ffffff;
}

hr{
    margin: 6px auto;
    width: 90%;
    max-width: 500px;
    color: lightgray;
}

#title{
    font-size: min(36px, 6dvh);
    font-weight: bold;
    letter-spacing: 2px;
    color: #000000;
}

#board{
    width: fit-content;
    height: auto;
    margin: 3px auto 0;
    display: grid;
    grid-template-columns: repeat(5, var(--tile));
    gap: var(--gap);
}

#keyboard{
    width: fit-content;
    margin: 3px auto 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    align-items: center;
}

.row{
    width: fit-content;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--gap);
}

.key{
    box-sizing: border-box;
    border: 2px solid lightgray;
    width: var(--key-w);
    height: var(--key-h);
    width: var(--key-w);
    height: var(--key-h);
    font-size: calc(var(--key-w) * 0.55);

    color:black;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;

    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.key.wide {
    width: calc(var(--key-w) * 1.5);
    flex-shrink: 0;
    font-size: calc(var(--key-w) * 0.38);
}

#Backspace {
    font-size: calc(var(--key-w) * 0.8);
}

.tile {
    box-sizing: border-box;
    border: 2px solid lightgray;
    width: var(--tile);
    height: var(--tile);

    color:black;
    font-size: calc(var(--tile) * 0.6);
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

.correct {
    background-color: #027702;
    color: white;
}

.present {
    background-color: #bebe27;
    color: white;
}

.absent {
    background-color: #808080;
    color: white;
}

.whiteBorder {
    border-color: white;
}

@media (max-width: 400px) {
    :root { --gap: 4px; }
    .key, .tile { border-width: 1px; }
}

@keyframes shake{
    0%, 100% {
        transform: translateX(0);
    }
    20%, 60%{
        transform: translateX(-6px);
    }
    40%, 80%{
        transform: translateX(6px);
    }
}

.shake {
    animation: shake 0.2s linear;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

.pulse {
    animation: pulse 0.4s ease-in-out;
}