:root{
   --black: #424054;
   --shadow-color: 266deg 18% 59%;
	--sticker-shadow-purple: 240deg 66% 25%;
	--sticker-shadow-pink: 330deg 40% 30%;
	--sticker-shadow-green: 100deg 69% 20%;
   --scrollbar-thumb: var(--purple-texture);
   --selection-bg: var(--pink);
}

body{
   background-color: var(--purple-bg);
   background-image: url("/background/19.png");
      background-size: auto;
   text-align: center;
   display: flex;
      flex-flow: column wrap;
      align-items: center;
      justify-content: center;
}

footer, nav, nav::before{
   filter: var(--drop-shadow-low);
}

nav::before{
   --size: 25svw;
   content: "";
   display: block;
   width: var(--size);
   height: var(--size);
      max-height: 60svh;
   margin: auto;
   margin-bottom: 1.66em;
   filter: var(--drop-shadow-low) var(--drop-shadow-low);
	background-image: url("/stickers/cutie/3_autumn/L01.png");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center top;
   animation: wave 3s linear infinite alternate both;
   --movement: 0.3svw;
}

@keyframes wave{
   0%{transform: translate(calc(-3.25 * var(--movement)), calc(-1 * var(--movement))) rotate(4deg);}
   10%{transform: translate(calc(-3 * var(--movement)), calc(-1 * var(--movement))) rotate(3deg);}
   30%{transform: translate( calc(-1 * var(--movement)), calc(0 * var(--movement))) rotate(1deg);}
   60%{transform: translate(calc(2 * var(--movement)), calc(1.25 * var(--movement))) rotate(-1deg);}
   90%{transform: translate(calc(4 * var(--movement)), calc(0 * var(--movement))) rotate(-3deg);}
   100%{transform: translate(calc(4.25 * var(--movement)), calc(0 * var(--movement))) rotate(-4deg);}
}

nav{
   margin: 12svh auto var(--gap) auto;
}

nav > div{
   display: flex;
      gap: 1em 2em;
}

nav a{
   width: 12em;
   height: 2.25em;
      box-sizing: border-box;
   color: var(--black);
   font-weight: bold;
   text-decoration: none;
   background-size: 100% 100%;
   background-repeat: no-repeat;
   padding: 0.125em 1em;
   filter: var(--drop-shadow-low);
}

nav a:is(:hover, :focus){
   color: var(--black);
   transform: scale(1.05) translate(-2%, -10%);
   filter: var(--drop-shadow-medium);
}

nav a, nav a:is(:hover, :focus){
   transition: transform 0.2s ease-out, filter 0.3s ease;
}

nav a:nth-of-type(3n+1){
   background-image: url("/stickers/cutie/3_autumn/L30.png");
   text-shadow: 
      var(--text-shadow-white),
		0.09em 0.05em 0.7px hsl(var(--sticker-shadow-purple) / 0.21),
		0.12em 0.1em 1px hsl(var(--sticker-shadow-purple) / 0.21),
		0.15em 0.1em 1.2px hsl(var(--sticker-shadow-purple) / 0.21);
}

nav a:nth-of-type(3n+2){
   background-image: url("/stickers/cutie/3_autumn/L28.png");
   text-shadow: 
      var(--text-shadow-white),
		0.09em 0.05em 0.7px hsl(var(--sticker-shadow-pink) / 0.21),
		0.12em 0.1em 1px hsl(var(--sticker-shadow-pink) / 0.21),
		0.15em 0.1em 1.2px hsl(var(--sticker-shadow-pink) / 0.21);
}

nav a:nth-of-type(3n){
   background-image: url("/stickers/cutie/3_autumn/L31.png");
   text-shadow: 
      var(--text-shadow-white),
		0.09em 0.05em 0.7px hsl(var(--sticker-shadow-green) / 0.21),
		0.12em 0.1em 1px hsl(var(--sticker-shadow-green) / 0.21),
		0.15em 0.1em 1.2px hsl(var(--sticker-shadow-green) / 0.21);
}

@keyframes float{
   to{
      transform: translateY(10%);
   }
}

.float{
   position: fixed;
   animation: float 2s ease-in-out alternate infinite;
   animation-fill-mode: both;
   filter: var(--drop-shadow-low);
}

.float:first-of-type{
   top: var(--gap);
   left: calc(var(--gap) * 1.2);
   max-width: 10svw;
   filter: var(--drop-shadow-low) var(--drop-shadow-low);
}

.float:nth-of-type(2){
   top: var(--gap);
   right: calc(var(--double-gap));
   max-width: 20svw;
   max-height: 10svh;
   animation-delay: .3s;
   filter: var(--drop-shadow-low) var(--drop-shadow-low);
}

.float:nth-of-type(3){
   top: 16svh;
   right: 22svw;
   max-width: 6svw;
   animation-delay: .1s;
   animation-direction: alternate-reverse;
}

.float:nth-of-type(4){
   top: 17svh;
   left: 13svw;
   max-width: 18svw;
   animation-delay: .5s;
   /* animation-direction: alternate-reverse; */
}

.float:nth-of-type(5){
   top: 5svh;
   left: 30svw;
   max-width: 4svw;
   animation-delay: .2s;
   animation-direction: alternate-reverse;
}

.float:nth-of-type(6){
   top: 6svh;
   right: 28svw;
   max-width: 3svw;
   animation-delay: .1s;
}

.float:nth-of-type(7){
   top: 13svh;
   right: 33svw;
   max-width: 2.5svw;
   animation-delay: .3s;
   animation-direction: alternate-reverse;
}

.float:nth-of-type(8){
   top: 3svh;
   left: 37svw;
   max-width: 2.5svw;
   animation-delay: .7s;
}