html, body, main {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: var(--font-family-body), sans-serif;
    touch-action: pan-x pan-y;
}

@media (max-width: 1200px) {
    html, body, main, .fill-in-the-blanks input {
        font-size-adjust: 0.4;
    }

    .fill-in-the-blanks {
        width: 50% !important;
    }
}

@media (max-width: 1199px) and (min-width: 810px) {
    html, body, main, .fill-in-the-blanks input {
        font-size-adjust: 0.3;
    }

    .fill-in-the-blanks {
        width: 70% !important;
    }
}

@media (max-width: 809px) {
    html, body, main, .fill-in-the-blanks input {
        font-size-adjust: 0.4;
    }

    .fill-in-the-blanks {
        width: 90% !important;
    }
}

:root {
    color-scheme: light dark;
    --font-family-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Oxygen, Ubuntu, Cantarell, "Open Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
}

main {
    display: grid;
    word-wrap: break-word;
    align-items: center;
    justify-items: center;
    grid-template-rows: 0 100% auto;
}

.fill-in-the-blanks {
    width: 40%;
    height: 75%;
    overflow-y: auto;
}

.fill-in-the-blanks input {
    font-family: var(--font-family-body), sans-serif;
    font-size: 1em;
    border: none;
    border-bottom: 2px solid light-dark(rgba(225, 225, 225, 0.5), rgba(50, 50, 50, 0.5));
    background-color: transparent;
    border-radius: 0.05em;
    text-align: center;
}

.fill-in-the-blanks h1 {
    text-align: center;
    font-size: 1.5em;
    text-wrap: balance;
}

.nowrap {
    text-wrap: nowrap;
}

.fill-in-the-blanks h1 input {
    font-weight: bold;
}

.fill-in-the-blanks p {
    font-size: 1.25em;
}

button {
    font-family: var(--font-family-body), sans-serif;
    font-size: 1em;
    border: none;
    background-color: light-dark(rgba(225, 225, 225, 0.5), rgba(50, 50, 50, 0.5));
    border-radius: 2px;
    cursor: pointer;
}

#reset {
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    border-radius: 0 0 0 2px;
    visibility: hidden;
}

select#story {
    margin-top: 2.5em;
}

.temp {
    visibility: hidden;
}