@import url('https://fonts.googleapis.com/css2?family=Alan+Sans:wght@300..900&family=Barlow:wght@600;700&family=Rubik+Doodle+Shadow&family=Rubik:wght@800&display=swap');

 /* ===== DESIGN TOKENS ===== */
 :root {
   --ratio: 1.5;
   --s-5: calc(var(--s-4) / var(--ratio));
   --s-4: calc(var(--s-3) / var(--ratio));
   --s-3: calc(var(--s-2) / var(--ratio));
   --s-2: calc(var(--s-1) / var(--ratio));
   --s-1: calc(var(--s0) / var(--ratio));
   --s0: 1rem;
   --s1: calc(var(--s0) * var(--ratio));
   --s2: calc(var(--s1) * var(--ratio));
   --s3: calc(var(--s2) * var(--ratio));
   --s4: calc(var(--s3) * var(--ratio));
   --s5: calc(var(--s4) * var(--ratio));
   --measure: 60ch;

   font-size: calc(1rem + 0.5vw);
   max-width: 91vw;
   margin-inline: auto;
   color-scheme: light dark;
 }

 /* ===== THEME ===== */
 :root {
   --text-light: #222;
   --background-light: #FFF;
   --button-background-light: oklch(0.5737 0.1797 293.97);
   --button-foreground: white;

   /* Nord */
   /* --text-dark: #D8DEE9;
   --background-dark: #3B4252;
   --button-background-dark: #B48EAD; */


   /* Dracula */
   --text-dark: oklch(0.9965 0.0017 247.84);
   --background-dark: rgb(65, 69, 88);
   --button-background-dark: oklch(0.6775 0.1815 288.17);
 }

 /* ===== BASE STYLES ===== */
 body {
   color: light-dark(var(--text-light), var(--text-dark));
   background-color: light-dark(var(--background-light), var(--background-dark));
 }

 body * {
   color: inherit;
 }

 /* ===== TYPOGRAPHY ===== */
 h1,
 .dot {
   --font-size: var(--s3);
   font-size: var(--font-size);
   font-family: "Rubik Doodle Shadow", system-ui;
   font-weight: 400;
   font-style: normal;

   @media (prefers-color-scheme: dark) {
     font-family: "Rubik", sans-serif;
     font-optical-sizing: auto;
     font-weight: 800;
     font-style: normal;
     text-transform: uppercase;
   }
 }

 .dot {
   --font-size: var(--s1);
 }

 h1,
 p {
   margin-block: 0;
 }

 a {
   color: inherit;
 }

 .barlow-bold {
   --font-weight: 700;
   font-family: "Barlow", sans-serif;
   font-weight: var(--font-weight);
   font-style: normal;

   @media (prefers-color-scheme: dark) {
     --font-weight: 600;
   }
 }

 /* ===== COMPONENTS ===== */
 .center {
   --max-inline-size: inherit;
   box-sizing: content-box;
   margin-inline: auto;
   text-align: center;
   max-inline-size: var(--max-inline-size);
   display: flex;
   flex-direction: column;
   align-items: center;
 }

 .center.main {
   --max-inline-size: 120ch;
 }

 .center.attributes {
   --max-inline-size: 47ch;
   display: block;
 }

 .center.callout {
   --max-inline-size: 45ch;
 }

 .stack {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
 }

 .stack>* {
   margin-block: 0;
 }

 .stack>*+* {
   margin-block-start: var(--space, 1.5rem);
 }

 .box {
   --padding: inherit;
   padding: var(--padding);
   outline: var(--border-thin) solid transparent;
   outline-offset: calc(var(--border-thin) * -1);
 }

 .box.attributes {
   --padding: var(--s-5);
 }

 .box.callout {
   --padding: var(--s0);
   border: var(--s-3) solid;
 }

 .switcher {
   --text-light: #333;
   --font-weight: 800;

   font-family: "Alan Sans", sans-serif;
   font-optical-sizing: auto;
   font-weight: var(--font-weight);
   font-style: normal;
   font-size: var(--s1);
   color: var(--text-light);
   align-items: baseline;
   display: flex;
   flex-wrap: wrap;
   gap: var(--s-5);

   @media (prefers-color-scheme: dark) {
     --font-weight: 600;
     color: var(--text-dark);
   }
 }

 .switcher>* {
   flex-grow: 1;
   flex-basis: calc((20ch - 100%) * 999);
 }

 .switcher> :nth-last-child(n+ NaN),
 .switcher> :nth-last-child(n+ NaN)~* {
   flex-basis: 100%;
 }

 /* ===== INTERACTIVE ===== */
 .button {
   display: inline-block;
   padding: 1rem 1.5rem 1.1rem 1.5rem;
   transition: background-color 150ms ease, color 150ms ease;
   position: relative;
   font-size: var(--s0);
 }

 .button::after {
   content: "";
   position: absolute;
   inset: 0.3rem;
   border-radius: inherit;
   border: 0.15rem solid #ffffff;
   opacity: 0;
   transition: opacity 150ms ease;
   pointer-events: none;
 }

 .button:hover {
   background-color: light-dark(var(--button-background-light), var(--button-background-dark));
   color: var(--button-foreground);
 }

 .button:hover::after {
   opacity: 1;
 }

 /* ===== ICONS ===== */
 .icon {
   width: 0.75em;
   width: 1cap;
   height: 0.75em;
   height: 1cap;
 }

 .with-icon {
   display: inline-flex;
   align-items: baseline;
 }

 .with-icon .icon {
   margin-inline-start: 0.5rem;
 }

 /* ===== PAGE LAYOUT ===== */
 main {
   display: flex;
   flex-direction: column;
   min-block-size: calc(100dvh - 1rem);
   padding: 0;
 }

 main>* {
   margin-block: 1rem;
 }

 main> :first-child:not(div) {
   margin-block-start: 0;
 }

 main> :last-child:not(div) {
   margin-block-end: 0;
 }

 main>div {
   margin-block: auto;
 }