/* || Variables. */

:root {
  --color-bg: oklch(0.912 0.026 84.59);
  --color-fg: oklch(0.3257 0.0122 62.2);
  --color-selection: oklch(0.7096 0.06 59.7);

  --color-primary-colorful: oklch(0.5451 0.1298 44.65);
  --color-primary-colorless: oklch(0.9604 0.0297 85.56);

  --font-sans-serif: sans-serif;
  --font-serif: serif;
  --font-mono: monospace;
}

/* || CSS reset. */

/* Taken from: <https://www.joshwcomeau.com/css/custom-css-reset/>. */

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

*:not(dialog) {
  margin: 0;
}

/* Enable keyword animations. */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

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

/* Improve media defaults. */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* Inherit fonts for form controls. */
input,
button,
textarea,
select {
  font: inherit;
}

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

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

/* Create a root stacking context. */
main {
  isolation: isolate;
}

/* || Website styles. */

html,
body {
  background-color: var(--color-bg);
  color: var(--color-fg);
  font-size: 18px;
}

.site-title,
nav,
footer {
  background-color: var(--color-primary-colorful);
  color: var(--color-primary-colorless);

  padding: 8px;
  text-align: center;

  font-family: var(--font-sans-serif);
}

.site-title {
  font-size: 2rem;
  margin-bottom: 2px;
}

#content-container {
  min-height: 100dvh;
}

nav {
  font-size: 1.2rem;

  a,
  a:active,
  a:visited {
    color: var(--color-primary-colorless);
  }
}

main {
  max-width: 64ch;
  margin: auto;
  padding: 32px;

  ::selection {
    background: var(--color-selection);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-sans-serif);
    margin-top: 1.2rem;
    margin-bottom: 1rem;
  }

  h1,
  h2 {
    font-size: 2rem;
  }
  h3 {
    font-size: 1.8rem;
  }
  h4 {
    font-size: 1.4rem;
  }
  h5,
  h6 {
    font-size: 1.2rem;
  }

  .feed {
    h2 {
      margin-bottom: 0;

      & + span {
        font-family: var(--font-sans-serif);
        font-weight: bold;

        display: block;
        margin-bottom: 1.2rem;
      }
    }
  }

  p,
  span {
    font-family: var(--font-serif);
    margin-bottom: 1rem;
  }

  a,
  a:active,
  a:visited {
    color: var(--color-primary-colorful);
  }
}