body {
	background-image: url('background.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
	margin: 0;
	padding: 0;
	height: 100vh;
	width: 100vw;
}
footer{
	color:#aaa;
	width: 90%;
	padding-left: 5%;
	padding-right: 5%;
	text-align: right;
	font-size: 1vw;
	text-shadow: 1px 1px 2px #222;
}
h1{
	font-family: "Bangers", system-ui;
	font-weight: 400;
	font-style: normal;
	text-shadow: 2px 2px 3px #000;
}
h2{
	font-family: "Bangers", system-ui;
	font-weight: 400;
	font-style: normal;
	text-shadow: 2px 2px 3px #000;
}
main{
	padding: min(6em, 10%);
	background-color: rgba(0, 0, 0, 0.5);
	color:#fff;
}
p{
	font-family: "Helvetica Neue", Arial, system-ui;
	font-weight: 400;
	font-style: normal;
}
p a{
	text-decoration:none;
	font-weight: bold;
	color: #fff;
}
.pictures{
	float:right;
	margin-right:1%;
	margin-top:1%;
}
.pictures a{
	text-decoration:none;
	font-family: "Rubik Dirt", system-ui;
	font-weight: 400;
	font-style: normal;
	font-size:3vh;
	color: #aaa;
}
.pictures a:hover{
	color:#564a3c;
}

@media screen and (max-width:640px){
.logo img{
	width:60vw;

	}
footer{
	font-size: 2.5vw;
}
}
@media screen and (min-width:641px){
.logo img{
	width:50vw;
}
footer{
	font-size: 2.5vw;
}
}
@media screen and (min-width:701px){
.logo img{
	width:40vw;
}
footer{
	font-size: 2vw;
}
}
@media screen and (min-width:801px){
.logo img{
	width:30vw;
}
footer{
	font-size: 1vw;
}
}
/*	padding: min(5em, 8%);
	This function examines the site and then decides which one to apply, depending on the window size (i.e. 5em or 8% of the parent element)
	font-size: 1.5rem; (this is 1.5 times the size of the default)
	rem is reletive to the root element's font size. The default root element font size is 16px. So 1.5rem equals 24px (i.e 16px + 8px)
	font-size: clamp(1.8rem, 10vw, 5rem);
	Clamp function stipulates the minimum size, the optimum size, and the maximum size. It will always use 10vw so long as the minimum or maximum aren't reached. But the font zoom does not work, using exclusively.
	font-size: clamp(1.8rem, calc(7vw + 1rem), 5rem);
	This enables zooming (or scaling)
	Define the height and width of an image to conform to SEO and allow the browser to make room for the pic while it's loading.
	img {max-width:100%; height: auto; aspect-ratio: 1/1; object-fit: cover;} COMBINED WITH <img height="500" width="750" src="blah blah.jpg" alt="blah blah pic">
	aspect-ratio can be used to adjust to different settings (like 16 / 9). Object-fit: cover maintains the aspect ratio, but ensures that the pic doesn't stretch when adjusted. It zooms in to compensate.
	.element{ height: 100vh; height: 100dvh;}
	The dvh element (dynamic viewport height) ensures that the sizing works properly on a smartphone, as it accounts for the space reserved for a url header. The broswer will ignore the vh and use dvh instead.
	nav{ position: absolute; right: -16em; transition: right 200ms ease-in-out;}
	nav.show{right:0;} toggle these two classes using JS. This will create a in-out transition for any nav bar that you decide to hide to the right. The java is shown on the video: https://www.youtube.com/watch?v=2IV08sP9m3U
*/