elladunbar.com/full/style.css

/* https://www.joshwcomeau.com/css/custom-css-reset/ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
  hyphens: auto;
}

p {
  text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}


/* our stuff */
:root {
  /* auto light/dark based on user choice */
  color-scheme: light dark;
}

.drop-shadow {
  box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.2), 0 0.75rem 2.5rem 0 rgba(0, 0, 0, 0.19);
}

/* oklch site: https://oklch.com/ */
/* color filters: https://angel-rs.github.io/css-color-filter-generator/ */
/* Dead Orbit */
html:has(option[value="do"]:checked) {
  --color-background: light-dark(oklch(0.8 0 0), oklch(0.45 0 0));
  --color-header-footer: light-dark(oklch(0.55 0 0), oklch(0.25 0 0));
  --color-main: light-dark(oklch(0.93 0 0), oklch(0.175 0 0));
  --color-text: light-dark(oklch(0 0 0), oklch(0.9 0 0));

  --svg-brightness-1: 0%;
  --svg-saturate-1: 100%;
  --svg-invert: 0%;
  --svg-sepia: 0%;
  --svg-saturate-2: 100%;
  --svg-hue-rotate: 0deg;
  --svg-brightness-2: 0%;
  --svg-contrast: 100%;

  @media (prefers-color-scheme: dark) {
    --svg-brightness-1: 0%;
    --svg-saturate-1: 100%;
    --svg-invert: 94%;
    --svg-sepia: 0%;
    --svg-saturate-2: 34%;
    --svg-hue-rotate: 274deg;
    --svg-brightness-2: 90%;
    --svg-contrast: 107%;
  }
}

/* Future War Cult */
html:has(option[value="fwc"]:checked) {
  --color-background: light-dark(oklch(0.4088 0.1303 281.27), oklch(0.1847 0.0503 286.27));
  --color-header-footer: light-dark(oklch(0.98 0 0), oklch(0.7314 0.0725 91.4));
  --color-main: light-dark(oklch(0.895 0.0916 88.17), oklch(0.3589 0.1438 281.27));
  --color-text: light-dark(oklch(0.4274 0.1456 21.51), oklch(0.98 0 0));

  --svg-brightness-1: 0%;
  --svg-saturate-1: 100%;
  --svg-invert: 21%;
  --svg-sepia: 37%;
  --svg-saturate-2: 3939%;
  --svg-hue-rotate: 333deg;
  --svg-brightness-2: 75%;
  --svg-contrast: 97%;

  @media (prefers-color-scheme: dark) {
    --svg-brightness-1: 0%;
    --svg-saturate-1: 100%;
    --svg-invert: 94%;
    --svg-sepia: 97%;
    --svg-saturate-2: 3762%;
    --svg-hue-rotate: 183deg;
    --svg-brightness-2: 123%;
    --svg-contrast: 94%;
  }
}

/* New Monarchy */
html:has(option[value="nm"]:checked) {
  --color-background: light-dark(oklch(0.98 0 0), oklch(0.2665 0.0841 29.27));
  --color-header-footer: light-dark(oklch(0.4531 0.1712 29.27), oklch(0.3 0 0));
  --color-main: light-dark(oklch(0.9 0 0), oklch(0.2299 0.05 29.27));
  --color-text: light-dark(oklch(0.3 0 0), oklch(0.9 0 0));

  --svg-brightness-1: 0%;
  --svg-saturate-1: 100%;
  --svg-invert: 16%;
  --svg-sepia: 0%;
  --svg-saturate-2: 0%;
  --svg-hue-rotate: 268deg;
  --svg-brightness-2: 104%;
  --svg-contrast: 95%;

  @media (prefers-color-scheme: dark) {
    --svg-brightness-1: 0%;
    --svg-saturate-1: 100%;
    --svg-invert: 94%;
    --svg-sepia: 0%;
    --svg-saturate-2: 34%;
    --svg-hue-rotate: 274deg;
    --svg-brightness-2: 90%;
    --svg-contrast: 107%;
  }
}

/* Vault of Glass */
html:has(option[value="vog"]:checked) {
  --color-background: light-dark(oklch(0.93 0 0), oklch(0.3224 0.0392 145.18));
  --color-header-footer: light-dark(oklch(0.8742 0.0828 224.95), oklch(0.4306 0.0922 55.84));
  --color-main: light-dark(oklch(1 0 0), oklch(0.2091 0.0107 232.65));
  --color-text: light-dark(oklch(0.45 0 0), oklch(0.9555 0.0219 224.95));

  --svg-brightness-1: 0%;
  --svg-saturate-1: 100%;
  --svg-invert: 33%;
  --svg-sepia: 6%;
  --svg-saturate-2: 0%;
  --svg-hue-rotate: 174deg;
  --svg-brightness-2: 94%;
  --svg-contrast: 88%;

  @media (prefers-color-scheme: dark) {
    --svg-brightness-1: 0%;
    --svg-saturate-1: 100%;
    --svg-invert: 89%;
    --svg-sepia: 9%;
    --svg-saturate-2: 467%;
    --svg-hue-rotate: 175deg;
    --svg-brightness-2: 106%;
    --svg-contrast: 98%;
  }
}


/* https://smolweb.org/subset.html */
/* structural */
body {
  background: var(--color-background);

  margin: 0 auto;
  max-width: max(768px, 80ch);

  .drop-shadow {
    display: flex;
    flex-direction: column;
    min-height: 100lvh;
  }
}

html {
  font-family: "SF Pro Display",
    -apple-system,
    system-ui,
    BlinkMacSystemFont,
    "Inter",
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  /* respect user font size */
  font-size: 100%;
  font-weight: 400;
  color: var(--color-text);
}


/* semantic */
header {
  background: var(--color-header-footer);
  text-wrap: wrap;

  display: flex;
  flex-wrap: wrap;
  align-items: center;

  hr {
    flex: 0 0 100%;
  }

  img {
    margin: 0.5rem 0.5rem 0 0.5rem;
    height: 4rem;
    filter: brightness(var(--svg-brightness-1)) saturate(var(--svg-saturate-1)) invert(var(--svg-invert)) sepia(var(--svg-sepia)) saturate(var(--svg-saturate-2)) hue-rotate(var(--svg-hue-rotate)) brightness(var(--svg-brightness-2)) contrast(var(--svg-contrast));
  }

  strong {
    margin: 0 auto 0 0;
    font-size: 1.6rem;
  }

  label {
    margin: 0.5rem 0.5rem 0;
    font-size: 0.8rem;
  }

  nav {
    margin: 0.5rem;
  }
}

footer {
  background: var(--color-header-footer);
  font-size: 0.8rem;
  text-wrap: wrap;

  p {
    margin: 0.5rem;
  }
}

main {
  background: var(--color-main);

  padding: 1rem;

  flex: 1;
}


/* textual */
h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.6rem;
}

h3 {
  font-size: 1.2rem;
}

p {
  margin: 1rem 0;
}

/* hypertextual */
/* listing */
/* forms */
/* basic table */
/* image */
/* presentation */
/* metainformation and linking */