:root {
    /* Background */
    --background-light: #edf2fd;
    --background-blue: #d6e2fc;
    --background-lavender: #d2cdf4;
    --pattern-color: #6f69b8;

    /* Object surfaces */
    --color-surface: #F4FAFF;
    --color-surface-hover: #ECEFF2;
    --menu-highlight: #C1FF22;

    /* Text */
    --color-text: #291C58;

    /* Neutral */
    --color-neutral: #EDEBF6;
    --color-neutral-dark: #35516B;
    --color-neutral-light: #F2F9FC;

    /* Indicates correct/incorrect */
    --color-success: #daf3df;
    --color-success-text: #195c2d;

    --color-failure: #fde1df;
    --color-failure-text: #7a211d;

    /* For correct/incorrect count in quiz header */
    --correct-count-background: #7BC89B;
    --correct-count-border: #A8DFC2;
    --incorrect-count-background: #E87AAE;
    --incorrect-count-border: #f5c2c0;

    --shadow-small: 0 2px 8px rgba(32, 36, 44, 0.08);
    --shadow-medium: 0 4px 16px rgba(32, 36, 44, 0.1);

    --radius-tiny: 8px;
    --radius-small: 12px;
    --radius-medium-small: 16px;
    --radius-medium: 24px;
    --radius-large: 36px;
    --radius-max: 999px;

    --content-width-normal: 52rem;
    --content-width-wide: 64rem;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html { /* fallback background for scrolling on mobile devices. */
    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(255, 255, 255, 0.45) 0%,
            rgba(255, 255, 255, 0) 35%
        ),

        radial-gradient( 
            ellipse at center,
            rgba(255, 255, 255, 0) 45%,
            rgba(119, 112, 184, 0.12) 100%
        ),

        linear-gradient( 
            135deg,
            var(--background-light) 0%,
            var(--background-blue) 52%,
            var(--background-lavender) 100%
        ); 
}

body {
    min-height: 100dvh;
    margin: 0;
    position: relative;
    isolation: isolate;

    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;

    display: grid;
    grid-template-rows: 1fr auto;
    justify-items: center;

    color: var(--color-text);
    font-family: "Nunito", sans-serif;
}

body::after {
    content: "";

    position: fixed;
    inset: 0;

    z-index: -2;

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(255, 255, 255, 0.45) 0%,
            rgba(255, 255, 255, 0) 35%
        ),

        radial-gradient( 
            ellipse at center,
            rgba(255, 255, 255, 0) 45%,
            rgba(119, 112, 184, 0.12) 100%
        ),

        linear-gradient( 
            135deg,
            var(--background-light) 0%,
            var(--background-blue) 52%,
            var(--background-lavender) 100%
        );

    background-size: cover;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='140' viewBox='0 0 160 140'%3E%3Cg fill='none' stroke='%23746fc2' stroke-opacity='0.09' stroke-width='1'%3E%3Cpath d='M0 0L80 0L40 70Z'/%3E%3Cpath d='M80 0L160 0L120 70Z'/%3E%3Cpath d='M40 70L120 70L80 140Z'/%3E%3Cpath d='M0 140L40 70L80 140Z'/%3E%3Cpath d='M80 140L120 70L160 140Z'/%3E%3C/g%3E%3C/svg%3E");

    background-repeat: repeat;
    background-size: 160px 140px;
    opacity: 0.7;
}

h1,
h2,
h3,
h4,
p {
    margin-top: 0;
}

h1,
h2 {
    font-family: "Fredoka", sans-serif;
    font-weight: 500;
}

h3,
h4 {
    font-family: "Ubuntu", sans-serif;
    font-weight: 700;
}

button,
input,
select,
textarea {
    font: inherit;
}

.hidden {
    display: none !important; /* `!important` makes hidden take priorty over other selectors */
}

main {
    width: 100%;
}

/* === Main Menu === */

.main_menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: min(calc(100% - 2rem), var(--content-width-normal));
    margin-inline: auto;
    padding: clamp(1rem, 2vh, 2rem) clamp(1.5rem, 3vh, 3rem);

    gap: clamp(3.25rem, 5vh, 4rem);
}

/* == Menu header == */

.menu_header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.5rem, 1.5vh, 1rem);


    width: 100%;
    text-align: center;
}

.menu_header h1 {
    margin: 0;
    font-size: clamp(2.5rem, 2.75rem, 3rem); /* reminder that clamps scales between (min, preferred, max) */
}

.menu_sprite {
    display: block;

    width: clamp(9.5rem, 25vw, 12.5rem);
    aspect-ratio: 1;

    object-fit: contain;

    filter:
        drop-shadow(1px 0 0 black)
        drop-shadow(-1px 0 0 black)
        drop-shadow(0 1px 0 black)
        drop-shadow(0 -1px 0 black);
}

/* == Main Menu actions == */

.menu_actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.5rem, 2vh, 2rem);

    width: 100%;
}

.menu_button {
    display: flex;
    justify-content: center;
    align-items: center;

    width: min(40%, 9rem);
    min-height: 3.5rem;
    padding: 0.85rem 1.25rem;

    border: 0;
    border-radius: var(--radius-tiny);
    border-top-left-radius: var(--radius-medium);
    border-bottom-right-radius: var(--radius-medium);

    background-color: var(--color-surface);
    color: var(--color-text);

    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;

    box-shadow: var(--shadow-small);
    cursor: pointer;

    transition:
        background-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

.menu_button:hover {
    box-shadow: var(--shadow-medium);
    background-color: var(--menu-highlight);
    transform: translateY(-1px);
}

.menu_button:active {
    box-shadow: var(--shadow-small);
    transform: translateY(0);
}

/* == settings summary == */

.settings_summary {
    width: 100%;
    text-align: center;
}

.settings_summary p {
    margin: 0;
    font-size: 0.875rem;
}

.summary_stats {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;

    width: 100%;
}

.summary_stats span {
    white-space: nowrap;
}

.disclaimer {
    margin: 0;
    font-size: 0.5rem;
    text-align: center;
    width: min(60%, 32rem);
    padding-bottom: 1rem;
}

@media (max-width: 800px) {
    .disclaimer {
        width: 90%;
    }
}

@media (min-height: 900px) and (min-width: 900px) { /* make font bigger on wider/taller screens */
    .disclaimer {
        font-size: .75rem;
        width: 50%;
    }
}

/* == utility link buttons == */

.exit_button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;

    min-height: 2.35rem;
    padding: 0.65rem 0.85rem;

    border: 0;
    border-radius: var(--radius-max);

    background-color: var(--color-surface);
    color: var(--color-text);

    font-family: "Ubuntu", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;

    box-shadow: none;
    cursor: pointer;

    transition:
        background-color 150ms ease,
        box-shadow 150ms ease,
        transform 150ms ease;
}

.exit_button:hover {
    background-color: var(--menu-highlight);
    box-shadow: var(--shadow-medium);
    transform: translateY(-1px);
}

.exit_button:active {
    box-shadow: var(--shadow-small);
    transform: translateY(0);
}

.exit_button img {
    width: 0.75rem;
}

/* === Quiz Page === */

.entire_quiz {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);

    height: 100svh;
    min-height: 0;

    padding: 0.75rem 1rem 1rem;
    overflow: hidden;
}

.quiz_content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;

    min-height: 0;
    overflow-y: auto; /* makes content scroll when screen too small */
}

@media (min-height: 800px) { /* widen the gap for bigger screens, like desktops */
    .quiz_content {
        gap: 3.5rem;
    }
}

.quiz_content.sprites_in_choices_questions {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    justify-content: normal;
    gap: 0;
    min-height: 0;  
}


.quiz_header {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 1.25rem;

    width: min(100%, var(--content-width-normal));
    margin: 0 auto;
    padding-top: 0.5rem;
}

.quiz_score {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0;

    color: var(--color-text);
    font-size: 0.95rem;
    font-family: "Ubuntu", sans-serif;
    font-weight: 500;
    white-space: nowrap;
}

.answered_correct, .answered_incorrect {
    padding: 0.25rem;
    border: 1px solid;
    border-radius: var(--radius-small);
    color: var(--color-neutral-light);
}

.answered_correct {
    background-color: var(--correct-count-background);
    border-color: var(--correct-count-border);
}

.answered_incorrect {
    background-color: var(--incorrect-count-background);
    border-color: var(--incorrect-count-border);
}

.quiz_header_controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
}

/* == Quiz Answer Prompt == */

.display_prompt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    min-height: 0;
    text-align: center;
}

.display_prompt:not(.sprites_in_choices_questions) { /* applies for questions without sprites in answer choices (default questions) */
    min-height: 13rem; /* min-height so it is not crushed in small windows */
}

.question_prompt {
    margin: 0;
    padding: .5rem 1rem 1.25rem;

    font-family: "Fredoka", sans-serif;
    font-size: clamp(1.5rem, 2.85vw, 1.95rem);
    font-weight: 500;
}

.prompt_sprite {
    display: block;

    width: min(14rem, 58vw);
    height: 14rem;

    object-fit: contain;

    filter: /* gives the sprite a thick border */
        drop-shadow(1px 0 0 black)
        drop-shadow(-1px 0 0 black)
        drop-shadow(0 1px 0 black)
        drop-shadow(0 -1px 0 black);
}

.hide_sprite {
    filter: grayscale(100%) brightness(0%); /* turns the sprite black */
}

/* == Quiz Answer Choices == */

.answer_choices {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* minmax() prevents overflow by ignoring the content's minimum size if necessary */
    grid-template-rows: minmax(6rem, 1fr) minmax(6rem, 1fr);
    gap: 1rem;

    width: min(100%, var(--content-width-normal)); /* width never stretches past 52rem, prevents crazy stretch on large desktop screens */
    height: 85%;
    min-height: 0; /* allows better shrinkage */
    max-height: 18rem;

    align-self: center;

    margin: 0 auto; /* centers grid horizontally */
}

.answer_choices button {
    min-width: 0; /* allows better shrinkage */
    min-height: 6rem;

    border: 0;
    border-radius: var(--radius-small);
    border-top-left-radius: var(--radius-large);
    border-bottom-right-radius: var(--radius-large);

    background-color: var(--color-surface);
    color: var(--color-text);

    box-shadow: var(--shadow-small); /* adds depth */
    cursor: pointer;

    transition: /* when changing state (like normal -> hover), transitions colors over a specified time*/
        background-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

.answer_choices button:not(:disabled):hover {
    box-shadow: var(--shadow-medium); /* goes from small to medium shadow, creates lifted apperance */
    background-color: var(--color-surface-hover);
    transform: translateY(-1px);
}
/* not(:disabled) means the selectors do not apply when the buttons are disabled. This is so disabled buttons do not hover. */

.answer_choices button:not(:disabled):active { /* styling afer using clicks button */
    box-shadow: var(--shadow-small);
    transform: translateY(0);
} /*
Activates in the split second when the user clicks the button but before it becomes disabled.
So when the user hovers over the button, it rises. Once the button is clicked, it lowers. 
This gives the visual apperance of actually pressing a button down. 

After losing the "active" property, the button styling defaults to `.answer_choices button {...}`, so it is ready for the next question.
 */

.answer_choices button:disabled {
    cursor: default; /* make the cursor default to shown that the button cannot be clicked once it is disabled */
}

.answer_choices button:disabled label {
    cursor: default;
}

/* == Sprite-based answer choices == */

.answer_choices.sprites_in_choices_questions {
    grid-template-rows: minmax(12rem, 1fr) minmax(12rem, 1fr);
    width: min(100%, var(--content-width-wide)); /* chooses the minimum value between 100% of the parent container or 64rem. Essentially means size of the answer_choices caps at 64rem, so on large screens buttons do not stretch. */
    height: 100%;
    max-height: none; /* gets rid of old height cap, making buttons taller */

    align-self: stretch; /* grid stretches vertically to occupy all space available */

    padding-top: 0.5rem;
    padding-bottom: 1rem;
}

.answer_choices.sprites_in_choices_questions button {
    min-height: 12rem;
    display: flex;
    flex-direction: column; /* display flex column makes it so the sprite and sprite name will stack vertically */
    justify-content: center;
    align-items: center;
    gap: 0.35rem;

    padding: 1.15rem;
    border-radius: var(--radius-medium);
}

.answer_choice_sprite {
    display: block;

    width: min(10.25rem, 100%); /* chooses minimum value between 10.25 rem and 100% of parent container, essentially caps sprite width at 10.25 rem */
    height: 10.25rem;

    object-fit: contain;

    transition: transform 180ms ease;

    filter:
        drop-shadow(1px 0 0 black)
        drop-shadow(-1px 0 0 black)
        drop-shadow(0 1px 0 black)
        drop-shadow(0 -1px 0 black);
}

.answer_choices button:not(:disabled):hover .answer_choice_sprite {
    transform: scale(1.04); /* makes the sprite grow larger when the button is hovered over */
}

.answer_label {
    font-size: 1.15rem;
    font-weight: 600;
    cursor: pointer;
}

/* == Correctness classes for answer choice buttons == */
.answer_choices button.correct,
.answer_choices button.correct:disabled {
    background-color: var(--color-success);
    color: var(--color-success-text);

    box-shadow: 0 4px 14px rgba(61, 155, 87, 0.16);
}

.answer_choices button.incorrect,
.answer_choices button.incorrect:disabled {
    background-color: var(--color-failure);
    color: var(--color-failure-text);

    box-shadow: 0 4px 14px rgba(207, 76, 69, 0.15);
}


/* Error Page Code */
.error_body {
    display: grid;
    justify-items: center;
    align-content: center;
    grid-template-rows: auto auto auto;

    min-height: 100vh;
    padding: 2rem;

    gap: 1rem;
    text-align: center;
}

.error_body img {
    display: block;

    width: clamp(9.5rem, 25vw, 12.5rem);
    aspect-ratio: 1;

    object-fit: contain;

    filter:
        drop-shadow(1px 0 0 black)
        drop-shadow(-1px 0 0 black)
        drop-shadow(0 1px 0 black)
        drop-shadow(0 -1px 0 black);
}

.error_body h1 {
    margin: 0;
    margin-top: 1rem;
}