pages/styles/styles.css

:root {
  color-scheme: light dark;
  --hue: 0;
  --background: light-dark(hsl(var(--hue), 100%, 97%), hsl(var(--hue), 40%, 6.5%));
  /* used for badges ↓ */
  --background-alt: light-dark(hsl(var(--hue), 75%, 88%), hsl(var(--hue), 20%, 20%));
  --background-transparent: light-dark(hsla(var(--hue), 75%, 88%, 50%), hsla(var(--hue), 20%, 20%, 50%));
  --foreground: light-dark(hsl(var(--hue), 100%, 25%), hsl(var(--hue), 100%, 90%));
  /* Used for links ↓ */
  --foreground-alt: light-dark(hsl(var(--hue), 100%, 35%), hsl(var(--hue), 65%, 70%));

  --rounding: 16px;
  --rounding-big: calc(var(--rounding) * 2);
  --rounding-small: calc(var(--rounding) / 2);
  --rounding-verysmall: calc(var(--rounding) / 12);

  --spacing-base-val: 4px;
  --spacing: calc(var(--spacing-base-val) * 2);
  --spacing-large: calc(var(--spacing-base-val) * 4);
  --spacing-extralarge: calc(var(--spacing-base-val) * 8);
  --spacing-small: calc(var(--spacing-base-val) / 1.5);

  background-color: var(--background);
  background: linear-gradient(to top, rgb(85, 205, 252), rgb(179, 157, 233), rgb(247, 168, 184), rgb(246, 216, 221), rgb(255, 255, 255) 45%, rgb(255, 255, 255), rgb(255, 255, 255) 55%, rgb(246, 216, 221), rgb(247, 168, 184), rgb(179, 157, 233), rgb(85, 205, 252));
  background-size: cover;
  background-repeat: none;
  background-attachment: fixed;
  box-shadow: inset 0 0 0 100vw var(--background-transparent);
  color: var(--foreground);
  font-family: InterVariable, Inter, system-ui;
  font-feature-settings:
    'liga' 1,
    'calt' 1,
    'dlig' 1,
    'tnum' 1,
    'case' 1,
    'zero' 1,
    'ss01' 1,
    'ss02' 1;
  font-size: 1.2em;
  font-weight: 450;
  line-height: 1.55em;
}

@supports (font-variation-settings: normal) {
  :root {
    font-family: InterVariable, sans-serif;
  }
}

body {
  margin: 0px;
  padding: 0px;
}

.wrapper {
  padding-inline: var(--spacing);
}

div.card {
  background-color: var(--background);
  margin-inline: auto;
  margin-block: var(--spacing);
  width: max(fit-content, 800px);
  max-width: 800px;
  padding-block: var(--spacing-large);
  padding-inline: var(--spacing-extralarge);
  border-radius: var(--rounding);
}

@media (prefers-color-scheme: light) {
  div.card {
    /* To make the cards stand out better against the background. Effect is *very* slight */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
  }
}

details,
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-block: var(--spacing-large);
}

ul {
  /* Whoops. */
  padding-left: calc(var(--spacing-large) + 2px);
}

hr {
  border-color: var(--foreground);
  margin-block: var(--spacing);
}

a:hover:not(:has(img)),
a:visited:hover:not(:has(img)),
a:active:not(:has(img)),
a:visited:active:not(:has(img)) {
  box-sizing: border-box;
  background-color: var(--foreground);
  box-shadow: 0px 0px 0px 5px var(--foreground);
  color: var(--background);
}

a,
a:visited {
  color: var(--foreground-alt);
  border-radius: var(--rounding-verysmall);
  transition: 0.2s;
}


code {
  font-size: inherit;
  font-family: monospace;
  background-color: var(--background-alt);
  padding-block: var(--spacing-small);
  padding-inline: var(--spacing);
}

span.badge {
  padding-inline: var(--spacing);
  padding-block: var(--spacing-small);
  background-color: var(--background-alt);
  border-radius: var(--rounding-big);
}

@media (pointer: coarse),
(hover: none) {
  [title] {
    position: relative;
    display: inline-flex;
    justify-content: center;
  }

  [title]:focus::after,
  [title]:hover::after {
    content: attr(title);
    position: absolute;
    top: 120%;
    color: var(--foreground);
    background-color: var(--background-alt);
    width: max(100%, 50vw);
    padding: var(--spacing);
    z-index: 10;
    border-radius: var(--rounding);
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
    animation: 0.3s slidein;
  }
}

@keyframes slidein {
  from {
    opacity: 0;
    top: 100%;
  }

  to {
    opacity: 1;
    top: 120;
  }
}

div.button-wrapper {
  image-rendering: pixelated;
}