:root {
  --text-primary: #21201c;
  --text-secondary: #63635e;

  --background-color: #fcf5e5;

  --border-color: #dad9d6;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-primary: #eeeeec;
    --text-secondary: #b5b3ad;

    --background-color: #222221;

    --border-color: #3b3a37;
  }
}

html,
body {
  padding: 0;
  margin: 0 auto;
  font-family: "Inter";
  color: var(--text-primary);
  background-color: var(--background-color);
}

body {
  max-width: 40em;
  padding: 2em 1em;
}

main {
  margin: 2em 0;
}

header {
  display: flex;
  justify-content: space-between;

  a {
    color: var(--text-primary);

    text-decoration: underline;
    text-decoration-color: transparent;

    transition: text-decoration-color 100ms ease-in-out;

    &:hover {
      text-decoration-color: var(--text-primary);
    }
  }

  nav {
    ul {
      display: flex;
      gap: 1em;
      padding: 0;
      margin: 0;
      list-style: none;

      li {
        display: inline-block;
      }
    }
  }
}

.posts {
  display: flex;
  flex-direction: column;
  gap: 32px;

  a {
    text-decoration: unset;
  }

  article {
    display: flex;
    flex-direction: column;
    gap: 8px;

    h2,
    p {
      margin: 0;
      color: var(--text-primary);
    }

    h2 {
      text-decoration: underline;
      text-decoration-color: transparent;

      transition: text-decoration-color 100ms ease-in-out;
    }

    .date {
      color: var(--text-secondary);
      font-size: 14px;
    }

    &:hover {
      h2 {
        text-decoration-color: var(--text-primary);
      }
    }
  }
}

.post {
  display: flex;
  gap: 16px;
  flex-direction: column;

  .header {
    display: flex;
    gap: 8px;
    flex-direction: column;

    h1 {
      margin: 0;
    }

    .date {
      color: var(--text-secondary);
      font-size: 14px;
      margin: 0;
    }
  }

  .content {
    hr {
      border: unset;
      border-bottom: 1px solid var(--border-color);
      opacity: 0.4;
      margin: 3em 6em;
    }

    .heading {
      color: var(--text-primary);

      text-decoration: underline;
      text-decoration-color: transparent;

      transition: text-decoration-color 100ms ease-in-out;

      &:hover {
        text-decoration-color: var(--text-primary);
      }
    }
  }
}