:root {
  scroll-behavior: smooth;

  --font-primary: 1rem;
  --font-secondary: 0.8rem;

  --margin-page: min(4vw, 3rem);
  --max-width: max(80vw, 60rem);

  --bg-size: 160px;

  --shadow-large: 0 4px 8px 4px rgba(0, 0, 0, 0.125),
    0 2px 2px 0 rgba(0, 0, 0, 0.125), 0 0 0 1px rgba(0, 0, 0, 0.025);
}

@view-transition {
  navigation: auto;
}

@keyframes scroll-background {
  from {
    transform: translateX(0) translateY(0);
  }
  to {
    transform: translateX(var(--bg-size)) translateY(calc(var(--bg-size) * -1));
  }
}
:root {
  background-color: var(--pink-100);

  &:before {
    content: "";
    position: fixed;
    contain: strict;
    top: calc(var(--bg-size) * -2);
    left: calc(var(--bg-size) * -2);
    right: calc(var(--bg-size) * -2);
    bottom: calc(var(--bg-size) * -2);
    pointer-events: none;
    background-color: var(--pink-100);
    background-image: url(../paws.png);
    background-size: 160px;
    animation: scroll-background 40s linear infinite;
  }
  &.dark-mode:before {
    background-image: url(../stars.png);
  }
  body {
    position: relative;
  }
}

body {
  padding: var(--margin-page);
  margin: auto;
  line-height: 1.4;
  color: var(--neutral-1000);
  image-rendering: pixelated;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}