.vt323-regular {
  font-family: "VT323", serif;
  font-weight: 400;
  font-style: normal;
}
.silkscreen-regular {
  font-family: "Silkscreen", serif;
  font-weight: 400;
  font-style: normal;
}

.silkscreen-bold {
  font-family: "Silkscreen", serif;
  font-weight: 700;
  font-style: normal;
}

body{
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		display: flex;
}
#background1 {
	background-image: url("assets/indexbackground.png");
	background-size: 500px 1000px;
	border-style: solid;
	border-color: green;
	border-width: 2px;
	animation: anim-3 120s infinite linear;
	margin: 0;
		padding: 0;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
		
}
#backgroundmenu {
	background-image: url("assets/indexbackground.png");
	background-size: 500px 1000px;
	border-style: solid;
	border-color: green;
	border-width: 2px;
	animation: anim-2 60s infinite linear;
	margin: 0;
		padding: 0;
		box-sizing: border-box;
		display: block;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
		
}
#background2 {
	background-color: rgba(0, 0, 0, 0.5);
	width: 500px;
    height: 100vh;
	background-size: auto;
	background-repeat: repeat;
	border-style: solid;
	border-color: red;
	border-width: 0px;
	border-radius: 0%;
	animation: anim-4 10s infinite linear;
}
#background3 {
	animation: anim-4 60s infinite linear;
	background-image: url("assets/dither.png");
	background-size: 450px 250px;
	width: 450px;
    height: 250px;
	
}
#infostable {
	background-image: url("assets/infoborder.gif");
	background-size: 450px 250px;
	width: 450px;
    height: 250px;
}
#test {
	display: inline-flex; 
	margin-bottom: 0px;
	animation: anim-8 1.2s ease-in-out;
	height: 200px;
    margin-top: -1em;
}
#large {
	align-self: center;
	width: 720px;
    height: 100vh;
    margin-top: 10vh;
	display: inline-flex; 
	animation: anim-6 10s infinite linear;
	margin-left: 30px;
	margin-right: 30px;
}
#large2 {
	align-self: top;
	background-size: 200px 200px;
	width: 100vw;
    height: 100vh;
    margin-top: 0vh;
	display: inline-flex; 
	animation: anim-6 1s infinite linear;
	position:fixed;
}
#large3 {
	align-self: top;
	background-size: 100vw 100vh;
	width: 100vw;
    height: 100vh;
    margin-top: -50vh;
	display: inline-flex; 
	position:fixed;
	z-index:-3; 
	opacity:0.4;
	transition: opacity 2s; 
}
#large4 {
	align-self: top;
	background-color: rgba(0, 0, 0, 1);
	width: 500vw;
    height: 500vh;
    margin-top: -300vh;
	display: inline-flex; 
	animation: anim-6 1s infinite linear;
	position:fixed;
	z-index:3; 
	opacity:1;
	transition: opacity 2s; 
}
#pendulum {
	position:fixed;
	width: 120px;
    height: 1120px;
    margin-top: -615px;
	z-index: 1;
	animation: pendulumanim 1.8s infinite ease-in-out;
}
#escgear {
	position:fixed;
	width: 200px;
    height: 200px;
    margin-top: -120px;
	z-index: 0;
	left: 50vw;
	margin-left: -50px;
	animation: coganim 9.9s infinite ease-in-out;
}
#whydoesntthestylejsthingwork {
	left: -0vw;
	position:fixed;
	z-index:1; 
}
#whydoesntthestylejsthingwork2 {
	left: -0vw;
	position:fixed;
	z-index:2; 
}
#large3:hover {
	opacity:0.4;
	transition: opacity 2s; 
}
#wheel:hover {
	animation: anim-1 0.1s infinite linear;
	 animation-fill-mode: fowards
}

#wheel {
	margin-top: 0%;
	animation: anim-1 10s infinite linear;
	 animation-fill-mode: fowards;
}
#wheelnav {
	margin-top: 0%;
	animation: anim-1 10s infinite linear;
	 animation-fill-mode: fowards;
	 position:fixed;
	 top: 20px;
	 left: 20px;
	 align-self: left;
	 float:left;
	 transition: width 1s, height 1s, left 1s, top 1s;
	 z-index: 5;
}
#navbar {
	margin-top: 0%;
	 position:fixed;
	 align-self: left;
	 float:left;
	 background-color: rgba(0, 0, 0, 0.5);
	background-size: auto;
	box-shadow: inset 0 0 0 1000px rgba(0,0,0);
	width: 200px;
	height: 50px;
	top: 20px;
	 left: 70px;
	 z-index:-1; 
}
#wheelnav:hover {
	width:75px;
	height:75px;
	animation: anim-1 0.1s infinite linear;
	animation-fill-mode: fowards
}
#hamborger {
	margin-top: 0%;
	 position:fixed;
	 align-self: left;
	 float:left;
	 background-color: rgba(0, 0, 0, 0.5);
	background-size: auto;
	box-shadow: inset 0 0 0 1000px rgba(0,0,0);
	width: 50px;
	height: 0px;
	top: 60px;
	 left: 20px;
	  z-index:-1; 
	  transition: 2s;
}
#infos {
	 position:flex;
	 align-self: left;
	 float:left;
	 opacity: 0;
	width: 50px;
	height: 0px;
	margin-top: 20px;
	 z-index:1; 
	 transition: 2s;
}
#credits {
	 position:flex;
	 align-self: left;
	 float:left;
	 opacity: 0;
	width: 50px;
	height: 0px;
	margin-top: 5px;
	 z-index:1; 
	 transition: 2s;
}
#credits:hover {
	animation: spinny3d 1s linear;
	animation-iteration-count: infinite;
}
#infos:hover {
	animation: spinny3d 1s linear;
	animation-iteration-count: infinite;
}
#stars {
	margin-top: 0%;
	position:fixed;
	animation: anim-1 0.1s infinite linear;
	 animation-fill-mode: fowards;
	 top: 7px;
	 left: 7px;
	 align-self: left;
	 float:left;
	  z-index:-1; 
	  width: 75px;
	height: 75px;
	border-style: solid;
	border-color: green;
	border-width: 0px;
}
#window {
	background-color: rgba(0, 0, 0, 0.3);
	background-size: auto;
	box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);
	opacity: 0;
	width: 0px;
	height: 100px;
}
#boundaries {
	width: 100w;
    height: 100vh;
	z-index:1
}

h1 { color: white;
	 font-size: 25px;
	 margin: 0;
	 padding: 0;
	 animation: anim-7 10s infinite ease-in-out;
	 animation-fill-mode: fowards ;
	 font-family: "Silkscreen", serif;
	font-weight: 400;
	font-style: normal;
	 margin-top: 20px;
	 padding-top: 40px;
	 padding-bottom: 40px;
	 
}
h2 { color: white;
	 font-size: 20px;
	 margin: 0;
	 padding: 0; 
	 font-family: "Silkscreen", serif;
	font-weight: 400;
	font-style: normal;
	 animation: anim-7 10s infinite linear;
}
h3 { color: white;
	 font-size: 20px;
	 margin: 0;
	 padding: 40;
	 animation: anim-5 5s infinite ease-in-out;
	 animation-fill-mode: fowards ;
	 font-family: "Silkscreen", serif;
	 font-weight: 400;
	 font-style: normal;
}
h4 { color: white;
	 font-size: 12px;
	 margin: 0;
	 padding: 0; 
	 font-family: "Silkscreen", serif;
	font-weight: 400;
	font-style: normal;
	 animation: anim-7 10s infinite linear;
	 text-align: right;
}
#text4 { color: white;
	 font-size: 50px;
	 margin: 0;
	 padding: 0; 
	 font-family: "Silkscreen", serif;
	font-weight: 400;
	font-style: normal;
	position:fixed;
	 animation: anim-7 10s infinite linear;
	 z-index: 5;
	 left: 10px;
	 top: 10px;
}
#text5 { color: white;
	 font-size: 50px;
	 margin: 0;
	 padding: 0; 
	 font-family: "Silkscreen", serif;
	font-weight: 400;
	font-style: normal;
	position:fixed;
	 animation: anim-7 10s infinite linear;
	 z-index: 5;
	 right: 10px;
	 bottom: 10px;
	 align-self: right;
}
a {
	color: white;
}

@keyframes anim-1 {
	0%
	{
	transform: rotate(360deg);
	}
	
}	
@keyframes anim-2 {
	0% {
	background-position: -200% 200%;
	}
}	

@keyframes anim-3 {
	0% {
	background-position: 0% 1000px;
	}
}	
@keyframes anim-4 {
	0% {
	background-position: 0% -200px;
	}
}	
@keyframes anim-5 {
	0% {
	transform: translateY(25px); color: white;
	}
	
	25% {
	transform: translateY(-25px) translateX(-5px); color: red; 
	}
	
	50% {
	transform: translateY(25px) translateX(-0px);  color: red;
	}
	
	75% {
	transform: translateY(-25px) translateX(5px);  color: white;
	}
	
	100% {
	transform: translateY(25px) translateX(0px);  color: white;
	}
}	
@keyframes anim-6 {
	0% {
	background-position: 100px -100px;
	}
	
}	

@keyframes pendulumanim {
	0% {
	transform: rotate(20deg);
	}
	50% {
	transform: rotate(-20deg);
	}
	100% {
	transform: rotate(20deg);
	}
	
}	

@keyframes coganim {
	0% {
	transform: rotate(0deg);
	}
	4.54% {
	transform: rotate(5.4deg);
	}
	9.09% {
	transform: rotate(5.4deg);
	}
	13.6% {
	transform: rotate(10.9deg);
	}
	18.18% {
	transform: rotate(10.9deg);
	}
	22.72% {
	transform: rotate(16.3deg);
	}
	27.27% {
	transform: rotate(16.3deg);
	}
	31.81% {
	transform: rotate(21.8deg);
	}
	36.36% {
	transform: rotate(21.8deg);
	}
	40.90% {
	transform: rotate(27.2deg);
	}
	45.45% {
	transform: rotate(27.2deg);
	}
	50% {
	transform: rotate(32.7deg);
	}
	54.54% {
	transform: rotate(32.7deg);
	}
	59.09% {
	transform: rotate(38.1deg);
	}
	63.63% {
	transform: rotate(38.1deg);
	}
	68.18% {
	transform: rotate(43.6deg);
	}
	72.72% {
	transform: rotate(43.6deg);
	}
	77.27% {
	transform: rotate(49.0deg);
	}
	81.81% {
	transform: rotate(49.0deg);
	}
	86.36% {
	transform: rotate(54.5deg);
	}
	90.90% {
	transform: rotate(54.5deg);
	}
	95.45% {
	transform: rotate(60deg);
	}
	100% {
	transform: rotate(60deg);
	}
	
}	
@keyframes anim-7 {
	0%
	{
	border-color: rgba(255, 0, 0); color: rgba(255, 0, 0); 
	}
	14.2%
	{
	border-color: rgba(255, 255, 0); color: rgba(255, 255, 0);
	}
	28.4%
	{
	border-color: rgba(0, 255, 0); color: rgba(0, 255, 0);
	}
	42.6%
	{
	border-color: rgba(0, 255, 255); color: rgba(0, 255, 255);
	}
	56.8%
	{
	border-color: rgba(0, 0, 255); color: rgba(0, 0, 255);
	}
	85.2%
	{
	border-color: rgba(255, 0, 255); color: rgba(255, 0, 255);
	}
	100%
	{
	border-color: rgba(255, 0, 0); color: rgba(255, 0, 0);
	}
	
}	
@keyframes anim-8 {
	0% {
	height: 0%;
    margin-top: 0;
	}
	100% {
	height: 260px;
    margin-top: -1em;
	}
	
}

@keyframes spinny3d {
	from {transform: rotateY(-360deg);}
	to {transform: rotateY(360deg);}
}