*, *::before, *::after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html{
    font-size: 62.5%;
    font-family: sans-serif;
}

body{
    background: rgb(182, 94, 233);
    min-height: 100vh;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    font-size: 2rem;
    gap: 2rem;
}

/* .modal{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50rem;
    height: 40rem;
    transform: translate(-50%, -50%);
    background: rgb(94, 233, 175);
    padding: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
} */

.container{
    width: 40%;
    min-height: 40rem;
    padding: 4rem;
    background: lightgoldenrodyellow;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    gap: 2rem;
    border-radius: 2rem;
}

ul{
    list-style: none;
    display: flex;
    gap: 0.5rem;
}
.letter{
    width: 8rem;
    height: 8rem;
    background: rgb(255, 255, 237);
    border: 0.3rem solid lightblue;
    display: flex;
    justify-content:center;
    align-items: center;
    font-size: 2rem;
}

.input{
    width: 20rem;
    height: 4rem;
    padding: 1rem;
    font-size: 2rem
}

.guess{
    width: 10rem;
    height: 4rem;
    padding: 1rem;
    font-size: 2rem;
    border: 0.3rem solid rgb(182, 94, 233);
    border-radius: 2rem;
    background: transparent;
    color: rgb(182, 94, 233);
}

.guess:hover{
    background: rgb(182, 94, 233);
    border: 0.3rem solid transparent;
    color: lightgoldenrodyellow;
    transform: translateY(1rem);
    transition: 0.4s;
    cursor: pointer;
}

.keyboard{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 80%;
}

.keyboard-letter{
    min-width: 3rem;
    min-height: 3rem;
    padding: 0.5rem;
    border-radius: 2rem;
    border: 0.1rem solid rgb(182, 94, 233);
    display: flex;
    justify-content: center;
    align-items: center;
}

.list{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.letterlist{
    display: flex;
    gap: 0.5rem;
}

.letter{
    width: 4rem;
    height: 4rem;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.letterRight{
    background: lightgreen;
}

.letterWrong{
    background: lightgray;
}

.letterIncluded{
    background: orange;
}

.scoreboard-list{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.alerts{
    color: red;
    font-size: 2rem;
}