.subject.hidden{display:none}section.hidden{display:none}.visually-hidden{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}.background{position:fixed;top:0;left:0;width:100%;height:100vh;filter:brightness(.96);z-index:-1}.background .bg-img{width:100%;height:100vh;object-fit:cover}@media only screen and (max-width: 56.25em){.background .bg-img{width:auto;height:auto;object-fit:none}}@media only screen and (max-width: 37.5em){.background .bg-img{width:100%;height:100vh;object-fit:cover}}.btn{font-family:inherit;font-size:2.8rem;font-weight:500;color:inherit;width:100%;min-height:10rem;height:auto;padding:2.4rem;text-align:left;border-radius:2.4rem;box-shadow:var(--shadow);border:3px solid transparent;cursor:pointer}@media only screen and (max-width: 56.25em){.btn{min-height:8.8rem;padding:1.6rem}}@media only screen and (max-width: 37.5em){.btn{font-size:1.8rem;min-height:7.2rem;border-radius:1.5rem}}.btn:disabled{pointer-events:none;cursor:default;opacity:.8}.btn.btn-active{border-color:var(--color-purple);outline:none}.btn.btn-active .option-letter{background-color:var(--color-purple);color:var(--dark-text1)}.btn.btn-light{background:var(--background-btn);color:var(--text-color);display:flex;align-items:center;gap:3.2rem;transition:all .1s ease-in-out}@media only screen and (max-width: 37.5em){.btn.btn-light{gap:1.6rem}}.btn.btn-light:hover,.btn.btn-light:focus{border-color:var(--color-purple);outline:none}.btn.btn-light .answer-text{flex:1;white-space:normal;word-break:break-word}.btn-purple{height:9rem;letter-spacing:.5px;background-color:var(--color-purple);color:var(--dark-text1);text-align:center;margin-top:3.2rem;transition:all .05s ease-in-out}.btn-purple.btn-inactive{background-color:#cf8af9;cursor:not-allowed;outline:none}.btn-purple:focus{outline:3px solid var(--text-color2);offset:3px}@media only screen and (max-width: 56.25em){.btn-purple{background-color:var(--color-purple)}}@media only screen and (max-width: 37.5em){.btn-purple{height:5.6rem;margin-top:1.6rem}}.container.header{display:flex;justify-content:space-between;align-items:center;margin-top:10rem}@media only screen and (max-width: 56.25em){.container.header{margin-top:5rem}}@media only screen and (max-width: 37.5em){.container.header{margin-top:2rem}}.container.header .subject.hidden{display:block;visibility:hidden;opacity:0}.subject{display:flex;align-items:center;gap:2.4rem}@media only screen and (max-width: 37.5em){.subject{gap:1.8rem}}.subject .subject-text{font-size:2.8rem;font-weight:500}@media only screen and (max-width: 37.5em){.subject .subject-text{font-size:1.8rem}}.icon-wrapper{width:5.6rem;height:5.6rem;border-radius:1rem;display:flex;justify-content:center;align-items:center}@media only screen and (max-width: 37.5em){.icon-wrapper{width:4rem;height:4rem}}.icon-wrapper img{width:4rem;height:auto}@media only screen and (max-width: 37.5em){.icon-wrapper img{width:2.8rem;height:auto}}.icon-wrapper__html{background-color:var(--html-bg)}.icon-wrapper__css{background-color:var(--css-bg)}.icon-wrapper__javascript{background-color:var(--js-bg)}.icon-wrapper__accessibility{background-color:var(--access-bg)}.toggle{display:grid;grid-template-columns:1fr 4.8rem 1fr;align-items:center;gap:1.6rem;border:none;margin:0}@media only screen and (max-width: 37.5em){.toggle{grid-template-columns:1fr 3.2rem 1fr;gap:.8rem}}.toggle label{display:flex;align-items:center;justify-content:center}.toggle label[for=light]{line-height:2.4rem}.toggle__icon{width:2.4rem;height:2.4rem}@media only screen and (max-width: 37.5em){.toggle__icon{width:1.6rem;height:1.6rem}}.toggle__wrapper{position:relative;height:2.8rem}@media only screen and (max-width: 37.5em){.toggle__wrapper{height:2rem}}.toggle input[type=radio]{opacity:0;width:2rem;height:2rem;position:absolute;top:4px}@media only screen and (max-width: 37.5em){.toggle input[type=radio]{width:1.2rem;height:1.2rem}}.toggle input[type=radio]#light{left:3px}.toggle input[type=radio]#dark{right:3px}.toggle input[type=radio]:focus~.toggle__button{outline:2px solid white;outline-offset:1px}.toggle__background{display:block;width:100%;height:100%;position:absolute;top:0;border-radius:2rem;background:var(--color-purple);pointer-events:none}.toggle__button{position:absolute;top:.4rem;left:.4rem;right:100%;width:2rem;height:2rem;border-radius:50%;background-color:var(--dark-text1);transition:all .15s ease-in-out}@media only screen and (max-width: 37.5em){.toggle__button{left:.3rem;width:1.2rem;height:1.2rem;top:.4rem}}.toggle #dark:checked~.toggle__button{left:calc(100% - 2.4rem);right:.4rem}@media only screen and (max-width: 37.5em){.toggle #dark:checked~.toggle__button{left:calc(100% - 1.5rem)}}body.light .dark-picture,body.light .toggle__icon--light,body.dark .light-picture,body.dark .toggle__icon--dark{display:none}*{padding:0;margin:0;box-sizing:inherit}html{font-size:62.5%;box-sizing:border-box}body{font-family:Rubik,sans-serif;font-size:2.4rem;min-height:100vh;background:var(--background);color:var(--text-color)}:root{--light-bg: #ecf0f9;--light-text1: #303d50;--light-text2: #626c7f;--dark-bg: #334154;--dark-bg2: rgb(59, 77, 102);--dark-text1: #ffffff;--dark-text2: #abc1e1;--color-purple: hsl(277, 91%, 56%);--color-green: hsl(151, 68%, 52%);--color-red: hsl(0, 82%, 63%);--html-bg: #fff5ed;--css-bg: #e0fdef;--js-bg: #ebf0ff;--access-bg: #f6e7ff;--shadow-color: rgba(220, 228, 249, .9);--grey-light: #f4f6fa;--color-shadow-light: rgba(220, 228, 249, .9);--color-shadow-dark: rgba(52, 68, 93, .9)}@media (prefers-color-scheme: dark){:root{--background: var(--dark-bg);--background-btn: var(--dark-text2);--text-color: var(--dark-text1);--text-color2: var(--dark-text2);--icon-color: var(--dark-text1);--progress-color: var(--dark-bg2);--danger-color: var(--grey-light);--shadow: 0 1rem 2rem var(--color-shadow-dark)}}body.light{--background: var(--light-bg);--background-btn: var(--dark-text1);--text-color: var(--light-text1);--text-color2: var(--light-text2);--icon-color: var(--light-text2);--progress-color: var(--dark-text1);--danger-color: var(--color-red);--shadow: 0 1rem 2rem var(--color-shadow-light)}body.dark{--background: var(--dark-bg);--background-btn: var(--dark-bg2);--text-color: var(--dark-text1);--text-color2: var(--dark-text2);--icon-color: var(--dark-text1);--progress-color: var(--dark-bg2);--danger-color: var(--grey-light);--shadow: 0 1rem 2rem var(--color-shadow-dark)}.container{width:90%;max-width:115rem;margin:0 auto 10rem}@media only screen and (max-width: 56.25em){.container{width:85%;max-width:64rem;margin-bottom:5rem}}@media only screen and (max-width: 37.5em){.container{width:90%}}.row{display:grid;grid-template-columns:repeat(2,1fr);gap:12rem}@media only screen and (max-width: 75em){.row{gap:6.4rem}}@media only screen and (max-width: 56.25em){.row{display:flex;flex-direction:column}}.col-1-of-2{grid-column:1/2}.col-2-of-2{grid-column:2/3}.options-list{display:flex;flex-direction:column;max-width:56rem;gap:1.6rem}.options-list li{list-style:none}@media only screen and (max-width: 56.25em){.options-list{gap:2.4rem;max-width:64rem}}@media only screen and (max-width: 37.5em){.options-list{gap:1.6rem}}.heading-primary{font-size:6.4rem;font-weight:300;margin-bottom:4.8rem}@media only screen and (max-width: 56.25em){.heading-primary{margin-bottom:1.6rem}}@media only screen and (max-width: 37.5em){.heading-primary{font-size:4rem}}.heading-primary span{display:block;font-weight:500}.heading-secondary{font-size:3.6rem;font-weight:500;margin-top:2.4rem}@media only screen and (max-width: 37.5em){.heading-secondary{font-size:2rem}}.italic-text{font-size:2rem;color:var(--text-color2);font-style:italic;line-height:1.5}@media only screen and (max-width: 37.5em){.italic-text{font-size:1.4rem}}#progress[value]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--progress-color);border-radius:10px;padding:4px;border:none;width:100%;height:1.6rem;margin-top:18rem}@media only screen and (max-width: 56.25em){#progress[value]{margin-top:4rem;margin-bottom:-2.4rem}}@media only screen and (max-width: 37.5em){#progress[value]{margin-top:2.4rem}}#progress[value]::-webkit-progress-bar{background-color:var(--progress-color);border-radius:10px}#progress[value]::-webkit-progress-value{background-color:var(--color-purple);border-radius:6px}#progress[value]::-moz-progress-bar{background-color:var(--color-purple);border-radius:6px}.btn .option-letter{width:5.6rem;height:5.6rem;background-color:var(--grey-light);color:var(--light-text2);display:flex;justify-content:center;align-items:center;border-radius:8px}@media only screen and (max-width: 37.5em){.btn .option-letter{width:4rem;height:4rem}}.btn:hover .option-letter,.btn:focus .option-letter{background-color:var(--color-purple);color:var(--dark-text1)}.result-icon{margin-left:auto;width:4rem;height:4rem}@media only screen and (max-width: 37.5em){.result-icon{width:3.2rem;height:3.2rem}}.btn-light.correct{border:3px solid var(--color-green);pointer-events:none}.btn-light.correct .option-letter{background-color:var(--color-green);color:var(--dark-text1)}.btn-light.incorrect{border:3px solid var(--color-red);pointer-events:none}.btn-light.incorrect .option-letter{background-color:var(--color-red);color:var(--dark-text1)}.danger-text{color:var(--danger-color);margin-top:3.2rem;display:flex;align-items:center;justify-content:center;gap:8px}@media only screen and (max-width: 37.5em){.danger-text{margin-top:1.6rem}}.result-container{background-color:var(--background-btn);padding:4.8rem;border-radius:2.4rem;text-align:center}@media only screen and (max-width: 37.5em){.result-container{border-radius:1.5rem;padding:3.2rem}}.result-container .subject{margin-bottom:4rem;display:flex;justify-content:center}.result-descrip{width:100%}.result-descrip .score{font-size:14.4rem;font-weight:500;line-height:1;margin-top:4rem}@media only screen and (max-width: 37.5em){.result-descrip .score{font-size:8.8rem}}.result-descrip .description{display:block;color:var(--text-color2);margin-top:1.6rem;font-size:2.4rem;font-weight:400}@media only screen and (max-width: 56.25em){.result-descrip .description{font-weight:500}}@media only screen and (max-width: 37.5em){.result-descrip .description{font-size:1.8rem}}