:root {
  --color-primary: oklch(0.33 0.07 160);
  --color-text: oklch(from var(--color-primary) 1 c h);
}

body {
  background-color: var(--color-primary);
  color: var(--color-text);

  max-width: 42em;
  padding: 0 1em;
  margin: auto;
}

nav {
  display: flex;
  gap: 0.5em;

  font-family: monospace;
}

:root {
  /* colors 😈 */
  --gradient-pride: repeating-linear-gradient(
    to right,
    red,
    orange,
    yellow,
    green,
    blue,
    purple
  );
  --gradient-enby: repeating-linear-gradient(
    to right,
    yellow,
    white,
    purple,
    black
  );
}

h1 {
  font-family: monospace;
  margin-bottom: 0;
}

/* only animate w/out reduced motion */
@media (prefers-reduced-motion: no-preference) {
  /* See <https://stackoverflow.com/questions/54702124/rainbow-text-animation-using-only-css> */
  h1:hover {
    background: var(--gradient-enby);
    background-clip: text;
    color: transparent;

    animation: slide 1s linear infinite;
    background-size: calc(12em * 4);
  }
}

@keyframes slide {
  from {
    background-position: calc(12em * 4);
  }
  to {
    background-position: 0;
  }
}

a {
  color: oklch(from var(--color-primary) 0.9 calc(c * 3) h);
  text-decoration: none;
}

a:hover,
a:focus,
a:focus-visible,
a:active {
  text-decoration: underline;
}

a.selected {
  color: var(--color-text);
}

.btn88x31 {
  image-rendering: pixelated;
  transform: rotate(0deg);
  transition: transform 1.2s ease;
}

a:has(.btn88x31) {
  text-decoration: none;
}

/* only animate w/out reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .btn88x31:hover {
    transform: rotate(360deg);
  }

  .hover-flip:hover {
    transform: scale(-1, 1) rotate(0deg);
  }

  .hover-flip-v {
    /* So the transition works properly */
    transform: scale(1, 1);
  }

  .hover-flip-v:hover {
    transform: scale(1, -1) rotate(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* don't show gifs w/ reduced motion */
  #btn-im-a-shark {
    content: url("/buttons/im-a-shark.png");
  }
  #btn-helix {
    content: url("/buttons/helix.png");
  }
  #btn-subway {
    content: url("/buttons/subway.png");
  }
}

#all-hell-btn {
  transition-property: filter;
}

#all-hell-btn:hover {
  filter: contrast(500%);
  transform: rotate(0deg);
}