@import url('https://fonts.googleapis.com/css2?family=Nunito&family=Righteous&display=swap');

html{
	overflow-x: hidden;
}

nav
{
	background-color:black;
	height:6rem;
	width:100%;

	left:0;
	z-index:2;
}

h1, h2, h3, h4{
	font-family: 'Righteous', serif;
}

h2{
	border-bottom: 0.5rem solid orangered;
	width:50vw;
	margin-top:4rem;
	font-size:3rem;
	margin-bottom:0rem;
}

p{
	
	width:50vw;
	font-size:1.5rem;
}

nav ul
{
	display:flex;
	justify-content:space-around;
	list-style-type:none;
	padding:0;
	margin:0 auto;
	align-items:center;
	height:6rem;
	width:60%;
}

nav ul li
{
	padding:3rem;
	font-family: 'Righteous', serif;
	font-size:100%;
	margin:0;
	text-align:center;
}

a
{
	color:orangered;
}

body{
	padding:0;
	margin:0;
}

h1{
	font-size:clamp(3rem, 8vw, 40rem);
	margin:0;
	padding:1rem 0;
	padding-bottom:2rem;
	padding-left:1rem;
	text-align:left;
}

header{
	background-color:orangered;
	padding:0;
	margin:0;
}

main{
	background-color:white;
	min-height:100vh;
	z-index:1;
	position:relative;
	padding:1rem;
}

@media screen and (max-width: 1000px) {
	img{
		display:none;
		right: 10000vw;
	}
	
	h2, p{
	width:75vw;
	}
}

@media screen and (max-width: 600px) {
	h2, p{
	text-align: center;
	margin-left:auto;
	margin-right:auto;
	}
	main{
	margin-left:auto;
	margin-right:auto;
	}
	li{
	margin-bottom:2rem;
	}
	ul{
	list-style:none;
	padding-left:0;
	margin-left:0;
	}
	nav ul li
	{
	padding:5vw;
	}
}

img{
	position:absolute;
	right:-25vw;
	width:50vw;
}

#gear1{
	animation-name:gearSpin1;
	animation-duration: 10s;
	animation-iteration-count:infinite;
	animation-timing-function: ease-in-out;
}

#gear2{
	animation-name:gearSpin2;
	animation-duration: 10s;
	animation-iteration-count:infinite;
	animation-timing-function: ease-in-out;
	animation-direction: reverse;
	top:48vw;
}

@keyframes gearSpin1{
	from {transform:rotate(0deg);}
	to {transform:rotate(360deg);}
}

@keyframes gearSpin2{
	from {transform:rotate(15deg);}
	to {transform:rotate(375deg);}
}