:root{--background-color:#F4F6FA;--text-color:#313E51;--text-color-secondary:#626C7F;--surface-color:#FFFFFF;--background-image: url(/images/pattern-background-mobile-light.svg)}@media(min-width:768px){:root{--background-image: url(/images/pattern-background-tablet-light.svg)}}@media(min-width:1024px){:root{--background-image: url(/images/pattern-background-desktop-light.svg)}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Rubik,sans-serif;background:var(--background-color) var(--background-image) left top/auto no-repeat;color:var(--text-color);min-height:100vh;padding:0 1rem;margin-top:6rem}@media(min-width:1024px){body{padding:5.25rem 9rem;margin-inline:auto}}body.dark{--background-color:#313E51;--text-color:#F4F6FA;--text-color-secondary:#ABC1E1;--surface-color:#3B4D66;--background-image: url(/images/pattern-background-mobile-dark.svg)}@media(min-width:768px){body.dark{--background-image: url(/images/pattern-background-tablet-dark.svg)}}@media(min-width:1024px){body.dark{--background-image: url(/images/pattern-background-desktop-dark.svg)}}.page-container{width:100%;display:flex;flex-direction:column;gap:1rem}@media(min-width:1024px){.page-container{flex-direction:row;justify-content:center}}.visually-hidden{border:0;padding:0;margin:-1px;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);position:absolute;white-space:nowrap}@media(min-width:1024px){section{width:50%}}.small{font-size:.875rem;color:var(--text-color-secondary)}@media(min-width:768px){.small{font-size:1.25rem}}.medium{font-size:1.25rem;color:var(--text-color)}@media(min-width:768px){.medium{font-size:2.25rem}}.big{font-size:2.5rem;font-weight:300}.big strong{font-weight:500}@media(min-width:768px){.big{font-size:4rem}}.italic{font-style:italic}.html{background-color:#fff5ed}.css{background-color:#e0fdef}.javascript{background-color:#edf1f9}.accessibility{background-color:#f6e7ff}.subject-button{padding:1rem;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:1rem;font-size:1.125rem;font-weight:500;background-color:var(--surface-color);border:none;border-radius:1.5rem;color:inherit}.subject-button:hover{outline:.2rem #A729F5 solid}@media(min-width:768px){.subject-button{font-size:1.75rem;gap:2rem}}.box{display:flex;padding:.25rem;width:2.5rem;height:2.5rem;border-radius:.375rem;font-size:1.125rem}@media(min-width:768px){.box{width:3.5rem;height:3.5rem;font-size:1.75rem}}