@font-face {
  font-family: "PPPangaia";
  src: url("/assets/fonts/PPPangaia-Bold.otf") format("opentype");
  font-weight: bold;
  font-display: swap;
}

:root {
  --color-bg: #ffffff;
  --color-text: #1a1a1a;

  @media (prefers-color-scheme: dark) {
    --color-bg: #1a1a1a;
    --color-text: #ffffff;
  }
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  display: flex;
  font-family: system-ui, sans-serif;
  min-height: 100dvh;

  & main {
    margin: auto;
  }

  & h1 {
    font-family: "PPPangaia", system-ui, sans-serif;
    font-size: 2.5rem;
    letter-spacing: -2%;
    text-transform: lowercase;
  }
}

.instagram-link {
  color: var(--color-text);
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 2rem;
  height: 2rem;
  opacity: 0.6;
  transition: opacity 0.2s ease;

  & svg {
    width: 100%;
    height: 100%;
  }

  &:hover {
    opacity: 1;
  }
}