@layer page {
  /* Variables */

  :root {
    /* Colors */
    --_color-primary: var(--color-chartreuse); /* headings, links */
    --_color-secondary: var(--color-blue); /* focus outline, halo  */

    /* Overlay background and buttons  */
    --_overlay-background: url("/assets/tiled_backgrounds/pentagrams.jpg");

    /* Player */
    --_player-bottom-border-image: url("/assets/gifs/electricshockdivider.gif");
    --_player-bottom-border-width: 580px;
    --_player-bottom-border-height: 30px;

    /* Header */
    --_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/num.gif");
    --_header-bottom-border-image: url("/assets/tiled_backgrounds/strife-walls-wire-1-cropped.png");
    --_header-bottom-border-image-width: 64px;
    --_header-bottom-border-image-height: 21px;

    /* Separator */
    --_separator-main-image: url("/assets/gifs/computer__melting.gif");
    --_separator-main-height: 147px;

    /* Card item hover image */
    --_card-item-hover-image: url("/assets/gifs/flash5-c.gif");
  }

  /* Rule override */

  /* Overriding player and header bottom border rules */
  .header__contents-bottom-border {
    transform: translateY(95%);
  }

  .player__bottom-border {
    background-repeat: repeat-x;
    top: calc(100% - var(--height) / 2);
  }

  /* Overriding card item hover image rules */
  .card__item:hover::before {
    background-position-y: top;
  }

  /* Backgrounds */

  .background__item--tombs {
    --ratio: 1;
    --bg-tomb1-width: calc(732px * var(--ratio));
    --bg-tomb1-height: calc(95px * var(--ratio));
    --bg-tomb1-position: left bottom;

    --bg-tomb1: url("/assets/backgrounds/TBNtomb1.png") var(--bg-tomb1-position) /
      var(--bg-tomb1-width) var(--bg-tomb1-height) repeat-x;

    bottom: 0;
    height: var(--bg-tomb1-height);
    width: 100%;
    background: var(--bg-tomb1);
    image-rendering: pixelated;
  }

  /* hidden, maybe to use in other page */
  .background__item--castle {
    --ratio: 1;

    --bg-castle-width: calc(342px * var(--ratio));
    --bg-castle-height: calc(251px * var(--ratio));
    --bg-castle-position: right bottom;

    --bg-castle: url("/assets/backgrounds/TBNCas3.png")
      var(--bg-castle-position) / var(--bg-castle-width) var(--bg-castle-height)
      no-repeat;

    bottom: 0;
    height: var(--bg-castle-height);
    width: 100%;
    background: var(--bg-castle);
    image-rendering: pixelated;
    visibility: hidden;
  }

  .background__item--trees {
    --ratio: 1;
    --bg-trees-width: calc(128px * var(--ratio));
    --bg-trees-height: calc(128px * var(--ratio));
    --bg-trees-position: left bottom;

    --bg-trees: url("/assets/tiled_backgrounds/TREES.png")
      var(--bg-trees-position) / var(--bg-trees-width) var(--bg-trees-height)
      repeat-x;

    bottom: 0;
    height: var(--bg-trees-height);
    width: 100%;
    background: var(--bg-trees);
    image-rendering: pixelated;
  }

  .background__item--skyscrapers {
    --ratio: 1;
    --bg-skyscrapers-width: calc(640px * var(--ratio));
    --bg-skyscrapers-height: calc(298px * var(--ratio));
    --bg-skyscrapers-position: left bottom;

    --bg-skyscrapers: url("/assets/backgrounds/dn3_skyscrapers.png")
      var(--bg-skyscrapers-position) / var(--bg-skyscrapers-width)
      var(--bg-skyscrapers-height) repeat-x;

    bottom: 0;
    height: var(--bg-skyscrapers-height);
    width: 100%;
    background: var(--bg-skyscrapers);
    image-rendering: pixelated;
  }

  .background__item--ferris-wheel {
    --ratio: 1;
    --bg-ferris-wheel-width: calc(120px * var(--ratio));
    --bg-ferris-wheel-height: calc(150px * var(--ratio));
    --bg-ferris-wheel-position: left bottom;

    --bg-ferris-wheel: url("/assets/gifs/ferris_wheel_spinning.gif")
      var(--bg-ferris-wheel-position) / var(--bg-ferris-wheel-width)
      var(--bg-ferris-wheel-height) no-repeat;

    bottom: 0;
    height: var(--bg-ferris-wheel-height);
    width: 100%;
    background: var(--bg-ferris-wheel);
    image-rendering: pixelated;
  }

  /* Media Queries */
  /*448px*/
  @media (max-width: 28rem) {
    .background__item--tombs {
      --bg-tomb1-position: center bottom;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --_player-bottom-border-image: url("/assets/gifs/frames/electricshockdivider/frame_1.webp");
      --_header-background-image: url("/assets/tiled_backgrounds/frames/num/frame_1.webp");
      --_separator-main-image: url("/assets/gifs/frames/computer__melting/frame_1.webp");
      --_card-item-hover-image: url("/assets/gifs/frames/flash5-c/frame_1.webp");
    }

    .background__item--ferris-wheel {
      --bg-ferris-wheel: url("/assets/gifs/frames/ferris_wheel_spinning/frame_1.webp")
        var(--bg-ferris-wheel-position) / var(--bg-ferris-wheel-width)
        var(--bg-ferris-wheel-height) no-repeat;
    }
  }
}