:root {
  --font-body: 'Helvetica Now', sans-serif;
  --font-code: 'Inconsolata', monospace;
  --font-heading: 'Playfair Display', serif;
  --font-quote: 'Lora', serif;

  --accent: #2b87ff;
  --black: #1a1a1b;
  --white: #fdfcfb;

  --background: var(--white);
  --foreground: var(--black);
  --grey: rgb(from var(--foreground) r g b / 0.1);

  @media (prefers-color-scheme: dark) {
    --background: var(--black);
    --foreground: var(--white);
  }
}

@font-face {
  font-display: swap;
  font-family: 'Playfair Display';
  font-style: normal;
  src: url('/fonts/PlayfairDisplay.woff') format('woff');
}

@font-face {
  font-display: swap;
  font-family: 'Helvetica Now';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/HelveticaNow.woff') format('woff');
}

@font-face {
  font-display: swap;
  font-family: 'Helvetica Now';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/HelveticaNowBold.woff') format('woff');
}

@font-face {
  font-display: swap;
  font-family: 'Lora';
  font-style: normal;
  src: url('/fonts/Lora.woff') format('woff');
}

@font-face {
  font-display: swap;
  font-family: 'Inconsolata';
  font-style: normal;
  src: url('/fonts/Inconsolata.woff') format('woff');
}

body {
  margin: 0 auto;
  max-width: 800px;
  padding: 8px;

  @media(min-width: 1150px) {
    padding-left: 300px;
    text-align: justify;

    main {
      header:has(h1) {
        border-width: 0px 2px 0px 0px;
        float: left;
        margin-left: -300px;
        padding-right: 24px;
        position: sticky;
        text-align: right;
        top: 101px;
        width: 250px;
        h1 { margin-left: auto; width: min-content; }
      }
    }
  }
}

body { font: 24px var(--font-body); }
h1 { font: 40px var(--font-heading); }
h2 { font: 30px var(--font-heading); }
blockquote { font: 24px var(--font-quote); }
code { font: 24px var(--font-code); }

html { scrollbar-gutter: stable; }

header {
  nav {
    ul {
      display: flex;
      gap: 3ch;
      list-style: none;
      padding-inline-start: 0;

      @media(max-width: 600px) {
        font-size: 0.8em;
        gap: 0;
        justify-content: space-between;
      }
    }
  }
}

main {
  header {
    &:has(h1) {
      border-color: var(--accent);
      border-style: solid;
      border-width: 2px 0px 0px 0px;
    }
    h1, h2 { margin: 0px; }
    time { font-size: 0.8em; }
  }
}

a {
  text-decoration: none;
  header & { color: inherit; }
  main & { color: var(--accent); }
  &:hover { color: var(--accent); text-decoration: underline; }
}

blockquote {
  border-left: 2px solid var(--accent);
  margin: 1em 0px;
  padding-left: 24px;
}

ol, ul { padding-left: 30px; }

strong { font-weight: 700; }

:not(pre) > code, pre {
  background-color: var(--grey);
  border-radius: 4px;
  padding: 0px 4px;
}

::selection { background-color: var(--accent); color: var(--background); }
:focus-visible { outline-color: var(--accent); }