:root {
  color-scheme: light dark;
  --blackish: #222;
  --whitish: #aaa; /* oklch(from #222 calc(1 - l) c h) is #adadad */
}

/* Background nonsense */

@media (prefers-color-scheme: light) {
  :root {
    background-image: url(tile-light.svg);
  }
}

@media (prefers-color-scheme: no-preference), (prefers-color-scheme: dark) {
  :root {
    background-image: url(tile-dark.svg);
  }
}

html {
  --background-width: 7px;
  --background-height: 7px;
  --dpr: 1;

  background-size: calc(var(--background-width) / var(--dpr))
    calc(var(--background-height) / var(--dpr));
}

@media (2dppx <= resolution < 3dppx) {
  html {
    --dpr: 2;
  }
}

@media (3dppx <= resolution) {
  html {
    --dpr: 3;
  }
}

/* Side-by-side things */

.side-by-side {
  container: side-by-side / inline-size;

  .side-by-side__inner-wrapper {
    display: grid;
  }
}

@container side-by-side (width >= 75ch) {
  .side-by-side .side-by-side__inner-wrapper {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: start;
    gap: 1ch;
  }
}

@container side-by-side (width < 75ch) {
  .side-by-side .side-by-side__inner-wrapper {
    grid-auto-flow: row;
  }
}

/* Newton windows */

.newton-window {
  max-width: 60ch;
  margin: 1rem auto;

  background: white;
  color: black;

  border: solid black;
  border-radius: 2px;

  & .newton-window__extra-border {
    padding-block: 0.5lh;
    padding-inline: 1ch;

    border: solid gray;

    color: light-dark(black, white);
    background: light-dark(white, #222);
  }
}

.newton-window--unfocused {
  border-width: 2px;

  > .newton-window__extra-border {
    border-width: 5px;
  }
}

.newton-window--focused {
  border-width: 4px;

  > .newton-window__extra-border {
    border-width: 3px;
  }
}

/* Everything else */

html {
  font: normal 1em/1.3 system-ui, ui-sans-serif, sans-serif;
  color: light-dark(var(--blackish), var(--whitish));
  padding-bottom: env(safe-area-inset-bottom, 2lh);
}

a:link {
  color: light-dark(#222, #ddd);
}

a:visited {
  color: light-dark(#222, #ddd);
}

p,
ul {
  margin-block: 1lh;
}

:is(p, ul):last-child {
  margin-block-end: 0;
}

h2:first-child {
  margin-block: 0;
}

.page-header {
  text-align: center;
  > :is(p, h1) {
    margin-block: 0;
    line-height: 1.1;
  }

  > p {
    font-size: smaller;
  }
}

.advertisement {
  text-align: center;
}