/* =============================================== */
/* Custom Properties */
:root {
    --ff-rubik: "Rubik", sans-serif;
    --font-base: 16px;

    --lh-100: 1;
    --lh-120: 1.2;
    --lh-150: 1.5;

    --fs-12: 0.75rem;
    --fs-14: 0.875rem;
    --fs-16: 1rem;
    --fs-18: 1.125rem;
    --fs-20: 1.25rem;
    --fs-24: 1.5rem;
    --fs-28: 1.75rem;
    --fs-32: 2rem;
    --fs-36: 2.25rem;
    --fs-40: 2.5rem;
    --fs-48: 3rem;
    --fs-64: 4rem;
    --fs-88: 5.5rem;
    --fs-144: 9rem;

    /* Colors (RGB) */
    --clr-white: 255, 255, 255;
    --clr-black: 0, 0, 0;
    --clr-grey-500: 98, 108, 127;
    --clr-grey-50: 244, 246, 250;

    --clr-blue-950: 45, 57, 73;
    --clr-blue-900: 49, 62, 81;
    --clr-blue-850: 59, 77, 102;
    --clr-blue-500: 48, 106, 255;
    --clr-blue-300: 171, 193, 225;
    --clr-blue-100: 237, 241, 249;
    --clr-blue-50: 235, 240, 255;

    --clr-green-500: 47, 216, 135;
    --clr-green-100: 224, 253, 239;

    --clr-purple-600: 167, 41, 245;
    --clr-purple-350: 207, 136, 250;
    --clr-purple-100: 246, 231, 255;

    --clr-orange-400: 255, 126, 53;
    --clr-orange-50: 255, 245, 237;

    --clr-red-500: 238, 84, 84;
}

/* @media (min-width: 36em) {
    :root {
        --fs-48: 48px;
        --lh-71: 71px;

    }
} */

/* @media (min-width: 48em) {
    :root {
        --fs-48: 48px;
    }
} */

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

html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

body {
    font-size: var(--font-base);
    font-family: var(--ff-rubik);
    background-color: rgb(var(--clr-grey-50));
    color: rgb(var(--clr-blue-900));
    letter-spacing: 0;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd,
ul,
ol {
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
}

h1,
h2,
h3,
h4 {
    text-wrap: balance;
}

a:not([class]) {
    text-decoration-skip-ink: auto;
    text-decoration: none;
    color: currentColor;
}

img,
picture {
    max-width: 100%;
    display: block;
}

input,
button,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
    border: none;
}

button {
    border: none;
    background: inherit;
    cursor: pointer;
}

textarea:not([rows]) {
    min-height: 10em;
}

:target {
    scroll-margin-block: 5ex;
}

/* =============================================== */
/* Utility classes */

.container {
    margin: 0 auto;
    max-width: 100%;
}

.text-present-1 {
    font-weight: 500;
    font-size: var(--fs-88);
    line-height: var(--lh-100);
}

.text-present-2-medium {
    font-weight: 500;
    font-size: var(--fs-40);
    line-height: var(--lh-100);
}

.text-present-2-light {
    font-weight: 300;
    font-size: var(--fs-40);
    line-height: var(--lh-100);
}

.text-present-3 {
    font-weight: 500;
    font-size: var(--fs-20);
    line-height: var(--lh-120);
}

.text-present-4 {
    font-weight: 500;
    font-size: var(--fs-18);
    line-height: var(--lh-100);
}

.text-present-5-italic {
    font-style: italic;
    font-weight: 400;
    font-size: var(--fs-14);
    line-height: var(--lh-150);
}

.text-present-5-medium {
    font-weight: 500;
    font-size: var(--fs-24);
    line-height: var(--lh-150);
}

.text-present-5-regular {
    font-weight: 400;
    font-size: var(--fs-24);
    line-height: var(--lh-150);
}

.text-present-6 {
    font-style: italic;
    font-weight: 400;
    font-size: var(--fs-20);
    line-height: var(--lh-150);
}

@media (min-width: 36em) {
    .text-present-1 {
        font-size: var(--fs-144);
    }

    .text-present-2-medium,
    .text-present-2-light {
        font-size: var(--fs-64);
    }

    .text-present-3 {
        font-size: var(--fs-36);
    }

    .text-present-4 {
        font-size: var(--fs-28);
    }

    .text-present-5-italic {
        font-size: var(--fs-28);
        line-height: var(--lh-100);
    }

    .text-present-5-medium,
    .text-present-5-regular {
        font-size: var(--fs-24);
        line-height: var(--lh-150);
    }

    .text-present-6 {
        font-size: var(--fs-20);
        line-height: var(--lh-150);
    }
}

.text-white {
    color: rgb(var(--clr-white));
}

.text-black {
    color: rgb(var(--clr-black));
}

.text-grey-500 {
    color: rgb(var(--clr-grey-500));
}

.text-grey-50 {
    color: rgb(var(--clr-grey-50));
}

.text-blue-950 {
    color: rgb(var(--clr-blue-950));
}

.text-blue-900 {
    color: rgb(var(--clr-blue-900));
}

.text-blue-850 {
    color: rgb(var(--clr-blue-850));
}

.text-blue-500 {
    color: rgb(var(--clr-blue-500));
}

.text-blue-300 {
    color: rgb(var(--clr-blue-300));
}

.text-blue-100 {
    color: rgb(var(--clr-blue-100));
}

.text-blue-50 {
    color: rgb(var(--clr-blue-50));
}

.text-green-500 {
    color: rgb(var(--clr-green-500));
}

.text-green-100 {
    color: rgb(var(--clr-green-100));
}

.text-purple-600 {
    color: rgb(var(--clr-purple-600));
}

.text-purple-100 {
    color: rgb(var(--clr-purple-100));
}

.text-orange-400 {
    color: rgb(var(--clr-orange-400));
}

.text-orange-50 {
    color: rgb(var(--clr-orange-50));
}

.text-red-500 {
    color: rgb(var(--clr-red-500));
}

/* =============================================== */
/* Components */

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
}

.subject-name-container {
    display: flex;
    gap: 16px;
    align-items: center;
    font-weight: 500;
    font-size: var(--fs-18);
    line-height: var(--lh-100);
    color: rgb(var(--clr-blue-900));
}

.icon-svg {
    border-radius: 6px;
}

.nav .toggle-color {
    display: flex;
    gap: 8px;
}

.toggle-color svg {
    width: 14px;
    height: 14px;
    margin-top: 3px;
}

.nav label {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 20px;
}

.nav label input {
    opacity: 0;
    width: 0;
    height: 0;
}

.nav span {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(var(--clr-purple-600));
    transition: .4s;
    border-radius: 14px;
}

.nav span:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 4px;
    bottom: 4px;
    background-color: rgb(var(--clr-white));
    transition: .4s;
    border-radius: 50%;
}

.nav input:not(:checked)+span {
    background-color: rgb(var(--clr-purple-600));
}

.nav input:checked+span:before {
    transform: translateX(12px);
}

.question-container {
    padding: 32px 24px 40px;
}

.question-container p {
    font-style: italic;
    font-weight: 400;
    font-size: var(--fs-14);
    line-height: var(--lh-150);
    color: rgb(var(--clr-grey-500));
}

.question-container h2 {
    font-weight: 500;
    font-size: var(--fs-20);
    line-height: var(--lh-120);
    color: rgb(var(--clr-blue-900));
    padding: 16px 0 24px;
}

.question-bar-progress {
    height: 16px;
    background: rgb(var(--clr-white));
    border-radius: 20px;
    display: flex;
    align-items: center;
}

.question-bar-progress .question-bar-fill {
    width: 0%;
    height: 8px;
    background: rgb(var(--clr-purple-600));
    transition: 0.2s all;
    border-radius: 20px;
    margin: 4px;
}

.answers-container {
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-weight: 500;
    font-size: var(--fs-18);
    line-height: var(--lh-100);
    font-size: var(--fs-28);

}

.answers-container label {
    border: 3px solid transparent;
    display: flex;
    align-items: center;
    cursor: pointer;
    border-radius: 12px;
    background-color: rgb(var(--clr-white));
}

.answers-container label:hover {
    border: 3px solid rgb(var(--clr-purple-600));
}

.answers-container label span {
    color: rgb(var(--clr-grey-500));
    background-color: rgb(var(--clr-grey-50));
    padding: 11px 14px;
    margin: 16px;
    border-radius: 6px;
}

.answers-container label:hover span {
    background-color: rgb(var(--clr-purple-600));
    color: rgb(var(--clr-white));
}

.answers-container label {
    color: rgb(var(--clr-blue-900));
}

.answers-container label img {
    width: 32px;
    margin-right: 16px;
}

.answers-container input {
    display: none;
}

.answers-container button {
    background-color: rgb(var(--clr-purple-600));
    color: rgb(var(--clr-white));
    border-radius: 12px;
    padding-block: 19px;
}

.answers-container button:hover {
    background-color: rgb(var(--clr-purple-350))
}

.answers-container .error-message {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    font-size: var(--fs-18);
    line-height: var(--lh-100);
    color: rgb(var(--clr-red-500));
    margin: 0 auto;
}

.error-message img {
    width: 32px;
}

.answers-container .active {
    border: 3px solid rgb(var(--clr-purple-600));
}

.answers-container .active span {
    background-color: rgb(var(--clr-purple-600));
    color: rgb(var(--clr-white));
}

.answers-container .correct {
    border: 3px solid rgb(var(--clr-green-500));

}

.answers-container .correct span {
    background-color: rgb(var(--clr-green-500));
    color: rgb(var(--clr-white));
}

.answers-container .incorrect {
    border: 3px solid rgb(var(--clr-red-500));

}

.answers-container .incorrect span {
    background-color: rgb(var(--clr-red-500));
    color: rgb(var(--clr-white));
}

@media (min-width: 36em) {
    .nav {
        padding: 40px 64px 47px;
    }

    .nav .toggle-color {
        gap: 16px;
    }

    .toggle-color svg {
        width: 21px;
        height: 21px;
        margin-top: 3.5px;
    }

    .nav label {
        width: 48px;
        height: 28px;
    }

    .nav span:before {
        height: 20px;
        width: 20px;
    }

    .nav input:checked+span:before {
        transform: translateX(20px);
    }

    .subject-name-container {
        gap: 24px;
        font-size: var(--fs-28);
    }

    .subject-name-container svg {
        width: 56px;
        height: 56px;
    }

    .icon-svg {
        border-radius: 8px;
    }

    .question-container {
        padding: 2px 64px 40px;
    }

    .question-container p {
        font-size: var(--fs-20);
        line-height: var(--lh-150);
    }

    .question-container h2 {
        padding: 24px 0 40px;
        font-size: var(--fs-36);
    }

    .answers-container {
        gap: 24px;
        padding: 0 64px;
        font-size: var(--fs-28);
    }

    .answers-container label span {
        padding: 14px 18px;
        margin-right: 32px;
        border-radius: 12px;
    }

    .answers-container label img {
        width: 40px;
        margin-right: 32px;
    }

    .answers-container button {
        margin-top: 8px;
        padding-block: 32px;
        border-radius: 24px;
    }
}

@media (min-width: 60em) {
    .nav {
        padding: 97px 0px 99px;
    }

    .question-container,
    .answers-container {
        padding: 0;
    }

    .question-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .answers-container {
        flex: 1;
    }

    .question-bar-progress {
        margin-bottom: 124px;
    }

    .quiz-container {
        display: flex;
        gap: 128px;
        justify-content: space-between;
    }

    .question-container h2 {
        padding: 24px 0 0;
    }

    .answers-container label span {
        padding: 14px 18px;
        margin: 24px 32px 24px 24px;
        border-radius: 12px;
    }
}

.result-header {
    font-weight: 100;
    font-size: var(--fs-40);
    line-height: var(--lh-100);
    color: rgb(var(--clr-blue-900));
    padding: 32px 24px 40px;
}

.result-header span {
    font-weight: 500;
    font-size: var(--fs-40);
    line-height: var(--lh-100);
}

.score-result-container {
    margin: 0 24px;
    text-align: center;
}

.score-output {
    background-color: rgb(var(--clr-white));
    border-radius: 12px;
}

.score-output-header {
    padding: 32px 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.score-output h3 {
    font-weight: 500;
    font-size: var(--fs-20);
    line-height: var(--lh-120);
    color: rgb(var(--clr-blue-900));
}


.points {
    font-weight: 500;
    font-size: var(--fs-88);
    line-height: var(--lh-100);
    color: rgb(var(--clr-blue-900));
}

.questions-count {
    padding: 16px 0 32px;
    font-weight: 500;
    font-size: var(--fs-20);
    line-height: var(--lh-120);
    color: rgb(var(--clr-grey-500));
}

.score-result-container button {
    background-color: rgb(var(--clr-purple-600));
    width: 100%;
    border-radius: 12px;
    margin-top: 16px;
    padding: 16px 0 16px;
    font-weight: 500;
    font-size: var(--fs-18);
    line-height: var(--lh-100);
    color: rgb(var(--clr-white));
}

.score-result-container button:hover {
    background-color: rgb(var(--clr-purple-350))
}


@media (min-width: 36em) {
    .result-header {
        padding: 2px 64px 64px;
        font-size: var(--fs-64);
    }

    .result-header span {
        font-size: var(--fs-64);
    }

    .score-result-container {
        margin: 0 64px;
    }

    .score-output {
        border-radius: 24px;
    }

    .score-output-header {
        padding: 48px 0 40px;
        gap: 24px;
    }

    .score-output-header svg {
        width: 56px;
        height: 56px;
    }

    .score-output h3 {
        font-size: var(--fs-28);
    }

    .points {
        font-size: var(--fs-144);
    }

    .questions-count {
        padding: 16px 0 48px;
        font-size: var(--fs-24);
        line-height: var(--lh-150);
    }

    .score-result-container button {
        border-radius: 24px;
        margin-top: 32px;
        padding: 32px 0 32px;
        font-size: var(--fs-28);
    }
}

@media (min-width: 60em) {
    .result-header {
        padding: 0;
    }

    .score-container {
        display: flex;
        justify-content: space-between;
    }

    .result-header {
        flex: 1;
    }

    .score-result-container {
        flex: 1;
        margin: 0;
    }
}

.theme-dark {
    background-color: rgb(var(--clr-blue-900));
    color: rgb(var(--clr-white));
}

.theme-dark main::after,
.theme-dark main::before {
    border: 144px solid rgb(var(--clr-blue-950));
}

.theme-dark .toggle-color path {
    fill: rgb(var(--clr-white));
}

.theme-dark p.text-grey-500 {
    color: rgb(var(--clr-blue-300));
}

.theme-dark .subject-header>div button {
    background-color: rgb(var(--clr-blue-850));
    color: rgb(var(--clr-white));
}

.theme-dark .subject-header>div button:hover {
    background-color: rgb(var(--clr-white));
    color: rgb(var(--clr-blue-900));
}

.theme-dark .subject-name-container img {
    background-color: rgb(var(--clr-green-100));
}

.theme-dark .subject-name,
.theme-dark .quiz-container h2 {
    color: rgb(var(--clr-white));
}

.theme-dark .question-container p {
    color: rgb(var(--clr-blue-300));
}

.theme-dark .question-bar-progress {
    background-color: rgb(var(--clr-blue-850));
}

.theme-dark .answers-container label {
    background-color: rgb(var(--clr-blue-850));
    color: rgb(var(--clr-white));
}

.theme-dark .result-header {
    color: rgb(var(--clr-white));
}

.theme-dark .score-output {
    background-color: rgb(var(--clr-blue-850));
}

.theme-dark .score-output h3,
.theme-dark .points {
    color: rgb(var(--clr-white));
}

.theme-dark .questions-count {
    color: rgb(var(--clr-blue-300));
}


.main-header {
    padding: 32px 24px 40px;
}

.main-header h1 {
    padding-bottom: 16px;
}

.subject-header {
    padding: 0 24px 207px;
}

@media (min-width: 36em) {
    .main-header {
        padding: 0px 64px 64px;
    }

    .subject-header {
        padding: 0 64px 225px;
    }
}

.subject-header>div button {
    padding: 0;
    width: 100%;
    display: flex;
    align-items: center;
    border-radius: 12px;
    background-color: rgb(var(--clr-white));
    box-shadow: 0 16px 40px rgba(143, 160, 193, 0.14);
    color: rgb(var(--clr-blue-900));
}

.subject-header>div button:hover {
    background-color: rgb(var(--clr-blue-850));
    color: rgb(var(--clr-white));
}

.subject-header>div:not(:last-child) button {
    margin-bottom: 16px;
}

.subject-header svg {
    border-radius: 6px;
    margin: 16px;
}

@media (min-width: 36em) {
    .subject-header>div:not(:last-child) button {
        margin-bottom: 24px;
    }

    .subject-header svg {
        margin: 24px;
        padding: 8px;
        width: 56px;
        height: 56px;

    }
}

.subject-header div:nth-child(1) svg {
    background-color: rgb(var(--clr-orange-50));
}

.subject-header div:nth-child(2) svg {
    background-color: rgb(var(--clr-green-100));
}

.subject-header div:nth-child(3) svg {
    background-color: rgb(var(--clr-blue-50));
}

.subject-header div:nth-child(4) svg {
    background-color: rgb(var(--clr-purple-100));
}

main {
    position: relative;
}

main:after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 977px;
    height: 977px;
    border: 144px solid rgb(var(--clr-blue-100));
    border-radius: 50%;
    z-index: -1;
}

@media (min-width: 36em) {
    main:after {
        top: -446px;
        left: -539px;
    }
}

@media (min-width: 60em) {
    main {
        max-width: 1157px;
        margin: 0 auto;
        padding-bottom: 272px;
    }

    main:before {
        content: "";
        position: absolute;
        bottom: -369px;
        right: -581px;
        width: 977px;
        height: 977px;
        border: 144px solid rgb(var(--clr-blue-100));
        border-radius: 50%;
        z-index: -1;
    }

    .wrapper {
        overflow: clip;
    }

    main:after {
        top: -413px;
        left: -683px;
    }

    .header {
        display: flex;
    }

    .main-header {
        padding: 0;
        flex: 1;
    }

    .subject-header {
        padding: 0;
        flex: 1;
        max-width: 564px;
    }
}