@font-face {
    font-family: "Rubik";
    src: url("../assets/fonts/Rubik-VariableFont_wght.ttf") format("truetype");
    font-style: normal;
}

@font-face {
    font-family: "Rubik";
    src: url("../assets/fonts/Rubik-Italic-VariableFont_wght.ttf") format("truetype");
    font-style: italic;
}

:root {
    /* Colours */
    --purple: hsl(277 91% 56%);
    --green: hsl(151 70% 50%);
    --red: hsl(0 82% 63%);

    --purplish-white: hsl(277 100% 95%);
    --greenish-white: hsl(151 87% 94%);
    --redish-white: hsl(22 100% 96%);
    --bluish-white: hsl(223 100% 96%);

    --dark-navy: hsl(216 25% 25%);
    --shadow-navy: hsl(216 25% 25% / 14%);
    --navy: hsl(215 27% 32%);
    --grey-navy: hsl(219 13% 44%);
    --light-bluish: hsl(216 47% 78%);
    --shadow-blue: hsl(220 29% 66% / 14%);
    --light-grey: hsl(220 38% 97%);
    --white: hsl(0 0% 100%);
    --transparent-white-50: hsl(0 0% 100% / 50%);
    --transparent-white-88: hsl(0 0% 100% / 88%);


    /* Colour settings */
    --theme-color: var(--purple);

    --answer-decoration-color: var(--grey-navy);
    --answer-hover-decoration-color: var(--theme-color);
    --answer-hover-decoration-bg-color: var(--filter-light), var(--answer-hover-decoration-color);
    --answer-marked-decoration-color: var(--white);
    --answer-selected-decoration-bg-color: var(--theme-color);
    --bg-color: var(--light-grey);
    --body-color: var(--dark-navy);
    --button-bg-color: var(--white);
    --correct-color: var(--green);
    --error-color: var(--red);
    --icon-bg-color-accessibility: var(--purplish-white);
    --icon-bg-color-css: var(--greenish-white);
    --icon-bg-color-html: var(--redish-white);
    --icon-bg-color-js: var(--bluish-white);
    --incorrect-color: var(--red);
    --option-bg-color: var(--light-grey);
    --p-color: var(--grey-navy);
    --progress-bar-color: var(--theme-color);
    --progress-bar-bg-color: var(--white);
    --score-display-color: var(--white);
    --selected-color: var(--theme-color);
    --submit-button-color: var(--white);
    --submit-button-bg-color: var(--theme-color);
    --submit-button-bg-color-hover:
        var(--filter-medium-light), var(--submit-button-bg-color);
    --theme-switch-color: var(--white);
    --theme-switch-bg-color: var(--theme-color);
    --theme-switch-icon-color: var(--grey-navy);


    /* Color filter */
    --filter-medium-light: linear-gradient(var(--transparent-white-50), var(--transparent-white-50));
    --filter-light: linear-gradient(var(--transparent-white-88), var(--transparent-white-88));


    /* Shadow */
    --shadow-settings: 0 16px 40px 0;
    --shadow: var(--shadow-settings) var(--shadow-blue);


    /* Font sizes */
    --display: clamp(5.5rem, 2.1603rem + 14.2494vw, 9rem);

    --heading-l: clamp(2.5rem, 1.0687rem + 6.1069vw, 4rem);
    --heading-m: clamp(1.25rem, 0.2958rem + 4.0712vw, 2.25rem);
    --heading-s: clamp(1.125rem, 0.5286rem + 2.5445vw, 1.75rem);

    --body-m: clamp(1.125rem, 0.7672rem + 1.5267vw, 1.5rem);
    --body-s: clamp(0.875rem, 0.5172rem + 1.5267vw, 1.25rem);


    /* Font weights */
    --medium: 500;
    --regular: 400;
    --light: 300;


    /* Line heights */
    --heading-line-height: 1;
    --body-line-height: 1.5;
    --question-line-height: 1.2;


    /* Gaps */
    --error-icon-gap: 8px;
    --main-row-gap: clamp(40px, 6.1069vw + 17.0992px, 64px);
    --main-column-gap: 32px;
    --option-decoration-gap: clamp(16px, 4.0712vw + 0.7328px, 32px);
    --options-gap: clamp(12px, 3.0534vw + .5496px, 24px);
    --quiz-name-decoration-gap: clamp(16px, 2.0356vw + 8.3664px, 24px);
    --theme-switch-gap: clamp(8px, 2.0356vw + 0.3664px, 16px);


    /* Padding */
    --body-padding-top: clamp(16px, 6.1069vw + -6.9008px, 40px);
    --body-padding-bottom: 16px;
    --body-padding-inline: clamp(24px, 10.1781vw + -14.1679px, 64px);
    --result-display-padding: clamp(32px, 4.0712vw + 16.7328px, 48px);
    --main-padding-top: clamp(24px, 6.3613vw + 0.145px, 49px);
    --option-button-padding: clamp(9px, 0.8929vw + 2.1429px, 15px);
    --progress-bar-padding: 4px;
    --submit-button-padding: clamp(16px, 3.3079vw + 3.5954px, 29px);
    --theme-switch-padding: 4px;


    /* Margin */
    --question-margin-top: clamp(12px, 3.8168vw + -2.313px, 27px);
    --question-margin-bottom: clamp(24px, 4.0712vw + 8.7328px, 40px);
    --score-margin-top: clamp(16px, 6.1069vw + -6.9008px, 40px);
    --score-margin-bottom: 16px;
    --submit-button-margin-block: clamp(12px, 5.0891vw + -7.084px, 32px);
    --title-margin-top: 8px;
    --title-margin-bottom: clamp(16px, 4.7619vw + -20.5714px, 48px);


    /* Sizing */
    --answer-feedback-icon-size: clamp(1.5rem, 1.1422rem + 1.5267vw, 1.875rem);
    --error-icon-size: clamp(2rem, 2.0356vw + 1.5229rem, 2.5rem);
    --icon-size: clamp(1.785625rem, 1.104rem + 2.9084vw, 2.5rem);
    --info-container-flex-basis: 465px;
    --interactive-container-flex-basis: 564px;
    --option-decoration-size: clamp(2.5rem, 1.5458rem + 4.0712vw, 3.5rem);
    --progress-bar-height: 1rem;
    --question-container-height: 28.25rem;
    --theme-switch-core-size: clamp(0.75rem, 0.2729rem + 2.0356vw, 1.25rem);;
    --theme-switch-height: calc(var(--theme-switch-core-size) + 2 * var(--theme-switch-padding));
    --theme-switch-width: calc(2 * var(--theme-switch-core-size) + 2 * var(--theme-switch-padding));
    --theme-switch-icon-size: clamp(1rem, 0.5229rem + 2.0356vw, 1.5rem);


    /* Icons */
    --icon-error: url("../assets/images/icon-error.svg");
    --icon-correct: url("../assets/images/icon-correct.svg");
    --icon-incorrect: url("../assets/images/icon-incorrect.svg");


    /* Background */
    --background-pattern-mobile: url("../assets/images/pattern-background-mobile-light.svg");
    --background-pattern-desktop: url("../assets/images/pattern-background-desktop-light.svg");

    --background-pattern: var(--background-pattern-mobile);


    /* Border radius*/
    --option-border-radius: clamp(12px, 0.5504px + 3.0534vw, 24px);
    --option-decoration-border-radius: clamp(6px, 0.2752px + 1.5267vw, 12px);
    --quiz-name-decoration-border-radius: clamp(4px, 0.184px + 1.0178vw, 8px);
    --round-borders: 10rem;


    /* Transition */
    --transition-time: 0.25s;


    /* Progress bar */
    --progress: 0;
}

/* Dark mode settings*/
:root:has(#theme-switch:checked) {
    /* Colour settings */
    --bg-color: var(--dark-navy);
    --body-color: var(--white);
    --button-bg-color: var(--navy);
    --error-color: var(--light-grey);
    --p-color: var(--light-bluish);
    --progress-bar-bg-color: var(--navy);
    --score-display-color: var(--navy);
    --theme-switch-icon-color: var(--white);

    /* Background */
    --background-pattern-mobile: url("../assets/images/pattern-background-mobile-dark.svg");
    --background-pattern-desktop: url("../assets/images/pattern-background-desktop-dark.svg");

    /* Shadow */
    --shadow: var(--shadow-settings) var(--shadow-navy);
}

@media (min-width: 600px) {
    :root {
        --background-pattern: var(--background-pattern-desktop);
    }
}

@media (min-width: 48rem) {
    :root {
        /* Border radius*/
        --option-decoration-border-radius: clamp(8px, -0.9259vw + 19.1104px, 12px);

        /* Padding */
        --body-padding-inline: clamp(64px, 11.3095vw + -22.8571px, 140px);
        --main-padding-top: clamp(49px, 5.3571vw + 7.8571px, 85px);
    }
}

@media (min-width: 48rem) and (min-height: 60rem) {
    :root {
        /* Padding */
        --body-padding-top: clamp(40px, 6.3988vw + -9.1429px, 83px);
    }
}

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

* {
    padding: 0;
    margin: 0;
}

.answer::before, .subject::before {
    display: block;
    content: "";
    height: var(--option-decoration-size);
    min-width: var(--option-decoration-size);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--option-bg-color);
    border-radius: var(--option-decoration-border-radius);
}

#answers {
    counter-reset: answer-count;
}

.answer::before {
    counter-increment: answer-count 1;
    content: counter(answer-count, upper-latin);
    color: var(--answer-decoration-color);
}
.answer.selected {
    border-color: var(--selected-color);
}
.answer.selected::before {
    background-color: var(--answer-selected-decoration-bg-color);
    color: var(--answer-marked-decoration-color);
}
.answer::after {
    display: block;
    content: "";
    height: var(--answer-feedback-icon-size);
    width: var(--answer-feedback-icon-size);
    background: no-repeat center/var(--answer-feedback-icon-size);
}
.answer.correct::after {
    background-image: var(--icon-correct);
}
.answer.correct.selected {
    border-color: var(--correct-color);
}
.answer.correct.selected::before {
    background-color: var(--correct-color);
    color: var(--answer-marked-decoration-color);
}
.answer.incorrect {
    border-color: var(--incorrect-color);
}
.answer.incorrect::before {
    background-color: var(--incorrect-color);
    color: var(--answer-marked-decoration-color);
}
.answer.incorrect::after {
    background-image: var(--icon-incorrect);
}

body {
    min-height: 100vh;
    background: var(--background-pattern) no-repeat top left/cover, var(--bg-color);
    color: var(--body-color);
    font-family: 'Rubik', Tahoma, sans-serif;
    line-height: var(--body-line-height);
    font-weight: var(--regular);
    padding-block: var(--body-padding-top) var(--body-padding-bottom);
    padding-inline: var(--body-padding-inline);
    min-width: 320px;
    transition: background-color var(--transition-time), color var(--transition-time);
    display: flex;
    flex-direction: column;
    align-items: center;
}

button {
    display: block;
    font-size: inherit;
    font-family: inherit;
    color: inherit;
    border: solid 3px transparent;
    box-shadow: var(--shadow);
    width: 100%;
}

li button {
    background: var(--button-bg-color);
}

button.submit {
    color: var(--submit-button-color);
    background: var(--submit-button-bg-color);
    padding: var(--submit-button-padding);
}

#error-container {
    height: var(--error-icon-size);
}

h1::after {
    content: "!";
}

h3::after {
    content: "...";
}

h1, h3 {
    font-size: inherit;
    line-height: inherit;
    font-weight: var(--medium);
    margin-block-start: var(--title-margin-top);
}

h2, h4 {
    font-size: var(--heading-s);
    line-height: var(--heading-line-height);
    font-weight: var(--medium);
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: var(--option-decoration-size);
}

hgroup {
    font-size: var(--heading-l);
    line-height: var(--heading-line-height);
    font-weight: var(--light);
}

hgroup:has(h1) {
    margin-block-end: var(--title-margin-bottom);
}

hgroup p {
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
}

[hidden] {
    display: none !important;
}
  
img, svg {
    display: block;
    max-width: 100%;
}

input {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

main {
    margin-block-start: var(--main-padding-top);
    display: flex;
    flex-direction: column;
    row-gap: var(--main-row-gap);
}

ol, ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--options-gap);
}

.option, .submit, #result-display {
    border-radius: var(--option-border-radius);
}

.option, .submit {
    font-size: var(--heading-s);
    font-weight: var(--medium);
    line-height: var(--heading-line-height);
}

.option {
    padding: var(--option-button-padding);
    gap: var(--option-decoration-gap);
    display: grid;
    grid-template-columns: auto 1fr auto;
    justify-items: start;
    align-items: center;
}

#outer-container {
    width: 100%;
    max-width: 72.5rem;
}

p {
    font-size: var(--body-m);
}

p.italic {
    font-style: italic;
    font-size: var(--body-s);
}

p:not(hgroup > p, #question) {
    color: var(--p-color);
}

p#unanswered-error {
    color: var(--error-color);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--error-icon-gap);
}

p#unanswered-error::before {
    content: "";
    height: var(--error-icon-size);
    width: var(--error-icon-size);
    background: var(--icon-error) center/contain no-repeat;
}

#progress-bar {
    height: var(--progress-bar-height);
    background-color: var(--progress-bar-bg-color);
    border-radius: var(--round-borders);
    padding: var(--progress-bar-padding);
}

#progress-bar::before {
    content: "";
    display: block;
    background-color: var(--progress-bar-color);
    border-radius: var(--round-borders);
    height: 100%;
    width: var(--progress);
    transition: width var(--transition-time);
}

#question {
    font-size: var(--heading-m);
    font-weight: var(--medium);
    line-height: var(--question-line-height);
    margin-block: var(--question-margin-top) var(--question-margin-bottom);
}

.quiz-name {
    display: flex;
    align-items: center;
    gap: var(--quiz-name-decoration-gap);
}

.quiz-name.subject::before {
    border-radius: var(--quiz-name-decoration-border-radius);
}

#result-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--score-display-color);
    box-shadow: var(--shadow);
    padding: var(--result-display-padding);
}

#score {
    font-size: var(--display);
    margin-block: var(--score-margin-top) var(--score-margin-bottom);
}

.subject::before {
    background: no-repeat center/var(--icon-size);
}

/* Subject icons */
.accessibility::before {
    background-image: url("../assets/images/icon-accessibility.svg");
    background-color: var(--icon-bg-color-accessibility);
}
.css::before {
    background-image: url("../assets/images/icon-css.svg");
    background-color: var(--icon-bg-color-css);
}
.html::before {
    background-image: url("../assets/images/icon-html.svg");
    background-color: var(--icon-bg-color-html);
}
.javascript::before {
    background-image: url("../assets/images/icon-js.svg");
    background-color: var(--icon-bg-color-js);
}

.submit {
    margin-block: var(--submit-button-margin-block);
}

#theme-switch {
    appearance: none;
    background-color: var(--theme-switch-bg-color);
    border-radius: var(--round-borders);
    height: var(--theme-switch-height);
    min-width: var(--theme-switch-width);
    padding: var(--theme-switch-padding);
}

#theme-switch::after {
    display: block;
    content: "";
    height: 100%;
    width: 50%;
    border-radius: 50%;
    background-color: var(--theme-switch-color);
    transition: transform var(--transition-time);
}

#theme-switch:checked::after {
    transform: translateX(100%);
}

#theme-switch-container {
    display: flex;
    align-items: center;
    gap: var(--theme-switch-gap);
}

#theme-switch-container svg {
    height: var(--theme-switch-icon-size);
    width: var(--theme-switch-icon-size);
}

#theme-switch-container svg path {
    fill: var(--theme-switch-icon-color);
}

#tsParticles {
    pointer-events: none;
}

@media (min-width: 82rem) {
    main {
        flex-direction: row;
        justify-content: space-between;
        gap: var(--main-column-gap);
    }

    .info-container {
        flex: 0 0 var(--info-container-flex-basis);
    }

    .interactive-container {
        flex: 0 0 var(--interactive-container-flex-basis);
    }

    #question-container {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: var(--question-container-height);
    }
}

@media (hover: hover) {
    #answers:not(.answered) .answer:not(.selected):hover::before {
        color: var(--answer-hover-decoration-color);
        background: var(--answer-hover-decoration-bg-color);
    }
    
    button:hover:not(.answered button), label:hover, input:hover {
        cursor: pointer;
    }
    
    button.submit:hover {
        background: var(--submit-button-bg-color-hover);
    }
}