:root {
  --primary-font: Helvitca, sans-serif;

  --color-primary: black;
  --color-secondary: white;

  --mascott: '🎱';

  --measure: 60ch;

  --ratio: 1.33;
  --s-xxxxs: calc(var(--s-xxxs) / var(--ratio));
  --s-xxxs: calc(var(--s-xxs) / var(--ratio));
  --s-xxs: calc(var(--s-xs) / var(--ratio));
  --s-xs: calc(var(--s-s) / var(--ratio));
  --s-s: calc(var(--s-m) / var(--ratio));
  --s-m: 1rem;
  --s-l: calc(var(--s-m) * var(--ratio));
  --s-xl: calc(var(--s-l) * var(--ratio));
  --s-xxl: calc(var(--s-xl) * var(--ratio));
  --s-xxxl: calc(var(--s-xxl) * var(--ratio));
  --s-xxxxl: calc(var(--s-xxxl) * var(--ratio));

}
/* typography */ 
:root {
  font-size: calc(var(--s-m) + 0.5vw);
}
/* color */
:root {
  @media (prefers-color-scheme: dark) {
    filter: invert(100%);
  }
}
/* layout */
* {
  max-inline-size: var(--measure);
}
html, body, div, header, nav, main, footer {
  max-inline-size: none;
}

h1 {
  font-size: var(--s-xxxl);
}
h2 {
  font-size: var(--s-xxl);
}
h3 {
  font-size: var(--s-xl);
}
h4 {
  font-size: var(--s-l);
}
h5 {
  font-size: var(--s-m);
}
h6 {
  font-size: var(--s-s);
}
h7 {
  font-size: var(--s-xs);
}

h1,h2,h3,h4,h5,h6,h7 {
  inline-size: fit-content;
}