/* Fonts used in the site */
@font-face {
  font-family: "OverpassMono";
  src: url(fonts/OverpassMono-VariableFont_wght.ttf);
}

/* Main styling */
body {
	background-color: gray;
	overflow: hidden;
	color: white;
	width: 600px;
	margin: auto;
	font-family: "OverpassMono", "Roboto", "Calibri", "Arial";
}

h1 {
	text-align: center;
	font-size: 300%;
}

footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   height: 50px;
   background-color: black;
   color: white;
   text-align: center;
}

footer img , footer svg {
	aspect-ratio: 1 / 1;
	height: 100%;
	padding: 0px 10px 0px 10px;
}


/* Mobile changes */
@media (orientation: portrait) and (max-width: 1000px) {
	body {
		width: 100%;
		font-size: 150%;
	}

	main {
		padding: 0px 20px 0px 20px;
	}

	footer {
		height: 100px;
	}
}



/* Scrolling background stuff */
.scrollContainer {
	overflow: hidden;
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	width: 100vw;
	height: 100vh;
	z-index: -999;
}

.scrollGuy {
	background-image: url(assets/theguy.png);
	height: calc(100vh + 256px);
	width: calc(100vw + 256px);
	animation: slide 5s linear infinite;
}

@keyframes slide{
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-256px, -256px, 0);
  }
}