:root,
input,
button {
    font-family: Inter, sans-serif;
    font-feature-settings: 'liga' 1, 'calt' 1;
    /* fix for Chrome */
}

@supports (font-variation-settings: normal) {

    :root,
    input,
    button {
        font-family: InterVariable, sans-serif;
    }
}

body {
    background-color: black;

    margin: 0;

    color: white;
}

h1 {
    text-align: center;
}

#bad {
    text-decoration: underline wavy red 1.5px;
}

#game {
    display: grid;
    justify-items: center;

    width: 70%;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    background-color: rgb(20, 20, 20);

    padding: 48px;

    border-radius: 8px;
}

#score {
    grid-column: 1/span 2;
    grid-row: 1/span 1;

    font-weight: 600;
    font-size: 2rem;

    background-color: rgb(27, 27, 27);

    padding: 8px 12px;
    margin: 8px;

    border-radius: 4px;
}

#option1 {
    grid-column: 1/span 1;
    grid-row: 2/span 1;
}

#option2 {
    grid-column: 2/span 1;
    grid-row: 2/span 1;
}

.option {
    width: 80%;

    padding: 24px;

    border-radius: 4px;
}

.option:hover {
    background-color: rgb(34, 34, 34);
}

.password {
    font-weight: 600;
    font-size: 2rem;

    font-style: italic;

    text-align: center;
}

.rank {
    font-style: italic;
}

hr {
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-top: 1px solid white;
}

#disclaimer {
    text-align: center;

    grid-column: 1/span 2;
    grid-row: 3/span 1;

    padding: 8px;
    padding-bottom: 0;
    margin: 8px;

    color: gray;
}

.correct {
    color: limegreen;
}

.correct hr {
    border-top: 1px solid limegreen;
}

.incorrect {
    color: red;
}

.incorrect .password {
    text-decoration: underline wavy red 1.5px;
}

.incorrect hr {
    border-top: 1px solid red;
}