: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;
    --type-text-color: #FFFFFF;

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

    /* Flash */
    --color-success: #b7dfc2;
    --color-success-text: #1e4620;

    --color-failure: #f5c2c0;
    --color-failure-text: #611a15;

    --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: 58rem;
    --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 {
    display: grid;
    justify-content: center;
    min-height: 100dvh;
    margin: 0;

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

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

body::after {
    content: ""; /* gives context for pseudo element to exit*/

    position: fixed;
    inset: 0; /* makes pseudo element cover entire viewport */

    z-index: -2; /* puts it very on bottom */

    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: 0;
}

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

h4 {
    font-weight: 500;
}

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

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

/* Pokemon Type colors
-> used in pokemon types section to apply correct colors to checkboxes for their corresponding types) 
*/

.type-normal {
    --type-color: #A8A77A;
}

.type-fire {
    --type-color: #EE8130;
}

.type-water {
    --type-color: #6390F0;
}

.type-electric {
    --type-color: #F7D02C;
}

.type-grass {
    --type-color: #7AC74C;
}

.type-ice {
    --type-color: #96D9D6;
}

.type-fighting {
    --type-color: #C22E28;
}

.type-poison {
    --type-color: #A33EA1;
}

.type-ground {
    --type-color: #E2BF65;
}

.type-flying {
    --type-color: #A98FF3;
}

.type-psychic {
    --type-color: #F95587;
}

.type-bug {
    --type-color: #A6B91A;
}

.type-rock {
    --type-color: #B6A136;
}

.type-ghost {
    --type-color: #735797;
}

.type-dragon {
    --type-color: #6F35FC;
}

.type-dark {
    --type-color: #705746;
}

.type-steel {
    --type-color: #B7B7CE;
}

.type-fairy {
    --type-color: #D685AD;
}

/* <==== Options Page Code ====> */

.options_main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: center;

    width: min(98vw, var(--content-width-normal));
    padding: clamp(1rem, 2vw, 3rem);
}

/* == Page header == */

.options_header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;

    text-align: center;
}

.options_header h1 {
    color: var(--color-text);
    font-size: clamp(2rem, 3vw, 3rem);

    border-radius: var(--radius-small);

    background-color: var(--color-surface);
    box-shadow: var(--shadow-small);
    
    padding: 0.25rem 1rem;
    margin-bottom: 1rem;
}

/* == Sections == */

.options_sections {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.options_section {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;

    padding: clamp(1rem, 3vw, 1.5rem);
}

.options_section_header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

.options_section_header h2 {
    color: var(--color-text);
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

/* == Option Containers == */

.change_enabled_questions,
.change_enabled_types,
.change_enabled_generations {
    display: grid;
    gap: 1rem;
}

.change_enabled_questions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.change_enabled_types {
    grid-template-columns: repeat(auto-fit, minmax(8rem, 9rem)); /* repeats enough columns to populate all items in container */
    justify-content: center;
}

.change_enabled_generations {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* == Option Choices == */

.checkbox, .select_all {
    display: flex;
    align-items: center;
    gap: 0.7rem;

    min-height: 3.25rem;
    padding: 0.75rem 0.9rem;

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

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

    cursor: pointer;

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

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

.checkbox:hover {
    box-shadow: var(--shadow-medium);
    background-color: var(--color-surface-hover);
    transform: translateY(-1px);
}

/* -= Select all button =- */

.select_all {
    width: clamp(7.25rem, 7.5rem, 8rem);
    min-height: 1.6rem;
    align-self: self-end;
    justify-content: center;

    padding: 0.6rem 1rem;

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

    color: var(--color-neutral-dark);
    font-size: 0.875rem;
    font-weight: 600;

    cursor: pointer;
}

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

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

.select_all:focus-visible {
    outline: 3px solid rgba(63, 143, 196, 0.25);
    outline-offset: 3px;
}

/* -= Pokemon Types Checkbox =- */

.change_enabled_types .checkbox {
    min-height: 2.75rem;
    padding: 0.6rem 0.75rem;

    /* 
    `color-mix()` mixes two colors together with a percentage of both. 
    In this case, 14% type-color and the rest (86%) goes to color-surface.
    
        Note: this makes the color of the checkbox desaturated, meaning more white-ish/gray. 
        When the checkbox is unchecked, it will default to this color.
    */
    background-color: color-mix(var(--type-color) 14%, var(--color-surface));

    border: 1px solid var(--type-color);

    color: var(--color-text);
}

.change_enabled_types .checkbox:hover {
    background-color: color-mix(var(--type-color) 24%, var(--color-surface)); /* makes checkbox slightly more saturated upon hover */

    border-color: var(--type-color);
}

/* only applies when checkbox is checked, otherwise reverts to default `.change_enabled_types .checkbox{}` styling */
.change_enabled_types .checkbox:has(input:checked) {
    background-color: var(--type-color); /* uses full vivid color when checked, while default styling (unchecked) is desaturated */
    border-color: var(--type-color);
    color: var(--type-text-color);
}

.change_enabled_types .checkbox input {
    accent-color: var(--type-color);
}

/* == Footer (exit & save buttons) == */
.options_actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;

    padding-top: 1.25rem;
}

a,
.save_button {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    width: clamp(7rem, 12.5vw, 11rem);
    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-family: "Nunito", sans-serif;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;

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

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

a:hover,
.save_button:hover {
    background-color: var(--menu-highlight);
    color: var(--color-text);

    box-shadow: 0 4px 12px rgba(32, 36, 44, 0.12);
    transform: translateY(-1px); /* button shown as displayed 1 pixel up when hovered over*/
}

a:active,
.save_button:active {
    transform: translateY(0);
}

/* ==== Flask Flash ==== */

.flash {
    width: 50%;
    padding: 1rem;
    border-radius: 10px;
    font-weight: 500;
    text-align: center;
    margin: 1rem auto;
}

.flash.success {
    background-color: var(--color-success);
    color: var(--color-success-text);
}

.flash.failure {
    background-color: var(--color-failure);
    color: var(--color-failure-text);
}