@layer page {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes walkPosition {
      0% {
        background-position-x: 0;
      }

      100% {
        background-position-x: 100%;
      }
    }

    @keyframes walkDirection {
      0% {
        transform: scaleX(1);
        background-image: url("/assets/gifs/rat-flip-t.gif");
      }
      100% {
        transform: scaleX(-1);
        background-image: url("/assets/gifs/rat-walk-flip-t.gif");
      }
    }
  }

  :root {
    --_color-primary: var(--color-light-purple); /* links */
    --_color-secondary: var(
      --color-turquoise
    ); /* headings, hovered links, focus outline, halo  */

    --_header-color-primary: var(--color-light-grey);
    --_header-color-secondary: var(--_color-secondary);
    --_header-background-image: url("/assets/tiled_backgrounds/shadowcaster_arch_top_transparent.png"),
      url("/assets/tiled_backgrounds/hacx-walls-167.png"),
      url("/assets/tiled_backgrounds/doom64-smonc.gif");
    --_header-bottom-border-image: url("/assets/tiled_backgrounds/hacx-walls-167.png"),
      url("/assets/tiled_backgrounds/strife-walls-wire-1-cropped.png"),
      url("/assets/tiled_backgrounds/hacx-walls-168.png");
    --_header-bottom-border-image-width: 128px;
    --_header-bottom-border-image-height: 48px;

    --_separator-main-image: url("/assets/gifs/email10.gif");
    --_separator-main-height: 121px;

    --_separator-footer-image: url("/assets/gifs/tombstone-email.gif");
    --_separator-footer-height: 105px;
  }

  /* Obfuscation */
  .contact__email span:nth-child(1) {
    display: none;
  }

  .header__contents-bottom-border {
    background-size: 128px 48px, 64px 21px, 128px 48px;
    background-position: left top, left top calc(100% - 21px / 2), left 64px top;
  }

  .footer__backgrounds {
    --footer-bg-ratio: 1.5;
    --footer-bg-height: calc(105px * var(--footer-bg-ratio));
    height: var(--footer-bg-height);
    z-index: 0;
  }

  .footer__background--rat-container {
    width: calc(100vw + (95px * 2));
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .footer__background--rat {
    background-image: url("/assets/gifs/rat-flip-t.gif");
    background-size: calc(105px * var(--footer-bg-ratio));
    background-repeat: no-repeat;
    background-position-y: bottom, top;
    width: 100%;
    height: 100%;
    animation: walkPosition 8s linear infinite,
      walkDirection 16s steps(2, jump-none) infinite;
    image-rendering: pixelated;
  }

  /*448px*/
  @media (max-width: 28rem) {
    .footer__backgrounds {
      --footer-bg-ratio: 1;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --_header-background-image: url("/assets/tiled_backgrounds/shadowcaster_arch_top_transparent.png"),
        url("/assets/tiled_backgrounds/hacx-walls-167.png"),
        url("/assets/tiled_backgrounds/frames/doom64-smonc/frame_1.webp");
      --_separator-main-image: url("/assets/gifs/frames/email10/frame_1.webp");
      --_separator-footer-image: url("/assets/gifs/frames/tombstone-email/frame_1.webp");
    }

    .footer__background--rat {
      background-image: url("/assets/gifs/frames/rat-flip-t/frame_1.webp");
      background-position: center;
    }
  }
}