:root {
    --background: black;
    --color: #6495ed;
}

* {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
    font-family: 'Prompt', sans-serif;
}

.frame {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    overflow: hidden;
}

.container1 {
    width: 390px;
    height: max-content;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.container1>.word {
    width: 100%;
    height: max-content;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.container1>.word>.letter {
    width: 70px;
    width: 9vh;
    height: 70px;
    height: 9vh;
    border: 2px solid rgb(185, 182, 182);
    background-color: white;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
}



.word>.letter.green {
    color: white;
    background-color: #6AAA64;
}

.word>.letter.yellow {
    color: white;
    background-color: #c9b458;

}

.word>.letter.gray {
    color: white;
    background-color: #787C7E;
}

.container2 {
    width: 390px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.container2>.kr {
    width: 99.5%;
    height: max-content;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.container2>.kr>.c {
    width: 35px;
    height: 55px;
    font-size: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background-color: rgba(191, 191, 191, 0.648);
    font-weight: 600;
}

.container2>.keyboard_row2 {
    width: 98%;
    justify-content: space-around;
    gap: 1px;

}

.container2>.keyboard_row2>.c {
    width: 30px;
}

.c.letter.green {
    color: white;
    background-color: #6AAA64;
}

.c.letter.yellow {
    color: white;
    background-color: #c9b458;
}

.c.letter.gray {
    color: white;
    background-color: gray;
}

@keyframes rotate-anim1 {
    0% {
        transform: rotateX(0deg);
    }

    50% {
        transform: rotateX(90deg);

    }

    100% {
        transform: rotateX(0deg);
    }
}

@keyframes scale-anim1 {


    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes alert {

    0% {
        transform: translate3d(0px, 0px, 0px);
    }

    20% {
        transform: translate3d(20px, 0px, 0px);
    }

    40% {
        transform: translate3d(-20px, 0px, 0px);
    }

    60% {
        transform: translate3d(20px, 0px, 0px);
    }

    80% {
        transform: translate3d(-20px, 0px, 0px);
    }

    100% {
        transform: translate3d(0px, 0px, 0px);
    }
}