@layer page {
  /* Variables */

  :root {
    /* Colors */
    --_color-primary: var(--color-green); /* headings, links */
    --_color-secondary: var(
      --color-light-purple
    ); /* gradient headings, hover, focus outline, halo */

    /* Cursors */
    --cursor-pointer: var(--cursor-wow-gauntlet-red), pointer;
    --cursor-pointer-animation: cursorWowGauntletRed;

    /* Player */
    --_player-bottom-border-image: url("/assets/tiled_backgrounds/MOSSTOP_21.png"),
      url("/assets/tiled_backgrounds/MOSSTOP_01.png");
    --_player-bottom-border-width: 64px;
    --_player-bottom-border-height: 64px;

    /* Header */
    --_header-color-primary: var(--color-light-grey);
    --_header-color-secondary: var(--color-light-purple);

    /* Separator */
    --_separator-main-image: url("/assets/gifs/bleedingrose-L.gif"),
      url("/assets/gifs/rosebluetear.gif");
    --_separator-main-height: 125px;

    /* Card item hover image */
    --_card-item-hover-image: url("/assets/tiled_backgrounds/fondo.gif");

    /* End Of All backgrounds shadows */
    --shadow-blur-radius: 0px;
    --shadow-color: var(--color-black-transparent-30);
  }

  /* Rule override */

  /* Overriding player bottom border rules */
  .player__bottom-border {
    background-position: right bottom, left 45% bottom;
    top: calc(100% - var(--_player-bottom-border-height) / 4);
  }

  /* Overriding separator rules */
  .separator--footer {
    background-position: center center, left 40% center;
  }

  /* Overriding card item hover image rules */
  .card__item:hover::before {
    background-size: auto;
    background-repeat: repeat;
    opacity: 0.4;
    mix-blend-mode: plus-lighter;
  }

  /* Footer */

  .footer__background--butterfly {
    background-image: url("/assets/gifs/butterflyx.gif");
    background-repeat: no-repeat;
    background-position-y: center;
    width: 100%;
    height: 120px;
    animation: flyPosition 4s linear infinite,
      flyDirection 8s steps(2, jump-none) infinite;
    position: relative;
    filter: drop-shadow(
      30px 10px var(--shadow-blur-radius) var(--shadow-color)
    );
  }

  .footer__background--tv {
    background-image: url("/assets/gifs/tv-scrambled.gif");
    background-repeat: no-repeat;
    width: 108px;
    height: 100px;
    position: absolute;
    left: 85px;
    bottom: -4vh;
    transform: rotate(5deg);
    z-index: -1;
    filter: drop-shadow(
      10px 30px var(--shadow-blur-radius) var(--shadow-color)
    );
  }

  /* Backgrounds */

  .background {
    --background-wall: url("/assets/tiled_backgrounds/WALL5.png");
    --background-wall-moss1: url("/assets/tiled_backgrounds/MOSSTOP_21.png");
    --background-wall-moss2: url("/assets/tiled_backgrounds/MOSSTOP_01.png");
  }

  .background__item--wall {
    background-image: var(--background-wall);
    background-repeat: repeat;
    bottom: 0px;
    width: 100%;
    height: 85vh;
    z-index: -1;
  }

  .background__item--moss-wall {
    background-image: url("/assets/tiled_backgrounds/MOSS_01.png"),
      url("/assets/tiled_backgrounds/VINES_30y.png");
    background-repeat: repeat, repeat-y;
    width: 100%;
    height: 100%;
    background-size: 128px, 264px;
    background-position: bottom 10px left, bottom right;
  }

  .background__item--moss-top {
    background-image: var(--background-wall-moss2), var(--background-wall-moss1);
    background-repeat: repeat-x;
    background-position: left top calc(64px / 3), left center;
    background-size: auto, calc(64px * 2);
    width: 100%;
    height: calc(64px * 2);
    top: calc(-64px / 2);
    filter: drop-shadow(5px 5px var(--shadow-blur-radius) var(--shadow-color));
  }

  /* bush with roses */
  .background__item--roses {
    background-image: url("/assets/backgrounds/arcanum-bush-53.png"),
      url("/assets/backgrounds/arcanum-bush-45.png"),
      url("/assets/backgrounds/arcanum-bush-49.png");
    background-repeat: no-repeat;
    background-size: auto, auto, auto;
    background-position: bottom right, bottom right, bottom right;
    height: 100%;
    width: 100%;
    bottom: 0;
    right: 0;
    filter: drop-shadow(
      10px 15px var(--shadow-blur-radius) var(--shadow-color)
    );
  }

  /* the roses are added on a separate element so they drop a shadow on the bush */
  .background__item--roses::after {
    content: "";
    position: absolute;
    background-image: url("/assets/gifs/roseanime-loop1.gif"),
      url("/assets/gifs/roseanime-loop2.gif"),
      url("/assets/gifs/roseanime-loop3.gif");
    background-repeat: no-repeat;
    background-size: 50px, 80px, 58px;
    background-position: bottom 120px right 20px, bottom 170px right 100px,
      bottom 230px right 55px;
    height: 100%;
    width: 100%;
    bottom: 0;
    right: 0;
    filter: drop-shadow(
      10px 15px var(--shadow-blur-radius) var(--shadow-color)
    );
  }

  .background__item--grass {
    background-image: url("/assets/gifs/grass_blowing.gif"),
      url("/assets/gifs/grass_blowing.gif");
    background-repeat: repeat-x;
    background-position: 0 15px, -100px 5px;
    width: 100%;
    height: 36px;
    bottom: 0;
  }

  .background__item--butterfly-wall {
    background-image: url("/assets/gifs/butterflywhite.gif");
    background-repeat: no-repeat;
    right: 80px;
    width: 70px;
    height: 80px;
    top: -40px;
    transform: rotate(-20deg);
    background-size: contain;
    filter: drop-shadow(
      10px 30px var(--shadow-blur-radius) var(--shadow-color)
    );
  }

  .background__item--bones {
    background-image: url("/assets/tiled_backgrounds/BONES.png");
    background-repeat: no-repeat;
    width: 128px;
    height: 128px;
    right: 175px;
    top: -128px;
  }

  .background__item--spiderweb {
    background-image: url("/assets/backgrounds/SPIDERWEB1.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: 32px;
    height: 40px;
    top: 0;
    left: 0;
  }

  .background__item--branch {
    background-image: url("/assets/backgrounds/arcanum-branch-162.png");
    background-repeat: no-repeat;
    background-position: top 25px left -50px;
    width: 234px;
    height: 300px;
    filter: drop-shadow(0px 50px var(--shadow-blur-radius) var(--shadow-color));
  }

  .background__item--skeleton {
    background-image: url("/assets/gifs/skeleton-hanging.gif");
    background-repeat: no-repeat;
    width: 234px;
    height: calc(292px + 177px);
    background-position-y: 177px;
    filter: drop-shadow(
      40px 90px var(--shadow-blur-radius) var(--shadow-color)
    );
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --_separator-main-image: url("/assets/gifs/frames/bleedingrose-L/frame_1.webp"),
        url("/assets/gifs/frames/rosebluetear/frame_1.webp");

      --_card-item-hover-image: url("/assets/tiled_backgrounds/frames/fondo/frame_1.webp");
    }

    .footer__background--butterfly {
      background-image: url("/assets/gifs/frames/butterflyx/frame_1.webp");
    }

    .footer__background--tv {
      background-image: url("/assets/gifs/frames/tv-scrambled/frame_1.webp");
    }

    .background__item--roses::after {
      background-image: url("/assets/gifs/frames/roseanime-loop1/frame_1.webp"),
        url("/assets/gifs/frames/roseanime-loop1/frame_1.webp"),
        url("/assets/gifs/frames/roseanime-loop1/frame_1.webp");
    }

    .background__item--grass {
      background-image: url("/assets/gifs/frames/grass_blowing/frame_1.webp"),
        url("/assets/gifs/frames/grass_blowing/frame_1.webp");
    }

    .background__item--butterfly-wall {
      background-image: url("/assets/gifs/frames/butterflywhite/frame_1.webp");
    }

    .background__item--skeleton {
      background-image: url("/assets/gifs/frames/skeleton-hanging/frame_1.webp");
    }
  }
}