/*...........................................................

		variables

..........................*/

:root{
	--seme-height: 9svh;
   /* --scrollbar-thumb: var(--aqua-texture); */
}

/*...........................................................

		footer link

..........................*/

footer a{
   font-weight: bold;
   text-decoration: none;
   text-shadow: var(--text-shadow-white);
}

/*..........................................................

	cute banner at the top

..........................*/

#seme{
	--seme-height: 9svh;
	width: 100%;
	background-image: url("/background/gg01.png");
	filter: var(--drop-shadow-low);
	position: fixed;
   z-index: -1;
}

main{
	padding-top: calc(var(--seme-height) / 1.2);
   width: 57svw;
}

h1{
   width: 100%;
   margin: 0 auto;
   margin-top: -1em;
   text-shadow: var(--text-shadow-white);
   filter: var(--drop-shadow-low);
}

h1::before, h1::after{
   --size: 2em;
   content: "";
   display: inline-block;
   width: calc(var(--size) * 2);
   height: var(--size);
	background-image: url("/stickers/yummy/yellow/D06.png");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center 66%;
}

h1:nth-of-type(even):before, h1:nth-of-type(even):after{
	background-image: url("/stickers/yummy/yellow/D06_A.png");
}

/*...........................................................

	   navigation >:+))

..........................*/

nav{
   flex-flow: row wrap;
   justify-content: center;
   gap: calc(1.5 * var(--gap));
}

nav a{
   --size: calc(76svh / 2);
   display: block;
   width: calc(50% - var(--gap));
   height: calc(var(--size));
}

nav a.stretch{
   width: calc(100% - var(--gap));
}

nav a, nav a:is(:hover, :focus){
   transition: transform 0.2s ease-out, box-shadow 0.2s ease, fitler 0.2s ease;
}

:is(nav, .navi) a{
   padding-bottom: 0.5ch!important;
}

/*..........................

   link heading

..........................*/

nav a > b{
   background: none!important;
   box-shadow: none!important;
   border: none!important;
   padding: 0!important;
   font-family: var(--heading-font);
   font-size: 1.6em;
}

nav a > b{
   filter: 
			drop-shadow(0.3px 0.5px 0.7px hsl(var(--sticker-shadow-color) / 0.25))
			drop-shadow(0.8px 1.6px 2px hsl(var(--sticker-shadow-color) / 0.25))
			drop-shadow(0.5px 1.5px 1.5px hsl(var(--sticker-shadow-color) / 0.25))
      ;
}

/* changes text shadow based on bg colour */

nav a.green > b{
   --sticker-shadow-color: var(--sticker-shadow-green);
}

nav a.yellow > b{
   --sticker-shadow-color: var(--sticker-shadow-yellow);
}

nav a.orange > b{
   --sticker-shadow-color: var(--sticker-shadow-orange);
}

nav a.aqua > b{
   --sticker-shadow-color: var(--sticker-shadow-aqua);
}

nav a.blue > b{
   --sticker-shadow-color: var(--sticker-shadow-blue);
}

/* adds stars before and after */

nav a > b::before, nav a > b::after{
   content: "\2605";
   font-size: 0.75em;
   display: inline-block;
}

nav a > b::before{
   transform: translate(-0.45em, -0.1em);
}

nav a > b::after{
   transform: translate(0.45em, -0.1em);
}

/*..........................

   text box inside link!!

..........................*/

nav a > div{
   font-weight: normal;
   text-shadow: none;
   max-height: calc(100% - var(--gap) - 2.4em);
   display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
   overflow: hidden!important;
   padding: 0 3ch!important;
}

/*...........................................................

	super cute side image!!!!!!!!!!!

..........................*/

#vector{
   box-shadow: none;
   filter: var(--drop-shadow-medium);
   width: calc(100% - 55svw - 8 * var(--gap));
}

#vector > div{
   width: 100%;
   height: 100%;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   position: absolute;
}

/*..........................

		layering bg imgs

..........................*/

#vector > div:nth-of-type(1){
	--anim-up: 0.3svh;
	--anim-down: 0.6svh;
   filter: var(--drop-shadow-low);
   background-image: url("./assets/cute_01.png");
	animation: float 4s ease-in-out infinite alternate-reverse;
}

#vector > div:nth-of-type(2){
	--anim-up: 0.5svh;
	--anim-down: 0.6svh;
   background-image: url("./assets/cute_02.png");
	animation: float 3.33s ease-in-out infinite alternate-reverse;
}

#vector > div:nth-of-type(3){
	--anim-up: 0.6svh;
	--anim-down: 0.7svh;
   background-image: url("./assets/cute_03.png");
	animation: float 2.8s ease-in-out infinite alternate-reverse;
   /* animation-delay: .5s; */
}

#vector > div:nth-of-type(4){
	--anim-up: 0.4svh;
	--anim-down: 0.5svh;
   background-image: url("./assets/cute_04.png");
	animation: float 3s ease-in-out infinite alternate;
   /* animation-delay: .25s; */
}

/*..........................

		animation

..........................*/

@keyframes float{
	from{
		transform: translateY(calc(-1 * var(--anim-up)));
	}
	to{
		transform: translateY(var(--anim-down));
	}
}