@layer reset,base,layout,components,utilities;@layer reset{*,*:before,*:after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}[role=list]{list-style:none;margin:0;padding:0}body{min-block-size:100vh}h1,h2,h3,button,input,label{line-height:1.1}p,li{text-wrap:wrap}img,picture{max-inline-size:100%;display:block}input,button,textarea,select{font:inherit}}@layer base{:root{--ff-primary: "Rubik", sans-serif;--fs-text-sml: .875rem;--fs-text-reg: 1rem;--fs-heading-sml: 1.125rem;--fs-heading-med: 1.25rem;--fs-heading-lrg: 2.5rem;--fs-display: 5.5rem;--clr-pure-white: hsl(0, 0%, 100%);--clr-light-gray: hsl(220, 37%, 97%);--clr-light-bluish: hsl(216, 47%, 78%);--clr-gray-navy: hsl(219, 13%, 44%);--clr-navy: hsl(215, 27%, 32%);--clr-dark-navy: hsl(216, 25%, 25%);--clr-light-purple: hsl(278, 100%, 95%);--clr-purple: hsl(277, 91%, 56%);--clr-violet: hsl(276, 81%, 67%);--clr-green: hsl(151, 70%, 50%);--clr-red: hsl(0, 82%, 63%);--box-shadow-light: 0px 16px 40px 0px rgba(143, 160, 193, .14);--box-shadow-dark: 0px 16px 40px 0px rgba(49, 62, 81, .14);--body-background-color: var(--clr-light-gray);--body-color-primary: var(--clr-dark-navy);--body-color-accent: var(--clr-gray-navy);--opt-button-bg: var(--clr-pure-white);--component-background-color: var(--clr-pure-white);--theme-toggle-color: var(--clr-gray-navy);--button-box-shadow: var(--box-shadow-light);--progress-bar-bg: var(--clr-pure-white);--spacing-025: .25rem;--spacing-050: .5rem;--spacing-075: .75rem;--spacing-100: 1rem;--spacing-125: 1.25rem;--spacing-150: 1.5rem;--spacing-175: 1.75rem;--spacing-200: 2rem;--spacing-250: 2.5rem;--spacing-300: 3rem;--spacing-400: 4rem;--spacing-500: 5rem;--icon-bg__html: hsl(22, 100%, 96%);--icon-bg__css: hsl(151, 88%, 94%);--icon-bg__js: hsl(225, 100%, 96%);--icon-bg__a11y: hsl(278, 100%, 95%);--focus-outline-color: currentColor;--focus-outline-offset: 0;--focus-outline-style: solid;--focus-outline-width: 2px;--bg-image-url: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='375'%20height='812'%20fill='none'%20viewBox='0%200%20375%20812'%3e%3ccircle%20cx='-113.5'%20cy='323.5'%20r='416.5'%20stroke='%23EDF1F9'%20stroke-width='144'/%3e%3c/svg%3e")}@media (width > 37.5rem){:root{--fs-text-sml: 1.25rem;--fs-heading-sml: 1.75rem;--fs-heading-med: 2.25rem;--fs-heading-lrg: 4rem;--fs-display: 9rem}}@media (width > 37.5rem){:root{--bg-image-url: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='438'%20height='531'%20fill='none'%20viewBox='0%200%20438%20531'%3e%3ccircle%20cx='-50.5'%20cy='42.5'%20r='416.5'%20stroke='%23EDF1F9'%20stroke-width='144'/%3e%3c/svg%3e")}}@media (width > 70rem){:root{--bg-image-url: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1440'%20height='960'%20fill='none'%20viewBox='0%200%201440%20960'%3e%3cg%20stroke='%23edf1f9'%20stroke-width='144'%3e%3ccircle%20cx='-50.5'%20cy='75.5'%20r='416.5'/%3e%3ccircle%20cx='1388.5'%20cy='840.5'%20r='416.5'/%3e%3c/g%3e%3c/svg%3e")}}*:focus-visible{outline-color:var(--focus-outline-color);outline-offset:var(--focus-outline-offset);outline-style:var(--focus-outline-style);outline-width:var(--focus-outline-width)}html[data-theme=dark]{--body-background-color: var(--clr-dark-navy);--body-color-primary: var(--clr-pure-white);--body-color-accent: var(--clr-light-bluish);--component-background-color: var(--clr-navy);--opt-button-bg: var(--clr-navy);--button-box-shadow: var(--box-shadow-dark);--theme-toggle-color: var(--clr-pure-white);--progress-bar-bg: var(--clr-navy);--bg-image-url: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='375'%20height='812'%20fill='none'%20viewBox='0%200%20375%20812'%3e%3ccircle%20cx='-113.5'%20cy='323.5'%20r='416.5'%20stroke='%232D3949'%20stroke-width='144'/%3e%3c/svg%3e")}@media (width > 37.5rem){html[data-theme=dark]{--bg-image-url: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='438'%20height='531'%20fill='none'%20viewBox='0%200%20438%20531'%3e%3ccircle%20cx='-50.5'%20cy='42.5'%20r='416.5'%20stroke='%232D3949'%20stroke-width='144'/%3e%3c/svg%3e")}}@media (width > 64rem){html[data-theme=dark]{--bg-image-url: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1440'%20height='960'%20fill='none'%20viewBox='0%200%201440%20960'%3e%3ccircle%20cx='-50.5'%20cy='75.5'%20r='416.5'%20stroke='%232D3949'%20stroke-width='144'/%3e%3ccircle%20cx='1388.5'%20cy='840.5'%20r='416.5'%20stroke='%232D3949'%20stroke-width='144'/%3e%3c/svg%3e")}}html{font-family:var(--ff-primary)}body{min-height:100vh;line-height:1.5;display:flex;flex-direction:column;background-color:var(--body-background-color);color:var(--body-color-primary);background-image:var(--bg-image-url);background-repeat:no-repeat;transition:background-color .3s ease,background-image .3s ease,color .3s ease}@media (prefers-reduced-motion: reduce){body{transition:none}}@media (width > 64rem){body{background-size:cover;background-position:center}}h1,h2,h3{line-height:1.1;text-wrap:balance}h2{font-weight:500}h1{font-size:var(--fs-heading-lrg);margin-block-end:var(--spacing-100);font-weight:300}@media (width > 64rem){h1{margin-block-end:var(--spacing-300)}}.heading-welcome span{font-weight:600}.accent-text{font-size:var(--fs-text-sml);font-style:italic;color:var(--body-color-accent)}}@layer layout{body{padding-inline:var(--spacing-150)}@media (width > 37.5rem){body{padding-inline:var(--spacing-400)}}.wrapper{max-width:var(--wrapper-max-width, 1160px);margin-inline:auto;padding-block:var(--wrapper-padding-block, var(--spacing-200))}@media (width > 37.5rem){.wrapper{--wrapper-padding-block: 0}}.grid-columns{display:grid}@media (width > 64rem){.grid-columns{grid-template-columns:1fr 1fr;gap:var(--spacing-200)}}.header-content{--wrapper-padding-block: var(--spacing-100);min-height:72px;display:flex;align-items:center;justify-content:space-between;width:100%}@media (width > 37.5rem){.header-content{--wrapper-padding-block: var(--spacing-250)}}@media (width > 64rem){.header-content{--wrapper-padding-block: var(--spacing-500)}}.quiz-info{margin-block-end:var(--spacing-250)}@media (width > 37.5rem){.quiz-info{margin-block-end:var(--spacing-400)}}@media (width > 64rem){.quiz-info{margin-block:0;max-width:465px}}.quiz-question-info{display:grid}@media (width > 64rem){.quiz-question-info{padding-block-end:var(--spacing-150)}}.quiz-question-number{line-height:1;margin-block-end:var(--spacing-075)}@media (width > 37.5rem){.quiz-question-number{margin-block-end:var(--spacing-175)}}.quiz-question{margin-block-end:var(--spacing-150);font-size:var(--fs-heading-med)}@media (width > 37.5rem){.quiz-question{margin-block-end:var(--spacing-250)}}.selection-container{margin-block-end:var(--spacing-075);display:flex;flex-direction:column;gap:var(--spacing-075)}@media (width > 37.5rem){.selection-container{margin-block-end:var(--spacing-200);gap:var(--spacing-150)}}@media (width > 64rem){.selection-container{margin-block:0}}@media (width > 64rem){.quiz-action-container{grid-column-start:2}}.feedback-message{display:flex;justify-content:center;align-items:center;gap:var(--spacing-050)}.feedback-message p{line-height:1;font-size:var(--fs-heading-med);color:var(--clr-red)}.quiz-result{margin-block-end:var(--spacing-075);padding:var(--spacing-200);display:flex;flex-direction:column;align-items:center;gap:var(--spacing-100);background-color:var(--component-background-color);border-radius:var(--spacing-075)}@media (width > 37.5rem){.quiz-result{margin-block-end:var(--spacing-200);padding:var(--spacing-300);gap:var(--spacing-250)}}@media (width > 64rem){.quiz-result{margin-block-end:0}}.results-heading h1,.results-heading p{font-size:var(--fs-heading-lrg);line-height:1.1}.results-heading h1{font-weight:300;margin-block-end:var(--spacing-050)}.results-heading p{font-weight:500}.score-summary{text-align:center}.final-score{font-size:var(--fs-heading-sml);line-height:1.05;color:var(--body-color-accent)}.final-score strong{display:block;margin-block-end:var(--spacing-100);font-size:var(--fs-display);color:var(--body-color-primary)}}@layer components{.theme-toggle-wrapper{margin-inline-start:auto;line-height:0;display:flex;align-items:center;gap:var(--spacing-050)}.theme-toggle-wrapper>svg{width:16px;height:16px}@media (width > 37.5rem){.theme-toggle-wrapper>svg{width:24px;height:24px}}@media (width > 37.5rem){.theme-toggle-wrapper{gap:var(--spacing-100)}}.theme-toggle-wrapper svg>path{fill:var(--theme-toggle-color);transition:fill .3s ease}.toggle-dark-mode{-moz-appearance:none;appearance:none;-webkit-appearance:none;cursor:pointer;position:relative;border:none;width:32px;height:20px;background-color:var(--clr-purple);border-radius:999px}@media (width > 37.5rem){.toggle-dark-mode{width:48px;height:28px}}.toggle-dark-mode:after{content:"";position:absolute;background-color:var(--clr-pure-white);width:12px;height:12px;border-radius:50%;transition-property:left;transition-duration:.2s;transition-timing-function:ease-in-out;left:4px;top:4px}.toggle-dark-mode:checked:after{transform:translate(12px)}@media (width > 37.5rem){.toggle-dark-mode:after{width:20px;height:20px}.toggle-dark-mode:checked:after{transform:translate(20px)}}.category-badge{display:flex;align-items:center;gap:var(--spacing-100)}@media (width > 37.5rem){.category-badge{gap:var(--spacing-150)}}.category-badge span{font-size:var(--fs-heading-sml);font-weight:500;line-height:1}button.button{border:none;background-color:var(--opt-button-bg);color:var(--body-color-primary);cursor:pointer;display:inline-flex;align-items:center;gap:var(--spacing-100);border-radius:var(--spacing-075);padding:var(--spacing-075);font-size:var(--fs-heading-sml);font-weight:500;line-height:1;box-shadow:var(--button-box-shadow)}@media screen and (--ms-high-contrast: active){button.button{border:2px solid currentColor}}@media (width > 37.5rem){button.button{border-radius:var(--spacing-150);gap:var(--spacing-200)}}@media (width > 70rem){button.button{padding:var(--spacing-125)}}button:disabled{cursor:not-allowed}button.btn-primary{margin-block-end:var(--spacing-075);width:100%;min-height:56px;justify-content:center;background-color:var(--clr-purple);color:var(--clr-pure-white);transition:all .15s ease-in-out}@media (width > 37.5rem){button.btn-primary{margin-block-end:var(--spacing-175);padding-block:var(--spacing-200)}}button.btn-primary:hover,button.btn-primary:focus-visible{background-color:var(--clr-violet)}button.cat-button,button.option-button{min-height:64px;text-align:left;justify-content:flex-start}button.cat-button:hover,button.cat-button:focus-visible{outline:3px solid var(--clr-purple)}button.option-button:hover .option-letter,button.option-button:focus-visible .option-letter{background-color:var(--clr-light-purple);color:var(--clr-purple)}button.option-button.selected:hover .option-letter,button.option-button.selected:focus-visible .option-letter,button.option-button.selected .option-letter{background-color:var(--clr-purple);color:var(--clr-pure-white)}button.option-button:focus-visible{outline-color:var(--clr-purple);outline-width:3px}button.option-button.selected{outline:3px solid var(--clr-purple)}button img.icon,.option-button .option-letter,.category-badge img.icon{display:inline-block;flex-shrink:0;width:40px;height:40px;padding:var(--spacing-025);border-radius:6px}@media (width > 37.5rem){button img.icon,.option-button .option-letter,.category-badge img.icon{width:56px;height:56px}}button img.icon.icon-feedback,.option-button .option-letter.icon-feedback,.category-badge img.icon.icon-feedback{margin-inline-start:auto}.option-button .option-letter{display:flex;justify-content:center;align-items:center;background-color:var(--clr-light-gray);color:var(--clr-gray-navy)}button.option-button.selected.correct{outline-color:var(--clr-green)}button.option-button.selected.correct>span.option-letter{background-color:var(--clr-green)}button.option-button.selected.incorrect{outline-color:var(--clr-red)}button.option-button.selected.incorrect>span.option-letter{background-color:var(--clr-red)}img.icon.answer-icon{background-color:var(--clr-gray-navy)}img.icon.cat-html{background-color:var(--icon-bg__html)}img.icon.cat-css{background-color:var(--icon-bg__css)}img.icon.cat-javascript{background-color:var(--icon-bg__js)}img.icon.cat-accessibility{background-color:var(--icon-bg__a11y)}.progress-bar-wrapper{height:16px;display:flex;align-items:center;padding:var(--spacing-025);background-color:var(--progress-bar-bg);border-radius:999px}@media (width > 64rem){.progress-bar-wrapper{align-self:end}}.progress-bar{height:8px;background-color:var(--clr-purple);border-radius:104px;transition:width .3s ease-in-out}}@layer utilities{.visually-hidden:not(:focus):not(:active){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}