:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;--color-bg-light:hsl(0,0%,100%);--color-bg:hsl(0,0%,95%);--color-bg-dark:hsl(0,0%,90%);--color-border:hsl(0,0%,80%);--color-text:hsl(0,0%,5%);--color-text-muted:hsl(0,0%,30%);--color-primary-dark:hsl(1,78%,36%);--color-secondary-light:hsl(1,66%,48%);--color-success:#2ecc71;--color-warning:#f1c40f;--color-danger:#e74c3c;--color-info:#3498db;--box-shadow:0px 2px 2px hsla(0,0%,0%,0.07),0px 4px 4px hsla(0,0%,0%,0.15);--border-radius-base:8px;--border-radius-sm:var(--border-radius-base);--border-radius-md:calc(var(--border-radius-base) * 2);--border-radius-lg:calc(var(--border-radius-base) * 2 * 2);--border-radius-xl:calc(var(--border-radius-base) * 2 * 3);--border-radius-full:9999px;--border-width:1px;--border-width-large:2px;--font-size-base:1rem;--font-scale:1.25;--font-size-xs:calc(var(--font-size-base) / var(--font-scale) / var(--font-scale));--font-size-sm:calc(var(--font-size-base) / var(--font-scale));--font-size-md:var(--font-size-base);--font-size-lg:calc(var(--font-size-base) * var(--font-scale));--font-size-xl:calc(var(--font-size-base) * var(--font-scale) * var(--font-scale));--font-size-xxl:calc(var(--font-size-base) * var(--font-scale) * var(--font-scale) * var(--font-scale));--base-spacing:4px;--spacing-xxs:calc(var(--base-spacing) * 0.5);--spacing-xs:calc(var(--base-spacing) * 1);--spacing-sm:calc(var(--base-spacing) * 2);--spacing-md:calc(var(--base-spacing) * 4);--spacing-lg:calc(var(--base-spacing) * 8);--spacing-xl:calc(var(--base-spacing) * 16);--spacing-xxl:calc(var(--base-spacing) * 32)}body.dark{--color-bg-dark:hsl(0,0%,0%);--color-bg:hsl(0,0%,5%);--color-bg-light:hsl(0,0%,10%);--color-border:hsl(0,0%,20%);--color-text:hsl(0,0%,95%);--color-text-muted:hsl(0,0%,70%);--color-primary-dark:hsl(0,0%,95%);--color-secondary-light:hsl(0,0%,70%)}#root,body.dark{background-color:var(--color-bg-light)}#root{width:100%;min-height:100vh}h1,h2,h3{color:var(--color-text)}p{color:var(--color-text-muted)}.page-headline,.section-headline{text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@media (prefers-reduced-motion:no-preference){a:nth-of-type(2) .logo{animation:logo-spin 20s linear infinite}}.card{padding:2em}.read-the-docs{color:#888}