style.scss

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap");

$primaryColor: #44b657;
$secondaryColor: #704fbf;
$bgColor: #e0e4cc;
$textColor: #fff;

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "poppins", san-serif;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: $bgColor;
}

.container {
    width: 400px;
    background-color: $primaryColor;
    border-radius: 8px;
    padding: 1em;

    .title {
        font-weight: 500;
        color: $secondaryColor;
        border-bottom: 1px solid darken($textColor, 5%);
        padding-bottom: 0.25em;
    }

    .game {
        .typing-input {
            position: absolute;
            opacity: none;
            z-index: -99;
        }

        .input-field {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin-top: 1.5em;

            input {
                width: 55px;
                height: 55px;
                border-radius: 8px;
                margin: 0.125em;
                background-color: $textColor;
                font-size: 1.5em;
                font-weight: 500;
                color: $secondaryColor;
                text-align: center;

                &:first-child {
                    margin-left: 0;
                }
            }
        }

        .details {
            margin-block: 1em;
            color: $textColor;
        }
    }

    .btn-next {
        width: 100%;
        padding: 1em;
        margin-block: 0.5em;
        letter-spacing: 1;
        outline: none;
        border: none;
        border-radius: 5px;
        color: $textColor;
        background-color: $secondaryColor;
        cursor: pointer;

        &:hover {
            background-color: darken($secondaryColor, 10%);
        }
    }
}