html,
body {
        margin: 0;
        padding: 0;
}

:root {
        font-size: clamp(14px, 2vw, 16px);
}

body {
        font-family: "Inter", ui-sans-serif, system-ui;
        font-optical-sizing: auto;
        font-style: normal;
}

input::-webkit-input-placeholder {
        font-family: "Martian Mono", monospace;
}

input {
        caret-color: #234;
        caret-shape: block;
}

#user-answer {
        width: 100%;
        padding: 10px;
        font-size: clamp(1.5rem, 5vw, 2rem);
        outline: none;
        text-align: center;
        border: none;
        box-sizing: border-box;
        -webkit-appearance: none;
        background: transparent;
        font-family: "Martian Mono", monospace;
}

#challenge {
        font-size: clamp(1.5rem, 10vw, 6rem);
        font-weight: bold;
}

#progress-bar {
        height: 100%;
        width: 100%;
        border-radius: inherit;
        background-color: #22c55e;
        transition: width 0.1s linear, background-color 0.5s linear;
}

#bonus-overlay {
        position: absolute;
        inset-inline: 0;
        bottom: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
        transform: translateY(calc(-100% - 0.5rem));
        pointer-events: none;
        padding-inline: 0.5rem;
}

@media (min-width: 640px) {
        #bonus-overlay {
                gap: 0.75rem;
                padding-inline: 1rem;
        }
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
}

.modal-content table {
        width: 100%;
}