:root {
  --pico-font-family: Recursive, sans-serif;
}

@media (min-width: 1024px) {
  .container {
    max-width: 700px;
  }
}

footer {
  opacity: 0.8;
}

.text-center {
  text-align: center;
}

.text-cursive {
  font-family: Birthstone, cursive;
}

header > h1 {
  --pico-font-size: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;

  a.contrast {
    --pico-text-decoration: none;

    &:hover {
      --pico-text-decoration: underline;
    }
  }

  img {
    border-radius: 50%;
  }
}

.dark-theme-switch {
  float: right;
  color: var(--pico-secondary);
  border: 1px solid var(--pico-secondary);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(var(--pico-spacing) / 2);
  padding: 0.25rem 0.5rem;
  border-radius: 1.5rem;
  cursor: pointer;

  .lucide {
    transition: opacity 200ms ease-in;
  }

  .lucide-sun {
    opacity: 1;

    [data-theme="dark"] & {
      opacity: 0.2;
    }
  }

  .lucide-moon {
    opacity: 0.2;

    [data-theme="dark"] & {
      opacity: 1;
    }
  }
}

.post-list {
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  column-gap: 0.5rem;
  list-style-type: none;
  padding-left: 0;

  & > li {
    display: grid;
    grid-column: 1 / 4;
    grid-template-columns: subgrid;
    align-items: center;

    &:not(:last-child) {
      margin-bottom: var(--pico-spacing);
    }

    & > .badge {
      font-variant: small-caps;
      border-radius: var(--pico-border-radius);
      font-weight: 600;
      font-size: 0.825rem;
      padding: 0.25rem 0.5rem;
      text-align: center;

      &.badge-news {
        background-color: var(--pico-color-amber-250);
        color: var(--pico-color-amber-950);
      }

      &.badge-dev {
        background-color: var(--pico-color-blue-250);
        color: var(--pico-color-blue-950);
      }

      &.badge-ttrpg {
        background-color: var(--pico-color-pink-250);
        color: var(--pico-color-pink-950);
      }
    }

    & > .post-date {
      font-size: 0.75rem;
      color: var(--pico-secondary);
    }
  }
}

.article-header {
  text-align: center;

  h2 {
  }
}