@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/IBMPlexMono-Regular.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/IBMPlexMono-Medium.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/IBMPlexMono-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 900; font-display: swap; src: url('/assets/IBMPlexMono-Bold.ttf') format('truetype'); }

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

:focus {
  outline: 0;
}
:focus-visible {
  outline: 2px double currentColor;
  outline-offset: 2px;
}
::selection {
  background-color: var(--color-fg);
  color: var(--color-bg);
}

:root {
  --color-bg: #eee8d5;
  --color-fg: #002b36;
  --font-family-default: 'IBM Plex Mono', 'Courier New', Courier, monospace;

  @media (prefers-color-scheme: dark) {
    --color-bg: #282a36;
    --color-fg: #fdf6e3;
  }
}

html {
  background-color: var(--color-bg);
  color: var(--color-fg);
  font-size: 112.5%;
}

body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  align-items: stretch;
  cursor: default;
  display: flex;
  flex-direction: column;
  font-family: var(--font-family-default);
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  padding: 0;
  text-rendering: optimizeLegibility;
  text-size-adjust: none;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote {
  & + & {
    margin-top: 1.5em;
  }
}

h1, h2, h3, h4, h5, h6, b {
  font-weight: 700;
}

header,
footer,
nav,
main {
  margin: auto;
  max-width: 100%;
  padding: 1.5rem 2ch;
  width: 60ch;
}

article { 
  & header {
    padding: 0 0 3rem;
  }
}

a {
  color: currentColor;
  text-decoration: underline;

  &:hover,
  &:focus-visible {
    font-weight: 500;
    text-decoration: none;
  }

  &[aria-current='page'] {
    font-weight: 500;
    text-decoration: none;
  }
}

.logo {
  display: inline-flex;
  font-size: 3rem;
  margin-bottom: 1.5rem;
}

ul.inline {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5em 4ch;
}

.articles,
.links {
  list-style: none;
  margin: 3em 0 0;
  padding: 0;

  & > li {
    margin: 0;
    padding: 0;

    & + li {
      border-top: 1px solid currentColor;
      margin-top: 1.5em;
      padding-top: 1.5em;
    }

    & > h2 {
      &::before {
        content: '* ';
      }
    }
  }
}

.links {
  & > li > h2 > a {
    font-weight: 500;
    text-decoration: none;

    &::after {
      content: attr(href);
      display: block;
      overflow: hidden;
      text-decoration: underline;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    &:hover {
      font-weight: 900;

      &::after {
        text-decoration: none;
      }
    }
  }
}