* {

    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-size: 18px;
    font-weight: 600;
    font-family: Rubik, Arial, Helvetica, sans-serif;
}

:root {

    --attempt-width: 400px;
    --attempt-height: 66px;

    --keyboard-width: 700px;
    --keyboard-height: 300px;

    --letter-clr: #ccd5ae;
    --misplace-clr: #F9E79F;
    --correct-clr: #ABEBC6;
    --incorrect-clr: #808B96;
    --white-letter-clr: #F8F9F9;
}

body {

    background: radial-gradient(circle at 10% 20%, rgba(216, 241, 230, 0.46) 0.1%, rgba(233, 226, 226, 0.28) 90.1%);
}


.grid-container {

    border: 5px transparent solid;
    background-color: transparent;
    width: 400px;
    height: auto;
    margin: auto;
    margin-top: 5vh;
    display: grid;
    grid-template-columns: 400px;
    grid-template-rows: auto;
    row-gap: 16px;
    justify-content: center;
    align-content: center;
}


.attempt {
    width: var(--attempt-width);
    height: var(--attempt-height);
    background-color: transparent;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.letter {

    width: calc(var(--attempt-width) / 6);
    height: var(--attempt-height);
    background-color: var(--letter-clr);
    border: 2px gray solid;
    border-radius: 4%;

    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.7em;
}

.keyboard-container {

    width: var(--keyboard-width);
    height: var(--keyboard-height);
    background-color: transparent;
    margin: 20px auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: space-evenly;
    justify-content: space-evenly;

    gap: 7px
}

.key {

    width: calc(var(--keyboard-width) / 12);
    height: calc(var(--keyboard-height) / 4);
    background-color: gainsboro;
    border: 2.5px solid gray;
    border-radius: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.8em;
}

.correct-place {

    background-color: var(--correct-clr);
    border: transparent;
}

.wrong-place {

    background-color: var(--misplace-clr);
    border: transparent;
}

.incorrect {

    background-color: var(--incorrect-clr);
    border: transparent;
}

.key-yellow {

    background-color: var(--misplace-clr);
}

.key-gray {

    background-color: var(--incorrect-clr);
}

.key-green {

    background-color: var(--correct-clr);
}

.key-enter, .key-backspace {

    width: calc(var(--keyboard-width) / 7)
}

.correct-place, .wrong-place, .incorrect,
.key-yellow, .key-gray, .key-green {

    color: var(--white-letter-clr);
}