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

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

.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;
    }
  }
}