:root {
    --s0: 1px;
    --s1: .25rem;
    --s2: .5rem;
    --s3: 1rem;
    --s4: 2rem;
    --s5: 4rem;

    --f1: 2.5em;
    --f2: 1.875em;
    --f3: 1.4625em;
    --f4: 1.3125em;
    --f5: 1.25em;
    --f6: 1em;
    --f7: .875em;

    --lh: 1.25;
    --lh-title: var(--lh);
    --lh-solid: 1;

    --c-black: hsl(0,0%, 7%);
    --c-near-black: hsl(0, 0%, 15%);
    --c-white: hsl(0, 0%, 100%);
    --c-gray: hsl(0, 0%, 75%);
    --c-light-gray: hsl(0, 0%, 95%);
    --c-dark-gray: hsl(0, 0%, 50%);
    --c-red: hsl(348, 83%, 47%);
    --c-light-red: hsl(348, 83%, 90%);
    --c-dark-red: hsl(348, 83%, 25%);
    --c-pink: hsl(351, 100%, 86%);
    --c-light-pink: hsl(351, 100%, 95%);
    --c-dark-pink: hsl(351, 70%, 60%);
    --c-purple: hsl(271, 76%, 65%);
    --c-dark-purple: hsl(271, 76%, 40%);
    --c-light-purple: hsl(271, 76%, 95%);
    --c-blue: hsl(210, 100%, 65%);
    --c-dark-blue: hsl(210, 100%, 40%);
    --c-light-blue: hsl(210, 100%, 90%);
    --c-green: hsl(157, 90%, 65%);
    --c-light-green: hsl(157, 100%, 90%);
    --c-dark-green: hsl(157, 100%, 35%);
    --c-yellow: hsl(51, 100%, 50%);
    --c-light-yellow: hsl(51, 100%, 90%);
    --c-dark-yellow: hsl(51, 100%, 30%);
    --c-orange: hsl(33, 100%, 50%);
    --c-light-orange: hsl(33, 100%, 90%);
    --c-dark-orange: hsl(33, 100%, 30%);

    --c-primary: var(--c-black);
    --c-background: var(--c-white);
    --c-foreground: var(--c-primary);
    --c-block-foreground: var(--c-primary);
    --c-block-background: var(--c-gray);
    --c-border: var(--c-gray);
    --c-link: var(--c-primary);
    --c-error: var(--c-red);

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: Consolas, Monaco, monospace;
}

/* Document */
*,*::before,*::after {
    box-sizing: border-box; margin: 0; padding: 0; line-height: inherit;
    font-family: inherit; font-size: 100%; color: inherit }
html {
    line-height: var(--lh); text-size-adjust: 100%;
    font-size: clamp(14px, 2vw, 16px); font-family: var(--font); font-weight: 400; font-style: normal;
    background: var(--c-background); color: var(--c-foreground) }
main { display: block }
template { display: none }
[hidden] { display: none }
h1 + *, h2 + *, h3 + *, h4 + *, h5 + *, h6 + *,
p, ol, ol ol, ul, ul ul, li, dl, table, blockquote, details, pre, form,
input:not([type="checkbox"],[type="radio"])  + *, textarea + *, select + *, fieldset + * {
    margin-block-start: var(--s3) }

/* Headings */
h1, h2, h3, h4, h5, h6 { margin-block-start: var(--s4); font-weight: 600 }
h1 + h2, h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-block-start: var(--s1) }
h1 { font-size: var(--f1) }
h2 { font-size: var(--f2) }
h3 { font-size: var(--f3) }
h4 { font-size: var(--f4) }
h5 { font-size: var(--f5) }
h6 { font-size: var(--f6) }

/* Typography */
ol, ul { padding-inline-start: var(--s4) }
dt, summary { font-weight: 700 }
dd { margin: 0 0 var(--s3) }
details { display: block }
summary { display: list-item; cursor: pointer }
a { color: var(--c-link); background-color: transparent }
code, kbd, samp, mark, time, pre {
    padding: 0 var(--s0);
    font-family: var(--font-mono); font-size: .925rem;
    color: var(--c-block-foreground); background: var(--c-block-background) }
pre { padding: var(--s1); white-space: pre-wrap }
hr {
    box-sizing: content-box; height: 1px; overflow: visible;
    background: var(--c-border); border-style: none }
abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted }
b,strong { font-weight: bolder }
small, sub, sup { font-size: var(--f7) }
sub, sup { line-height: 0; position: relative; vertical-align: baseline }
sub { bottom: calc(-1 * var(--s1)) }
sup { top: calc(-1 * var(--s1)) }
blockquote { padding: var(--s2); border-left: var(--s1) solid var(--c-border) }
table { width: 100%; border-collapse: collapse; text-align: left; vertical-align: top }
table caption { margin-bottom: var(--s1); font-style: italic }
th, td { padding: var(--s1); border-bottom: var(--s0) solid var(--c-border) }
th { font-weight: 700; border-width: 3px }
tfoot > tr > * { border-top-style: solid; border-top-width: var(--s0); border-bottom-width: 0 }

/* Media */
img, picture, video, audio, canvas, svg { display: block; max-width: 100% }
img { border-style: none }

/* Buttons */
button, .button, input[type='submit'], input[type='reset'], input[type='button'] {
    width: auto; appearance: button; overflow: visible; padding: var(--s2);
    text-decoration: none; color: var(--c-block-foreground);
    background: var(--c-block-background); border: 1px solid var(--c-border); cursor: pointer }
[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,button::-moz-focus-inner {
    border-style: none; padding: 0 }
[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring,button:-moz-focusring {
    outline: 1px dotted var(--c-block-foreground) }

/* Forms */
input, textarea, select, fieldset, .input  {
    display: block; width: 100%; padding: var(--s2); line-height: 1;
    color: var(--c-foreground); background: var(--c-background);
    border: var(--s0) solid var(--c-border) }
input:user-invalid, select:user-invalid, textarea:user-invalid {
    border: var(--s0) dashed var(--c-error) }
textarea { resize: vertical; overflow: auto; min-height: calc(var(--s5) * 2) }
[type="checkbox"],[type="radio"] { display: inline-block; width: auto }
[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button { height: auto }
[type="search"] { appearance: textfield; outline-offset:-2px }
[type="search"]::-webkit-search-decoration { appearance: none }
::-webkit-file-upload-button { appearance: button; font: inherit }
[readonly], [disabled] { opacity: .6 }
[disabled] { cursor: not-allowed }
form label  { display: inline-block }
form label + *, legend + * { margin-block-start: var(--s1) }
legend { font-weight: 700 }

/* Atoms - Display */
.wrap, .wrap-sm, .wrap-lg { width: 100%; margin-inline: auto; padding: var(--s2) }
.wrap { max-width: 960px }
.wrap-sm { max-width: 540px }
.wrap-lg { max-width: 1280px }
.dn { display: none }
.di { display: inline }
.dib { display: inline-block }
.db { display: block }
.o-100 { opacity: 1 }
.o-50 { opacity: .5 }
.o-0 { opacity: 0 }
.cf { clear: both; overflow: hidden }
.fl { float: left }
.fr { float: right }


/* Atoms - Flex */
.flex { display: flex }
.flex-auto { flex: 1 1 auto; min-width: 0; min-height: 0 }
.flex-none { flex: none }
.flex-col { flex-direction: column }
.flex-wrap { flex-wrap: wrap }
.flex-items-center { align-items: center }
.flex-content-spaced { justify-content: space-between }
.flex-content-centered { justify-content: center }

/* Atoms - Sizing */
.w-auto { width: auto }
.w-50 { width: 50% }
.w-100 { width: 100% }
.mw-100 { max-width: 100% }
.w3 { width: var(--s3) }
.w4 { width: var(--s4) }
.w5 { width: var(--s5) }
.h-auto { height: auto }
.h-100 { height: 100% }
.vh-100 { height: 100vh }
.min-vh-100 { min-height: 100vh }

/* Atoms - Spacing */
.center { margin-inline: auto }
.mt0 { margin-top: 0 }
.mt1 { margin-top: var(--s1) }
.mt2 { margin-top: var(--s2) }
.mt3 { margin-top: var(--s3) }
.mt4 { margin-top: var(--s4) }
.mb0 { margin-bottom: 0 }
.mb1 { margin-bottom: var(--s1) }
.mb2 { margin-bottom: var(--s2) }
.mb3 { margin-bottom: var(--s3) }
.mb4 { margin-bottom: var(--s4) }
.pa0 { padding: 0 }
.pa1 { padding: var(--s1) }
.pa2 { padding: var(--s2) }
.pa3 { padding: var(--s3) }
.pa4 { padding: var(--s4) }

/* Atoms - Text */
.f1 { font-size: var(--f1) }
.f2 { font-size: var(--f2) }
.f3 { font-size: var(--f3) }
.f4 { font-size: var(--f4) }
.f5 { font-size: var(--f5) }
.f6 { font-size: var(--f6) }
.f7 { font-size: var(--f7) }
.fw4 { font-weight: 400 }
.fw7 { font-weight: 700 }
.tl { text-align: left }
.tr { text-align: right }
.tc { text-align: center }
.tj { text-align: justify }
.ttu { text-transform: uppercase }
.ttn { text-transform: none }
.i { font-style: italic }

/* Atoms - Borders */
.ba { border: 1px solid var(--c-border) }
.bn { border: none }
.br { border-radius: var(--s1) }