@charset "UTF-8"; /* character set. don't worry about it. evidently shouldmust be absolutely first. */
@import url("_normalize.css"); /* a normalization css created by people who care about that. */

/* everything needs boxing. the default is to pad on the outside; this pads on the inside. */
*, *::before, *::after {
  box-sizing: border-box;
}

/* design tokens. aliases for future use so future use is more uniform. let's try it and see how it works... prolly better for larger efforts. but if you wanted simple you'd've used crayons. */
/* the '--' is required for custom attributes; the rest is all you. this is a 'come back to it' section i think. follow the steps and prune the tree if winds up unused. */
:root {
  /* colors - can be W3C words - v1: basic-basics and the original callback script */
  --prime-text: black;
  --prime-background: white;
  --prime-link: indigo;
  --prime-fade: lavender;

  --prime-font: system-ui, sans-serif;

  /* spacing/size */
  --flush: 0;
  --spacing-0: 0;
  --spacing-half: 0.25rem;
  --spacing-1: 0.5rem;
  --spacing-2: 1rem;
  --spacing-3: 1.5rem;
  --spacing-4: 2rem;

  --line-height-tight: 1.2;
  --line-height-base: 1.5;
  --line-height-wide: 1.75;
}

html {
  text-rendering: optimizeLegibility; /* we want smooth displays. this is my fault. */
  -webkit-font-smoothing: antialiased;    /* disables subpixel AA in WebKit */
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale; /* simpler AA in Firefox on macOS */
  color-scheme: light dark;
  scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: var(--spacing-2) 0 var(--spacing-2) 0; /* the padding is hypothetically for the nav bar */
    font-family: var(--prime-font, system-ui, sans-serif);
    color: var(--prime-text);
    background-color: var(--prime-background);
    line-height: var(--line-height-base);
}

p {
    margin-block-start: var(--flush);
    margin-block-end: var(--spacing-2);
    margin-inline: var(--flush); /* order-independent version of 'margin: 0 0 var(--spacing-3) 0;' */
}

a {
    color: var(--prime-link);
    text-decoration: none;
}

a:hover,
a:focus {
    text-decoration: underline;
}