@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  @font-face {
    font-family: "JetBrains Mono";
    src: url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Regular.woff2")
        format("woff2"),
      url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Regular.woff")
        format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: auto;
  }

  html {
    font-family: "JetBrains Mono", sans-serif, system-ui;
  }

  .theme-switch:checked {
    @apply transition-transform transform translate-x-6 duration-300;
  }

  .theme-switch:checked + .theme-switch-label {
    @apply bg-turquoise;
  }

  h1,
  h2,
  h3 {
    @apply font-bold;
  }

  h1,
  h2 {
    @apply text-center;
  }

  h1 {
    @apply text-2xl;
  }

  h2 {
    @apply text-xl;
  }

  h3 {
    @apply text-lg;
  }

  h4 {
    @apply text-base;
  }

  nav a,
  footer a,
  main a:not(:has(*)) {
    @apply hover:text-turquoise;
    @apply hover:text-opacity-75;
  }

  .active-page,
  main a:not(:has(*)) {
    @apply text-turquoise;
  }
}