/* Visor layers and animation */

#visor-wrapper
{
position: sticky;
top: 0;
left: 0;
background: #5A3F41;
background:

	/* the actual background image */
	image-set(
	  url("bg.avif") type("image/avif") 2x,
	  url("srcset/bg-0.5.avif") type("image/avif") 1x,
	  url("bg.jpg") type("image/jpg") 2x,
	  url("srcset/bg-0.5.jpg") type("image/jpg") 1x
	),

	/* column on the right side */
	linear-gradient(90deg,rgba(255, 255, 255, 0) 0%, rgba(90, 63, 65, 1) 90%),
	/* sky to ground */
	linear-gradient(180deg,rgba(90, 63, 65, 1) 0%, rgba(255, 148, 83, 1) 25%, rgba(248, 62, 38, 1) 37%, rgba(71, 47, 45, 1) 47%, rgba(225, 126, 74, 1) 53%, rgba(55, 39, 36, 1) 59%, rgba(56, 40, 36, 1) 100%);
	
}

#visor-wrapper,
#visor-wrapper #throne,
#visor-wrapper #visor,
#visor-wrapper #chains,
#visor-wrapper #finger
{
height: 100vh;
background-attachment: no-repeat;
background-position: left;
background-size: contain;
aspect-ratio: 3280 / 5846;
}

/*
0.75 is 2460px wide
for double resolution, minimum width is 1230
3280 / 5846 = 1230 / x
3280x = 7190580
x = 2192.25

If height is 2192, width is 1230

*/

#visor-wrapper *
{
position: absolute;
}

#visor-wrapper #cloud1,
#visor-wrapper #cloud2,
#visor-wrapper #cloud3
{
width: 100%;
height: 24%;
background-repeat: repeat-x;
}

	@keyframes cloud1
	{
	from
		{ background-position: 345% bottom; }
	to
		{ background-position: 0% bottom; }
	}

#visor-wrapper #cloud1
{
background-image: url("cloud1.png");
background-image: image-set(
  url("cloud1.avif") type("image/avif") 2x,
  url("srcset/cloud1-0.5.avif") type("image/avif") 1x,
  url("cloud1.png") type("image/png") 2x,
  url("srcset/cloud1-0.5.png") type("image/png") 1x
);
background-size: 140%;
z-index: 333;
animation: 40s infinite linear cloud1;
}

	@keyframes cloud2
	{
	from
		{ background-position: -193% top; }
	to
		{ background-position: 370% top; }
	}

#visor-wrapper #cloud2
{
background-image: url("cloud2.png");
background-image: image-set(
  url("cloud2.avif") type("image/avif") 2x,
  url("srcset/cloud2-0.5.avif") type("image/avif") 1x,
  url("cloud2.png") type("image/png") 2x,
  url("srcset/cloud2-0.5.png") type("image/png") 1x
);
background-size: 85%;
z-index: 334;
animation: 30s infinite linear cloud2;
}

	@keyframes cloud3
	{
	from
		{ background-position: 390% top; }
	to
		{ background-position: 138% top; }
	}

#visor-wrapper #cloud3
{
background-image: url("cloud3.png");
background-image: image-set(
  url("cloud3.avif") type("image/avif") 2x,
  url("srcset/cloud3-0.5.avif") type("image/avif") 1x,
  url("cloud3.png") type("image/png") 2x,
  url("srcset/cloud3-0.5.png") type("image/png") 1x
);

background-size: 166%;
z-index: 335;
animation: 20s infinite linear cloud3;
}

	@keyframes birdwing
	{
	0%
		{
			background-image: url("bird1.png");
			background-image: image-set(
			  url("bird1.avif") type("image/avif") 2x,
			  url("srcset/bird1-0.5.avif") type("image/avif") 1x,
			  url("bird1.png") type("image/png") 2x,
			  url("srcset/bird1-0.5.png") type("image/png") 1x
			);
		}
	50%
		{
			background-image: url("bird2.png");
			background-image: image-set(
			  url("bird2.avif") type("image/avif") 2x,
			  url("srcset/bird2-0.5.avif") type("image/avif") 1x,
			  url("bird2.png") type("image/png") 2x,
			  url("srcset/bird2-0.5.png") type("image/png") 1x
			);
		}
	100%
		{
			background-image: url("bird3.png");
			background-image: image-set(
			  url("bird3.avif") type("image/avif") 2x,
			  url("srcset/bird3-0.5.avif") type("image/avif") 1x,
			  url("bird3.png") type("image/png") 2x,
			  url("srcset/bird3-0.5.png") type("image/png") 1x
			);
		}
	}

	@keyframes birdposition
	{
	0%
		{ translate: -70% 80%; }
	15%
		{ translate: 500% -100%; }
	100%
		{ translate: 1200% -1200%; }
	}

#visor-wrapper #bird
{
	background-image: url("bird1.png");
	background-image: image-set(
	  url("bird1.avif") type("image/avif") 2x,
	  url("srcset/bird1-0.5.avif") type("image/avif") 1x,
	  url("bird1.png") type("image/png") 2x,
	  url("srcset/bird1-0.5.png") type("image/png") 1x
	);

background-repeat: no-repeat;
background-size: contain;
z-index: 443;
width: 10%;
height: 7%;
animation: .25s infinite alternate linear birdwing, 7s infinite linear birdposition;
}

#visor-wrapper #throne
{
background-image: url("throne-and-rocketlauncher.png");
background-image: image-set(
  url("throne-and-rocketlauncher.avif") type("image/avif") 2x,
  url("srcset/throne-and-rocketlauncher-0.5.avif") type("image/avif") 1x,
  url("throne-and-rocketlauncher.png") type("image/png") 2x,
  url("srcset/throne-and-rocketlauncher-0.5.png") type("image/png") 1x
);

z-index: 444;
}

@keyframes steam
	{
	0%
		{
			background-image: url("steam1.png");
			background-image: image-set(
			  url("steam1.avif") type("image/avif") 2x,
			  url("srcset/steam1-0.5.avif") type("image/avif") 1x,
			  url("steam1.png") type("image/png") 2x,
			  url("srcset/steam1-0.5.png") type("image/png") 1x
			);
		}
	6%
		{
			background-image: url("steam2.png");
			background-image: image-set(
			  url("steam2.avif") type("image/avif") 2x,
			  url("srcset/steam2-0.5.avif") type("image/avif") 1x,
			  url("steam2.png") type("image/png") 2x,
			  url("srcset/steam2-0.5.png") type("image/png") 1x
			);
		}
	12%
		{
			background-image: url("steam3.png");
			background-image: image-set(
			  url("steam3.avif") type("image/avif") 2x,
			  url("srcset/steam3-0.5.avif") type("image/avif") 1x,
			  url("steam3.png") type("image/png") 2x,
			  url("srcset/steam3-0.5.png") type("image/png") 1x,
			);
		}
	13%
		{
			background-image: url("steam4.png");
			background-image: image-set(
			  url("steam4.avif") type("image/avif") 2x,
			  url("srcset/steam4-0.5.avif") type("image/avif") 1x,
			  url("steam4.png") type("image/png") 2x,
			  url("srcset/steam4-0.5.png") type("image/png") 1x,
			);
		}
	14%
		{
			background-image: url("steam5.png");
			background-image: image-set(
			  url("steam5.avif") type("image/avif") 2x,
			  url("srcset/steam5-0.5.avif") type("image/avif") 1x,
			  url("steam5.png") type("image/png") 2x,
			  url("srcset/steam5-0.5.png") type("image/png") 2x,
			);
		}
	15%
		{
			background-image: url("steam6.png");
			background-image: image-set(
			  url("steam6.avif") type("image/avif") 2x,
			  url("srcset/steam6-0.5.avif") type("image/avif") 1x,
			  url("steam6.png") type("image/png") 2x,
			  url("srcset/steam6-0.5.png") type("image/png") 1x
			);
		}
	16%
		{
			background-image: url("steam7.png");
			background-image: image-set(
			  url("steam7.avif") type("image/avif") 2x,
			  url("srcset/steam7-0.5.avif") type("image/avif") 1x,
			  url("steam7.png") type("image/png") 2x,
			  url("srcset/steam7-0.5.png") type("image/png") 1x,
			);
		}
	17%
		{
			background-image: none;
		}
	}

/*duplicate for restarting animation hack */
@keyframes steam-hover
	{
	0%
		{
			background-image: url("steam1.png");
			background-image: image-set(
			  url("steam1.avif") type("image/avif") 2x,
			  url("srcset/steam1-0.5.avif") type("image/avif") 1x,
			  url("steam1.png") type("image/png") 2x,
			  url("srcset/steam1-0.5.png") type("image/png") 1x
			);
		}
	6%
		{
			background-image: url("steam2.png");
			background-image: image-set(
			  url("steam2.avif") type("image/avif") 2x,
			  url("srcset/steam2-0.5.avif") type("image/avif") 1x,
			  url("steam2.png") type("image/png") 2x,
			  url("srcset/steam2-0.5.png") type("image/png") 1x
			);
		}
	12%
		{
			background-image: url("steam3.png");
			background-image: image-set(
			  url("steam3.avif") type("image/avif") 2x,
			  url("srcset/steam3-0.5.avif") type("image/avif") 1x,
			  url("steam3.png") type("image/png") 2x,
			  url("srcset/steam3-0.5.png") type("image/png") 1x,
			);
		}
	13%
		{
			background-image: url("steam4.png");
			background-image: image-set(
			  url("steam4.avif") type("image/avif") 2x,
			  url("srcset/steam4-0.5.avif") type("image/avif") 1x,
			  url("steam4.png") type("image/png") 2x,
			  url("srcset/steam4-0.5.png") type("image/png") 1x,
			);
		}
	14%
		{
			background-image: url("steam5.png");
			background-image: image-set(
			  url("steam5.avif") type("image/avif") 2x,
			  url("srcset/steam5-0.5.avif") type("image/avif") 1x,
			  url("steam5.png") type("image/png") 2x,
			  url("srcset/steam5-0.5.png") type("image/png") 2x,
			);
		}
	15%
		{
			background-image: url("steam6.png");
			background-image: image-set(
			  url("steam6.avif") type("image/avif") 2x,
			  url("srcset/steam6-0.5.avif") type("image/avif") 1x,
			  url("steam6.png") type("image/png") 2x,
			  url("srcset/steam6-0.5.png") type("image/png") 1x
			);
		}
	16%
		{
			background-image: url("steam7.png");
			background-image: image-set(
			  url("steam7.avif") type("image/avif") 2x,
			  url("srcset/steam7-0.5.avif") type("image/avif") 1x,
			  url("steam7.png") type("image/png") 2x,
			  url("srcset/steam7-0.5.png") type("image/png") 1x,
			);
		}
	17%
		{
			background-image: none;
		}
	}

#visor-wrapper #steam
{
width: 100%;
height: 24%;
background-size: 100%;
opacity: .9;
animation: 5s infinite linear steam;
z-index: 1000;
}

#visor-wrapper #steam .trigger
{
top: 189%;
left: 34%;
height: 31%;
width: 20%;
z-index: 1000;
}

#visor-wrapper #steam:has(.trigger:hover)
{
animation: 3s infinite linear steam-hover;
cursor: grab;
}

#visor-wrapper #steam:has(.trigger:active)
{
animation: 3s infinite linear steam;
cursor: grabbing;
}


@keyframes finger
	{
	0%
		{
			background-image: url("finger1.png");
			background-image: image-set(
			  url("finger1.avif") type("image/avif") 2x,
			  url("srcset/finger1-0.5.avif") type("image/avif") 1x,
			  url("finger1.png") type("image/png") 2x,
			  url("srcset/finger1-0.5.png") type("image/png") 1x
			);
		}
	2%
		{
			background-image: url("finger2.png");
			background-image: image-set(
			  url("finger2.avif") type("image/avif") 2x,
			  url("srcset/finger2-0.5.avif") type("image/avif") 1x,
			  url("finger2.png") type("image/png") 2x,
			  url("srcset/finger2-0.5.png") type("image/png") 1x
			);
		}
	8%
		{
			background-image: url("finger3.png");
			background-image: image-set(
			  url("finger3.avif") type("image/avif") 2x,
			  url("srcset/finger3-0.5.avif") type("image/avif") 1x,
			  url("finger3.png") type("image/png") 2x,
			  url("srcset/finger3-0.5.png") type("image/png") 1x
			);
		}
	100%
		{
			background-image: url("finger3.png");
			background-image: image-set(
			  url("finger3.avif") type("image/avif") 2x,
			  url("srcset/finger3-0.5.avif") type("image/avif") 1x,
			  url("finger3.png") type("image/png") 2x,
			  url("srcset/finger3-0.5.png") type("image/png") 1x
			);
		}
	}

/*duplicate for restarting animation hack */
@keyframes finger-hover
	{
	0%
		{
			background-image: url("finger1.png");
			background-image: image-set(
			  url("finger1.avif") type("image/avif") 2x,
			  url("srcset/finger1-0.5.avif") type("image/avif") 1x,
			  url("finger1.png") type("image/png") 2x,
			  url("srcset/finger1-0.5.png") type("image/png") 1x
			);
		}
	2%
		{
			background-image: url("finger2.png");
			background-image: image-set(
			  url("finger2.avif") type("image/avif") 2x,
			  url("srcset/finger2-0.5.avif") type("image/avif") 1x,
			  url("finger2.png") type("image/png") 2x,
			  url("srcset/finger2-0.5.png") type("image/png") 1x
			);
		}
	8%
		{
			background-image: url("finger3.png");
			background-image: image-set(
			  url("finger3.avif") type("image/avif") 2x,
			  url("srcset/finger3-0.5.avif") type("image/avif") 1x,
			  url("finger3.png") type("image/png") 2x,
			  url("srcset/finger3-0.5.png") type("image/png") 1x
			);
		}
	100%
		{
			background-image: url("finger3.png");
			background-image: image-set(
			  url("finger3.avif") type("image/avif") 2x,
			  url("srcset/finger3-0.5.avif") type("image/avif") 1x,
			  url("finger3.png") type("image/png") 2x,
			  url("srcset/finger3-0.5.png") type("image/png") 1x
			);
		}
	}

#visor-wrapper #finger
{
animation: 7s infinite linear finger;
z-index: 999;
}

#visor-wrapper #finger .trigger
{
top: 54%;
height: 10%;
width: 20%;
z-index: 1000;
}

#visor-wrapper #finger:has(.trigger:hover)
{
animation: 7s infinite linear finger-hover;
cursor: pointer;
}

#visor-wrapper #visor
{
background-image: url("visor.png");
background-image: image-set(
  url("visor.avif") type("image/avif") 2x,
  url("srcset/visor-0.5.avif") type("image/avif") 1x,
  url("visor.png") type("image/png") 2x,
  url("srcset/visor-0.5.png") type("image/png") 1x
);
z-index: 666;
}

@keyframes chains
	{
	from
		{
			background-image: url("chains1.png");
			background-image: image-set(
			  url("chains1.avif") type("image/avif") 2x,
			  url("srcset/chains1-0.5.avif") type("image/avif") 1x,
			  url("chains1.png") type("image/png") 2x,
			  url("srcset/chains1-0.5.png") type("image/png") 1x
			);
		}
	to
		{
			background-image: url("chains2.png");
			background-image: image-set(
			  url("chains2.avif") type("image/avif") 2x,
			  url("srcset/chains2-0.5.avif") type("image/avif") 1x,
			  url("chains2.png") type("image/png") 2x,
			  url("srcset/chains2-0.5.png") type("image/png") 1x
			);
		}
	}

#visor-wrapper #chains
{
animation: 1.5s infinite linear chains;
z-index: 777;
background-position: top left;
background-repeat: no-repeat;
}


/*

RESPONSIVE IMAGE SETS

0.5 is 1640px wide
for double resolution, minimum width is 820

3280 / 5846 = 820 / x
3280x = (5846 * 820 ) = 4793720
x = 1461.5

If height is 1461, width is 820
Which means that 0.5 can be used as double resolution for this height
And 0.25 can be single resolution

*/

@media screen and (max-height: 1461px)
{

	#visor-wrapper
	{
		background-image: url("srcset/bg-0.5.png");
		background-image: image-set(
			url("srcset/bg-0.5.avif") type("image/avif") 2x,
			url("srcset/bg-0.25.avif") type("image/avif") 1x,
			url("srcset/bg-0.5.png") type("image/jpg") 2x,
			url("srcset/bg-0.25.png") type("image/jpg") 1x
		);
	}

	#visor-wrapper #throne
	{
		background-image: url("srcset/throne-and-rocketlauncher-0.5.png");
		background-image: image-set(
			url("srcset/throne-and-rocketlauncher-0.5.avif") type("image/avif") 2x,
			url("srcset/throne-and-rocketlauncher-0.25.avif") type("image/avif") 1x,
			url("srcset/throne-and-rocketlauncher-0.5.png") type("image/png") 2x,
			url("srcset/throne-and-rocketlauncher-0.25.png") type("image/png") 1x
		);
	}

	#visor-wrapper #visor
	{
		background-image: url("srcset/visor-0.5.png");
		background-image: image-set(
			url("srcset/visor-0.5.avif") type("image/avif") 2x,
			url("srcset/visor-0.25.avif") type("image/avif") 1x,
			url("srcset/visor-0.5.png") type("image/png") 2x,
			url("srcset/visor-0.25.png") type("image/png") 1x
		);
	}


	#visor-wrapper #cloud1
	{
		background-image: url("srcset/cloud1-0.5.png");
		background-image: image-set(
			url("srcset/cloud1-0.5.avif") type("image/avif") 2x,
			url("srcset/cloud1-0.25.avif") type("image/avif") 1x,
			url("srcset/cloud1-0.5.png") type("image/png") 2x,
			url("srcset/cloud1-0.25.png") type("image/png") 1x
		);
	}
	
	#visor-wrapper #cloud2
	{
		background-image: url("srcset/cloud2-0.5.png");
		background-image: image-set(
			url("srcset/cloud2-0.5.avif") type("image/avif") 2x,
			url("srcset/cloud2-0.25.avif") type("image/avif") 1x,
			url("srcset/cloud2-0.5.png") type("image/png") 2x,
			url("srcset/cloud2-0.25.png") type("image/png") 1x
		);
	}

	#visor-wrapper #cloud3
	{
		background-image: url("srcset/cloud3-0.5.png");
		background-image: image-set(
			url("srcset/cloud3-0.5.avif") type("image/avif") 2x,
			url("srcset/cloud3-0.25.avif") type("image/avif") 1x,
			url("srcset/cloud3-0.5.png") type("image/png") 2x,
			url("srcset/cloud3-0.25.png") type("image/png") 1x
		);
	}


@keyframes finger
	{
	0%
		{
			background-image: url("srcset/finger1-0.5.png");
			background-image: image-set(
			  url("srcset/finger1-0.5.avif") type("image/avif") 2x,
			  url("srcset/finger1-0.25.avif") type("image/avif") 1x,
			  url("srcset/finger1-0.5.png") type("image/png") 2x,
			  url("srcset/finger1-0.25.png") type("image/png") 1x
			);
		}
	2%
		{
			background-image: url("srcset/finger2-0.5.png");
			background-image: image-set(
			  url("srcset/finger2-0.5.avif") type("image/avif") 2x,
			  url("srcset/finger2-0.25.avif") type("image/avif") 1x,
			  url("srcset/finger2-0.5.png") type("image/png") 2x,
			  url("srcset/finger2-0.25.png") type("image/png") 1x
			);
		}
	8%
		{
			background-image: url("srcset/finger3-0.5.png");
			background-image: image-set(
			  url("srcset/finger3-0.5.avif") type("image/avif") 2x,
			  url("srcset/finger3-0.25.avif") type("image/avif") 1x,
			  url("srcset/finger3-0.5.png") type("image/png") 2x,
			  url("srcset/finger3-0.25.png") type("image/png") 1x
			);
		}
	100%
		{
			background-image: url("srcset/finger3-0.5.png");
			background-image: image-set(
			  url("srcset/finger3-0.5.avif") type("image/avif") 2x,
			  url("srcset/finger3-0.25.avif") type("image/avif") 1x,
			  url("srcset/finger3-0.5.png") type("image/png") 2x,
			  url("srcset/finger3-0.25.png") type("image/png") 1x
			);
		}
	}

/*duplicate for restarting animation hack */
@keyframes finger-hover
	{
	0%
		{
			background-image: url("srcset/finger1-0.5.png");
			background-image: image-set(
			  url("srcset/finger1-0.5.avif") type("image/avif") 2x,
			  url("srcset/finger1-0.25.avif") type("image/avif") 1x,
			  url("srcset/finger1-0.5.png") type("image/png") 2x,
			  url("srcset/finger1-0.25.png") type("image/png") 1x
			);
		}
	2%
		{
			background-image: url("srcset/finger2-0.5.png");
			background-image: image-set(
			  url("srcset/finger2-0.5.avif") type("image/avif") 2x,
			  url("srcset/finger2-0.25.avif") type("image/avif") 1x,
			  url("srcset/finger2-0.5.png") type("image/png") 2x,
			  url("srcset/finger2-0.25.png") type("image/png") 1x
			);
		}
	8%
		{
			background-image: url("srcset/finger3-0.5.png");
			background-image: image-set(
			  url("srcset/finger3-0.5.avif") type("image/avif") 2x,
			  url("srcset/finger3-0.25.avif") type("image/avif") 1x,
			  url("srcset/finger3-0.5.png") type("image/png") 2x,
			  url("srcset/finger3-0.25.png") type("image/png") 1x
			);
		}
	100%
		{
			background-image: url("srcset/finger3-0.5.png");
			background-image: image-set(
			  url("srcset/finger3-0.5.avif") type("image/avif") 2x,
			  url("srcset/finger3-0.25.avif") type("image/avif") 1x,
			  url("srcset/finger3-0.5.png") type("image/png") 2x,
			  url("srcset/finger3-0.25.png") type("image/png") 1x
			);
		}
	}
	

@keyframes chains
	{
	from
		{
			background-image: url("srcset/chains1-0.5.png");
			background-image: image-set(
			  url("srcset/chains1-0.5.avif") type("image/avif") 2x,
			  url("srcset/chains1-0.25.avif") type("image/avif") 1x,
			  url("srcset/chains1-0.5.png") type("image/png") 2x,
			  url("srcset/chains1-0.25.png") type("image/png") 1x
			);
		}
	to
		{
			background-image: url("srcset/chains2-0.5.png");
			background-image: image-set(
			  url("srcset/chains2-0.5.avif") type("image/avif") 2x,
			  url("srcset/chains2-0.25.avif") type("image/avif") 1x,
			  url("srcset/chains2-0.5.png") type("image/png") 2x,
			  url("srcset/chains2-0.25.png") type("image/png") 1x
			);
		}
	}	
	

@keyframes steam
	{
	0%
		{
			background-image: url("srcset/steam1-0.5.png");
			background-image: image-set(
			  url("srcset/steam1-0.5.avif") type("image/avif") 2x,
			  url("srcset/steam1-0.25.avif") type("image/avif") 1x,
			  url("srcset/steam1-0.5.png") type("image/png") 2x,
			  url("srcset/steam1-0.25.png") type("image/png") 1x
			);
		}
	6%
		{
			background-image: url("srcset/steam2-0.5.png");
			background-image: image-set(
			  url("srcset/steam2-0.5.avif") type("image/avif") 2x,
			  url("srcset/steam2-0.25.avif") type("image/avif") 1x,
			  url("srcset/steam2-0.5.png") type("image/png") 2x,
			  url("srcset/steam2-0.25.png") type("image/png") 1x
			);
		}
	12%
		{
			background-image: url("srcset/steam3-0.5.png");
			background-image: image-set(
			  url("srcset/steam3-0.5.avif") type("image/avif") 2x,
			  url("srcset/steam3-0.25.avif") type("image/avif") 1x,
			  url("srcset/steam3-0.5.png") type("image/png") 2x,
			  url("srcset/steam3-0.25.png") type("image/png") 1x
			);
		}
	13%
		{
			background-image: url("srcset/steam4-0.5.png");
			background-image: image-set(
			  url("srcset/steam4-0.5.avif") type("image/avif") 2x,
			  url("srcset/steam4-0.25.avif") type("image/avif") 1x,
			  url("srcset/steam4-0.5.png") type("image/png") 2x,
			  url("srcset/steam4-0.25.png") type("image/png") 1x
			);
		}
	14%
		{
			background-image: url("srcset/steam5-0.5.png");
			background-image: image-set(
			  url("srcset/steam5-0.5.avif") type("image/avif") 2x,
			  url("srcset/steam5-0.25.avif") type("image/avif") 1x,
			  url("srcset/steam5-0.5.png") type("image/png") 2x,
			  url("srcset/steam5-0.25.png") type("image/png") 1x
			);
		}
	15%
		{
			background-image: url("srcset/steam6-0.5.png");
			background-image: image-set(
			  url("srcset/steam6-0.5.avif") type("image/avif") 2x,
			  url("srcset/steam6-0.25.avif") type("image/avif") 1x,
			  url("srcset/steam6-0.5.png") type("image/png") 2x,
			  url("srcset/steam6-0.25.png") type("image/png") 1x
			);
		}
	16%
		{
			background-image: url("srcset/steam7-0.5.png");
			background-image: image-set(
			  url("srcset/steam7-0.5.avif") type("image/avif") 2x,
			  url("srcset/steam7-0.25.avif") type("image/avif") 1x,
			  url("srcset/steam7-0.5.png") type("image/png") 2x,
			  url("srcset/steam7-0.25.png") type("image/png") 1x
			);
		}
	17%
		{
			background-image: none;
		}
	}

/*duplicate for restarting animation hack */
@keyframes steam-hover
	{
	0%
		{
			background-image: url("srcset/steam1-0.5.png");
			background-image: image-set(
			  url("srcset/steam1-0.5.avif") type("image/avif") 2x,
			  url("srcset/steam1-0.25.avif") type("image/avif") 1x,
			  url("srcset/steam1-0.5.png") type("image/png") 2x,
			  url("srcset/steam1-0.25.png") type("image/png") 1x
			);
		}
	6%
		{
			background-image: url("srcset/steam2-0.5.png");
			background-image: image-set(
			  url("srcset/steam2-0.5.avif") type("image/avif") 2x,
			  url("srcset/steam2-0.25.avif") type("image/avif") 1x,
			  url("srcset/steam2-0.5.png") type("image/png") 2x,
			  url("srcset/steam2-0.25.png") type("image/png") 1x
			);
		}
	12%
		{
			background-image: url("srcset/steam3-0.5.png");
			background-image: image-set(
			  url("srcset/steam3-0.5.avif") type("image/avif") 2x,
			  url("srcset/steam3-0.25.avif") type("image/avif") 1x,
			  url("srcset/steam3-0.5.png") type("image/png") 2x,
			  url("srcset/steam3-0.25.png") type("image/png") 1x
			);
		}
	13%
		{
			background-image: url("srcset/steam4-0.5.png");
			background-image: image-set(
			  url("srcset/steam4-0.5.avif") type("image/avif") 2x,
			  url("srcset/steam4-0.25.avif") type("image/avif") 1x,
			  url("srcset/steam4-0.5.png") type("image/png") 2x,
			  url("srcset/steam4-0.25.png") type("image/png") 1x
			);
		}
	14%
		{
			background-image: url("srcset/steam5-0.5.png");
			background-image: image-set(
			  url("srcset/steam5-0.5.avif") type("image/avif") 2x,
			  url("srcset/steam5-0.25.avif") type("image/avif") 1x,
			  url("srcset/steam5-0.5.png") type("image/png") 2x,
			  url("srcset/steam5-0.25.png") type("image/png") 1x
			);
		}
	15%
		{
			background-image: url("srcset/steam6-0.5.png");
			background-image: image-set(
			  url("srcset/steam6-0.5.avif") type("image/avif") 2x,
			  url("srcset/steam6-0.25.avif") type("image/avif") 1x,
			  url("srcset/steam6-0.5.png") type("image/png") 2x,
			  url("srcset/steam6-0.25.png") type("image/png") 1x
			);
		}
	16%
		{
			background-image: url("srcset/steam7-0.5.png");
			background-image: image-set(
			  url("srcset/steam7-0.5.avif") type("image/avif") 2x,
			  url("srcset/steam7-0.25.avif") type("image/avif") 1x,
			  url("srcset/steam7-0.5.png") type("image/png") 2x,
			  url("srcset/steam7-0.25.png") type("image/png") 1x
			);
		}
	17%
		{
			background-image: none;
		}
	}	


@keyframes birdwing
	{
	0%
		{
			background-image: url("srcset/bird1-0.5.png");
			background-image: image-set(
			  url("srcset/bird1-0.5.avif") type("image/avif") 2x,
			  url("srcset/bird1-0.25.avif") type("image/avif") 1x,
			  url("srcset/bird1-0.5.png") type("image/png") 2x,
			  url("srcset/bird1-0.25.png") type("image/png") 1x
			);
		}
	50%
		{
			background-image: url("srcset/bird2-0.5.png");
			background-image: image-set(
			  url("srcset/bird2-0.5.avif") type("image/avif") 2x,
			  url("srcset/bird2-0.25.avif") type("image/avif") 1x,
			  url("srcset/bird2-0.5.png") type("image/png") 2x,
			  url("srcset/bird2-0.25.png") type("image/png") 1x
			);
		}
	100%
		{
			background-image: url("srcset/bird3-0.5.png");
			background-image: image-set(
			  url("srcset/bird3-0.5.avif") type("image/avif") 2x,
			  url("srcset/bird3-0.25.avif") type("image/avif") 1x,
			  url("srcset/bird3-0.5.png") type("image/png") 2x,
			  url("srcset/bird3-0.25.png") type("image/png") 1x
			);
		}
	}

#visor-wrapper #bird
{
	background-image: url("srcset/bird1-0.5.png");
	background-image: image-set(
	  url("srcset/bird1-0.5.avif") type("image/avif") 2x,
	  url("srcset/bird1-0.25.avif") type("image/avif") 1x,
	  url("srcset/bird1-0.5.png") type("image/png") 2x,
	  url("srcset/bird1-0.25.png") type("image/png") 1x
	);
}



	
}

/*
0.25 is 820px wide
for double resolution, minimum width is 410

3280 / 5846 = 410 / x
3280x = (5846 * 410 ) = 2396860
x = 730.75

If height is 730, width is 410
Which means that 0.25 can be used as double resolution for this height
And 0.125 can be single resolution

*/

@media screen and (max-height: 730px)
{
	#visor-wrapper
	{
		background-image: url("srcset/bg-0.25.png");
		background-image: image-set(
			url("srcset/bg-0.25.avif") type("image/avif") 2x,
			url("srcset/bg-0.125.avif") type("image/avif") 1x,			
			url("srcset/bg-0.25.png") type("image/jpg") 2x,
			url("srcset/bg-0.125.png") type("image/jpg") 1x
		);
	}

	#visor-wrapper #throne
	{
		background-image: url("srcset/throne-and-rocketlauncher-0.25.png");
		background-image: image-set(
			url("srcset/throne-and-rocketlauncher-0.25.avif") type("image/avif") 2x,
			url("srcset/throne-and-rocketlauncher-0.125.avif") type("image/avif") 1x,			
			url("srcset/throne-and-rocketlauncher-0.25.png") type("image/png") 2x,
			url("srcset/throne-and-rocketlauncher-0.125.png") type("image/png") 1x
		);
	}

	#visor-wrapper #visor
	{
		background-image: url("srcset/visor-0.25.png");
		background-image: image-set(
			url("srcset/visor-0.25.avif") type("image/avif") 2x,
			url("srcset/visor-0.125.avif") type("image/avif") 1x,
			url("srcset/visor-0.25.png") type("image/png") 2x,
			url("srcset/visor-0.125.png") type("image/png") 1x
		);
	}
	
	#visor-wrapper #cloud1
	{
		background-image: url("srcset/cloud1-0.25.png");
		background-image: image-set(
			url("srcset/cloud1-0.25.avif") type("image/avif") 2x,
			url("srcset/cloud1-0.125.avif") type("image/avif") 1x,
			url("srcset/cloud1-0.25.png") type("image/png") 2x,
			url("srcset/cloud1-0.125.png") type("image/png") 1x
		);
	}
	
	#visor-wrapper #cloud2
	{
		background-image: url("srcset/cloud2-0.25.png");
		background-image: image-set(
			url("srcset/cloud2-0.25.avif") type("image/avif") 2x,
			url("srcset/cloud2-0.125.avif") type("image/avif") 1x,
			url("srcset/cloud2-0.25.png") type("image/png") 2x,
			url("srcset/cloud2-0.125.png") type("image/png") 1x
		);
	}

	#visor-wrapper #cloud3
	{
		background-image: url("srcset/cloud3-0.25.png");
		background-image: image-set(
			url("srcset/cloud3-0.25.avif") type("image/avif") 2x,
			url("srcset/cloud3-0.125.avif") type("image/avif") 1x,
			url("srcset/cloud3-0.25.png") type("image/png") 2x,
			url("srcset/cloud3-0.125.png") type("image/png") 1x
		);
	}


@keyframes finger
	{
	0%
		{
			background-image: url("srcset/finger1-0.25.png");
			background-image: image-set(
			  url("srcset/finger1-0.25.avif") type("image/avif") 2x,
			  url("srcset/finger1-0.125.avif") type("image/avif") 1x,
			  url("srcset/finger1-0.25.png") type("image/png") 2x,
			  url("srcset/finger1-0.125.png") type("image/png") 1x
			);
		}
	2%
		{
			background-image: url("srcset/finger2-0.25.png");
			background-image: image-set(
			  url("srcset/finger2-0.25.avif") type("image/avif") 2x,
			  url("srcset/finger2-0.125.avif") type("image/avif") 1x,
			  url("srcset/finger2-0.25.png") type("image/png") 2x,
			  url("srcset/finger2-0.125.png") type("image/png") 1x
			);
		}
	8%
		{
			background-image: url("srcset/finger3-0.25.png");
			background-image: image-set(
			  url("srcset/finger3-0.25.avif") type("image/avif") 2x,
			  url("srcset/finger3-0.125.avif") type("image/avif") 1x,
			  url("srcset/finger3-0.25.png") type("image/png") 2x,
			  url("srcset/finger3-0.125.png") type("image/png") 1x
			);
		}
	100%
		{
			background-image: url("srcset/finger3-0.25.png");
			background-image: image-set(
			  url("srcset/finger3-0.25.avif") type("image/avif") 2x,
			  url("srcset/finger3-0.125.avif") type("image/avif") 1x,
			  url("srcset/finger3-0.25.png") type("image/png") 2x,
			  url("srcset/finger3-0.125.png") type("image/png") 1x
			);
		}
	}

/*duplicate for restarting animation hack */
@keyframes finger-hover
	{
	0%
		{
			background-image: url("srcset/finger1-0.25.png");
			background-image: image-set(
			  url("srcset/finger1-0.25.avif") type("image/avif") 2x,
			  url("srcset/finger1-0.125.avif") type("image/avif") 1x,
			  url("srcset/finger1-0.25.png") type("image/png") 2x,
			  url("srcset/finger1-0.125.png") type("image/png") 1x
			);
		}
	2%
		{
			background-image: url("srcset/finger2-0.25.png");
			background-image: image-set(
			  url("srcset/finger2-0.25.avif") type("image/avif") 2x,
			  url("srcset/finger2-0.125.avif") type("image/avif") 1x,
			  url("srcset/finger2-0.25.png") type("image/png") 2x,
			  url("srcset/finger2-0.125.png") type("image/png") 1x
			);
		}
	8%
		{
			background-image: url("srcset/finger3-0.25.png");
			background-image: image-set(
			  url("srcset/finger3-0.25.avif") type("image/avif") 2x,
			  url("srcset/finger3-0.125.avif") type("image/avif") 1x,
			  url("srcset/finger3-0.25.png") type("image/png") 2x,
			  url("srcset/finger3-0.125.png") type("image/png") 1x
			);
		}
	100%
		{
			background-image: url("srcset/finger3-0.25.png");
			background-image: image-set(
			  url("srcset/finger3-0.25.avif") type("image/avif") 2x,
			  url("srcset/finger3-0.125.avif") type("image/avif") 1x,
			  url("srcset/finger3-0.25.png") type("image/png") 2x,
			  url("srcset/finger3-0.125.png") type("image/png") 1x
			);
		}
	}


@keyframes chains
	{
	from
		{
			background-image: url("srcset/chains1-0.25.png");
			background-image: image-set(
			  url("srcset/chains1-0.25.avif") type("image/avif") 2x,
			  url("srcset/chains1-0.125.avif") type("image/avif") 1x,
			  url("srcset/chains1-0.25.png") type("image/png") 2x,
			  url("srcset/chains1-0.125.png") type("image/png") 1x
			);
		}
	to
		{
			background-image: url("srcset/chains2-0.25.png");
			background-image: image-set(
			  url("srcset/chains2-0.25.avif") type("image/avif") 2x,
			  url("srcset/chains2-0.125.avif") type("image/avif") 1x,
			  url("srcset/chains2-0.25.png") type("image/png") 2x,
			  url("srcset/chains2-0.125.png") type("image/png") 1x
			);
		}
	}



@keyframes steam
	{
	0%
		{
			background-image: url("srcset/steam1-0.25.png");
			background-image: image-set(
			  url("srcset/steam1-0.25.avif") type("image/avif") 2x,
			  url("srcset/steam1-0.125.avif") type("image/avif") 1x,
			  url("srcset/steam1-0.25.png") type("image/png") 2x,
			  url("srcset/steam1-0.125.png") type("image/png") 1x
			);
		}
	6%
		{
			background-image: url("srcset/steam2-0.25.png");
			background-image: image-set(
			  url("srcset/steam2-0.25.avif") type("image/avif") 2x,
			  url("srcset/steam2-0.125.avif") type("image/avif") 1x,
			  url("srcset/steam2-0.25.png") type("image/png") 2x,
			  url("srcset/steam2-0.125.png") type("image/png") 1x
			);
		}
	12%
		{
			background-image: url("srcset/steam3-0.25.png");
			background-image: image-set(
			  url("srcset/steam3-0.25.avif") type("image/avif") 2x,
			  url("srcset/steam3-0.125.avif") type("image/avif") 1x,
			  url("srcset/steam3-0.25.png") type("image/png") 2x,
			  url("srcset/steam3-0.125.png") type("image/png") 1x
			);
		}
	13%
		{
			background-image: url("srcset/steam4-0.25.png");
			background-image: image-set(
			  url("srcset/steam4-0.25.avif") type("image/avif") 2x,
			  url("srcset/steam4-0.125.avif") type("image/avif") 1x,
			  url("srcset/steam4-0.25.png") type("image/png") 2x,
			  url("srcset/steam4-0.125.png") type("image/png") 1x
			);
		}
	14%
		{
			background-image: url("srcset/steam5-0.25.png");
			background-image: image-set(
			  url("srcset/steam5-0.25.avif") type("image/avif") 2x,
			  url("srcset/steam5-0.125.avif") type("image/avif") 1x,
			  url("srcset/steam5-0.25.png") type("image/png") 2x,
			  url("srcset/steam5-0.125.png") type("image/png") 1x
			);
		}
	15%
		{
			background-image: url("srcset/steam6-0.25.png");
			background-image: image-set(
			  url("srcset/steam6-0.25.avif") type("image/avif") 2x,
			  url("srcset/steam6-0.125.avif") type("image/avif") 1x,
			  url("srcset/steam6-0.25.png") type("image/png") 2x,
			  url("srcset/steam6-0.125.png") type("image/png") 1x
			);
		}
	16%
		{
			background-image: url("srcset/steam7-0.25.png");
			background-image: image-set(
			  url("srcset/steam7-0.25.avif") type("image/avif") 2x,
			  url("srcset/steam7-0.125.avif") type("image/avif") 1x,
			  url("srcset/steam7-0.25.png") type("image/png") 2x,
			  url("srcset/steam7-0.125.png") type("image/png") 1x
			);
		}
	17%
		{
			background-image: none;
		}
	}

/*duplicate for restarting animation hack */
@keyframes steam-hover
	{
	0%
		{
			background-image: url("srcset/steam1-0.25.png");
			background-image: image-set(
			  url("srcset/steam1-0.25.avif") type("image/avif") 2x,
			  url("srcset/steam1-0.125.avif") type("image/avif") 1x,
			  url("srcset/steam1-0.25.png") type("image/png") 2x,
			  url("srcset/steam1-0.125.png") type("image/png") 1x
			);
		}
	6%
		{
			background-image: url("srcset/steam2-0.25.png");
			background-image: image-set(
			  url("srcset/steam2-0.25.avif") type("image/avif") 2x,
			  url("srcset/steam2-0.125.avif") type("image/avif") 1x,
			  url("srcset/steam2-0.25.png") type("image/png") 2x,
			  url("srcset/steam2-0.125.png") type("image/png") 1x
			);
		}
	12%
		{
			background-image: url("srcset/steam3-0.25.png");
			background-image: image-set(
			  url("srcset/steam3-0.25.avif") type("image/avif") 2x,
			  url("srcset/steam3-0.125.avif") type("image/avif") 1x,
			  url("srcset/steam3-0.25.png") type("image/png") 2x,
			  url("srcset/steam3-0.125.png") type("image/png") 1x
			);
		}
	13%
		{
			background-image: url("srcset/steam4-0.25.png");
			background-image: image-set(
			  url("srcset/steam4-0.25.avif") type("image/avif") 2x,
			  url("srcset/steam4-0.125.avif") type("image/avif") 1x,
			  url("srcset/steam4-0.25.png") type("image/png") 2x,
			  url("srcset/steam4-0.125.png") type("image/png") 1x
			);
		}
	14%
		{
			background-image: url("srcset/steam5-0.25.png");
			background-image: image-set(
			  url("srcset/steam5-0.25.avif") type("image/avif") 2x,
			  url("srcset/steam5-0.125.avif") type("image/avif") 1x,
			  url("srcset/steam5-0.25.png") type("image/png") 2x,
			  url("srcset/steam5-0.125.png") type("image/png") 1x
			);
		}
	15%
		{
			background-image: url("srcset/steam6-0.25.png");
			background-image: image-set(
			  url("srcset/steam6-0.25.avif") type("image/avif") 2x,
			  url("srcset/steam6-0.125.avif") type("image/avif") 1x,
			  url("srcset/steam6-0.25.png") type("image/png") 2x,
			  url("srcset/steam6-0.125.png") type("image/png") 1x
			);
		}
	16%
		{
			background-image: url("srcset/steam7-0.25.png");
			background-image: image-set(
			  url("srcset/steam7-0.25.avif") type("image/avif") 2x,
			  url("srcset/steam7-0.125.avif") type("image/avif") 1x,
			  url("srcset/steam7-0.25.png") type("image/png") 2x,
			  url("srcset/steam7-0.125.png") type("image/png") 1x
			);
		}
	17%
		{
			background-image: none;
		}
	}	
	
@keyframes birdwing
	{
	0%
		{
			background-image: url("srcset/bird1-0.25.png");
			background-image: image-set(
			  url("srcset/bird1-0.25.avif") type("image/avif") 2x,
			  url("srcset/bird1-0.125.avif") type("image/avif") 1x,
			  url("srcset/bird1-0.25.png") type("image/png") 2x,
			  url("srcset/bird1-0.125.png") type("image/png") 1x
			);
		}
	50%
		{
			background-image: url("srcset/bird2-0.25.png");
			background-image: image-set(
			  url("srcset/bird2-0.25.avif") type("image/avif") 2x,
			  url("srcset/bird2-0.125.avif") type("image/avif") 1x,
			  url("srcset/bird2-0.25.png") type("image/png") 2x,
			  url("srcset/bird2-0.125.png") type("image/png") 1x
			);
		}
	100%
		{
			background-image: url("srcset/bird3-0.25.png");
			background-image: image-set(
			  url("srcset/bird3-0.25.avif") type("image/avif") 2x,
			  url("srcset/bird3-0.125.avif") type("image/avif") 1x,
			  url("srcset/bird3-0.25.png") type("image/png") 2x,
			  url("srcset/bird3-0.125.png") type("image/png") 1x
			);
		}
	}

#visor-wrapper #bird
{
	background-image: url("srcset/bird1-0.25.png");
	background-image: image-set(
	  url("srcset/bird1-0.25.avif") type("image/avif") 2x,
	  url("srcset/bird1-0.125.avif") type("image/avif") 1x,
	  url("srcset/bird1-0.25.png") type("image/png") 2x,
	  url("srcset/bird1-0.125.png") type("image/png") 1x
	);
}

}

/*
0.125 is 410px wide
for double resolution, minimum width is 205

3280 / 5846 = 205 / x
3280x = (5846 * 205 ) = 1198430
x = 365.375

If height is 365, width is 205
Which means that 0.125 can be used as double resolution for this height
And anything smaller is silly

For preload uh

3280 / 5846 = x / 100vh
3280 * 100vh = 5846x
(3280 / 5846) * 100vh = x
x = 56.1vh

*/


@media screen and (max-height: 365px)
{

	#visor-wrapper
	{
		background-image: url("srcset/bg-0.125.png");
		background-image: image-set(
			url("srcset/bg-0.125.avif") type("image/avif"),
			url("srcset/bg-0.125.png") type("image/jpg")
		);
	}

	#visor-wrapper #throne
	{
		background-image: url("srcset/throne-and-rocketlauncher-0.125.png");
		background-image: image-set(
			url("srcset/throne-and-rocketlauncher-0.125.avif") type("image/avif"),
			url("srcset/throne-and-rocketlauncher-0.125.png") type("image/png")
		);
	}

	#visor-wrapper #visor
	{
		background-image: url("srcset/visor-0.125.png");
		background-image: image-set(
			url("srcset/visor-0.125.avif") type("image/avif"),
			url("srcset/visor-0.125.png") type("image/png")
		);
	}
	
	#visor-wrapper #cloud1
	{
		background-image: url("srcset/cloud1-0.125.png");
		background-image: image-set(
			url("srcset/cloud1-0.125.avif") type("image/avif"),
			url("srcset/cloud1-0.125.png") type("image/png")
		);
	}
	
	#visor-wrapper #cloud2
	{
		background-image: url("srcset/cloud2-0.125.png");
		background-image: image-set(
			url("srcset/cloud2-0.125.avif") type("image/avif"),
			url("srcset/cloud2-0.125.png") type("image/png")
		);
	}

	#visor-wrapper #cloud3
	{
		background-image: url("srcset/cloud3-0.125.png");
		background-image: image-set(
			url("srcset/cloud3-0.125.avif") type("image/avif"),
			url("srcset/cloud3-0.125.png") type("image/png")
		);
	}


@keyframes finger
	{
	0%
		{
			background-image: url("srcset/finger1-0.125.png");
			background-image: image-set(
			  url("srcset/finger1-0.125.avif") type("image/avif"),
			  url("srcset/finger1-0.125.png") type("image/png")
			);
		}
	2%
		{
			background-image: url("srcset/finger2-0.125.png");
			background-image: image-set(
			  url("srcset/finger2-0.125.avif") type("image/avif"),
			  url("srcset/finger2-0.125.png") type("image/png")
			);
		}
	8%
		{
			background-image: url("srcset/finger3-0.125.png");
			background-image: image-set(
			  url("srcset/finger3-0.125.avif") type("image/avif"),
			  url("srcset/finger3-0.125.png") type("image/png")
			);
		}
	100%
		{
			background-image: url("srcset/finger3-0.125.png");
			background-image: image-set(
			  url("srcset/finger3-0.125.avif") type("image/avif"),
			  url("srcset/finger3-0.125.png") type("image/png")
			);
		}
	}

/*duplicate for restarting animation hack */
@keyframes finger-hover
	{
	0%
		{
			background-image: url("srcset/finger1-0.125.png");
			background-image: image-set(
			  url("srcset/finger1-0.125.avif") type("image/avif"),
			  url("srcset/finger1-0.125.png") type("image/png")
			);
		}
	2%
		{
			background-image: url("srcset/finger2-0.125.png");
			background-image: image-set(
			  url("srcset/finger2-0.125.avif") type("image/avif"),
			  url("srcset/finger2-0.125.png") type("image/png")
			);
		}
	8%
		{
			background-image: url("srcset/finger3-0.125.png");
			background-image: image-set(
			  url("srcset/finger3-0.125.avif") type("image/avif"),
			  url("srcset/finger3-0.125.png") type("image/png")
			);
		}
	100%
		{
			background-image: url("srcset/finger3-0.125.png");
			background-image: image-set(
			  url("srcset/finger3-0.125.avif") type("image/avif"),
			  url("srcset/finger3-0.125.png") type("image/png")
			);
		}
	}


@keyframes chains
	{
	from
		{
			background-image: url("srcset/chains1-0.125.png");
			background-image: image-set(
			  url("srcset/chains1-0.125.avif") type("image/avif"),
			  url("srcset/chains1-0.125.png") type("image/png")
			);
		}
	to
		{
			background-image: url("srcset/chains2-0.125.png");
			background-image: image-set(
			  url("srcset/chains2-0.125.avif") type("image/avif"),
			  url("srcset/chains2-0.125.png") type("image/png")
			);
		}
	}


@keyframes steam
	{
	0%
		{
			background-image: url("srcset/steam1-0.125.png");
			background-image: image-set(
			  url("srcset/steam1-0.125.avif") type("image/avif"),
			  url("srcset/steam1-0.125.png") type("image/png")
			);
		}
	6%
		{
			background-image: url("srcset/steam2-0.125.png");
			background-image: image-set(
			  url("srcset/steam2-0.125.avif") type("image/avif"),
			  url("srcset/steam2-0.125.png") type("image/png")
			);
		}
	12%
		{
			background-image: url("srcset/steam3-0.125.png");
			background-image: image-set(
			  url("srcset/steam3-0.125.avif") type("image/avif"),
			  url("srcset/steam3-0.125.png") type("image/png")
			);
		}
	13%
		{
			background-image: url("srcset/steam4-0.125.png");
			background-image: image-set(
			  url("srcset/steam4-0.125.avif") type("image/avif"),
			  url("srcset/steam4-0.125.png") type("image/png")
			);
		}
	14%
		{
			background-image: url("srcset/steam5-0.125.png");
			background-image: image-set(
			  url("srcset/steam5-0.125.avif") type("image/avif"),
			  url("srcset/steam5-0.125.png") type("image/png")
			);
		}
	15%
		{
			background-image: url("srcset/steam6-0.125.png");
			background-image: image-set(
			  url("srcset/steam6-0.125.avif") type("image/avif"),
			  url("srcset/steam6-0.125.png") type("image/png")
			);
		}
	16%
		{
			background-image: url("srcset/steam7-0.125.png");
			background-image: image-set(
			  url("srcset/steam7-0.125.avif") type("image/avif"),
			  url("srcset/steam7-0.125.png") type("image/png")
			);
		}
	17%
		{
			background-image: none;
		}
	}

/*duplicate for restarting animation hack */
@keyframes steam-hover
	{
	0%
		{
			background-image: url("srcset/steam1-0.125.png");
			background-image: image-set(
			  url("srcset/steam1-0.125.avif") type("image/avif"),
			  url("srcset/steam1-0.125.png") type("image/png")
			);
		}
	6%
		{
			background-image: url("srcset/steam2-0.125.png");
			background-image: image-set(
			  url("srcset/steam2-0.125.avif") type("image/avif"),
			  url("srcset/steam2-0.125.png") type("image/png")
			);
		}
	12%
		{
			background-image: url("srcset/steam3-0.125.png");
			background-image: image-set(
			  url("srcset/steam3-0.125.avif") type("image/avif"),
			  url("srcset/steam3-0.125.png") type("image/png")
			);
		}
	13%
		{
			background-image: url("srcset/steam4-0.125.png");
			background-image: image-set(
			  url("srcset/steam4-0.125.avif") type("image/avif"),
			  url("srcset/steam4-0.125.png") type("image/png")
			);
		}
	14%
		{
			background-image: url("srcset/steam5-0.125.png");
			background-image: image-set(
			  url("srcset/steam5-0.125.avif") type("image/avif"),
			  url("srcset/steam5-0.125.png") type("image/png")
			);
		}
	15%
		{
			background-image: url("srcset/steam6-0.125.png");
			background-image: image-set(
			  url("srcset/steam6-0.125.avif") type("image/avif"),
			  url("srcset/steam6-0.125.png") type("image/png")
			);
		}
	16%
		{
			background-image: url("srcset/steam7-0.125.png");
			background-image: image-set(
			  url("srcset/steam7-0.125.avif") type("image/avif"),
			  url("srcset/steam7-0.125.png") type("image/png")
			);
		}
	17%
		{
			background-image: none;
		}
	}
	
	
@keyframes birdwing
	{
	0%
		{
			background-image: url("srcset/bird1-0.125.png");
			background-image: image-set(
			  url("srcset/bird1-0.125.avif") type("image/avif"),
			  url("srcset/bird1-0.125.png") type("image/png")
			);
		}
	50%
		{
			background-image: url("srcset/bird2-0.125.png");
			background-image: image-set(
			  url("srcset/bird2-0.125.avif") type("image/avif"),
			  url("srcset/bird2-0.125.png") type("image/png")
			);
		}
	100%
		{
			background-image: url("srcset/bird3-0.125.png");
			background-image: image-set(
			  url("srcset/bird3-0.125.avif") type("image/avif"),
			  url("srcset/bird3-0.125.png") type("image/png")
			);
		}
	}

#visor-wrapper #bird
{
	background-image: url("srcset/bird1-0.125.png");
	background-image: image-set(
	  url("srcset/bird1-0.125.avif") type("image/avif"),
	  url("srcset/bird1-0.125.png") type("image/png")
	);
}



}