/* @format */

/* CSS Rest from https://piccalil.li/blog/a-more-modern-css-reset/ */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

/* Begin my styles */

:root {
  --text-max-width: 60ch;

  /* Modern Font Stacks https://github.com/system-fonts/modern-font-stacks */
  --font-system: system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  --font-transitional: Charter, "Bitstream Charter", "Sitka Text", Cambria,
    serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";
  --font-old-style: "Iowan Old Style", "Palatino Linotype", "URW Palladio L",
    P052, serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";
  --font-humanist: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans",
    source-sans-pro, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  --font-geometric-humanist: Avenir, Montserrat, Corbel, "URW Gothic",
    source-sans-pro, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  --font-classical-humanist: Optima, Candara, "Noto Sans", source-sans-pro,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";
  --font-neo-grotesque: Inter, Roboto, "Helvetica Neue", "Arial Nova",
    "Nimbus Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  --font-monospace-slab-serif: "Nimbus Mono PS", "Courier New", monospace,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-monospace-code: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,
    Consolas, "DejaVu Sans Mono", monospace, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-industrial: Bahnschrift, "DIN Alternate", "Franklin Gothic Medium",
    "Nimbus Sans Narrow", sans-serif-condensed, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-rounded-sans: ui-rounded, "Hiragino Maru Gothic ProN", Quicksand,
    Comfortaa, Manjari, "Arial Rounded MT", "Arial Rounded MT Bold", Calibri,
    source-sans-pro, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  --font-slab-serif: Rockwell, "Rockwell Nova", "Roboto Slab", "DejaVu Serif",
    "Sitka Small", serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  --font-antique: Superclarendon, "Bookman Old Style", "URW Bookman",
    "URW Bookman L", "Georgia Pro", Georgia, serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-didone: Didot, "Bodoni MT", "Noto Serif Display", "URW Palladio L",
    P052, Sylfaen, serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  --font-handwritten: "Segoe Print", "Bradley Hand", Chilanka, TSCu_Comic,
    casual, cursive, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";
}

@media (prefers-color-scheme: dark) {
}

html {
  color-scheme: light dark;
  scroll-behavior: smooth;

  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

/* BEGIN: Respect the reader's preferences */
/* Inspired by: https://adrianroselli.com/2024/03/the-ultimate-ideal-bestest-base-font-size-that-everyone-is-keeping-a-secret-especially-chet.html */
body {
  font-size: 100%;
}

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

@media print {
  body {
    font-size: 8pt;
  }
}
/* END: Respect the reader's preferences */

body {
  font-family: var(--font-system);
  line-height: 1.6;

  margin: 0 auto;
  max-width: var(--text-max-width);
  padding: 4rem 1rem;
}

h1 {
  margin: 6rem 0;
}

hr {
  margin: 2rem 0;
  border: none;
  border-top: 1px solid currentColor;
}

h1,
h2,
h3 {
  line-height: 1.3;
}

code,
pre {
  font-family: var(--font-monospace-code);
}

pre.highlight {
  overflow-x: scroll;
}