body {
	margin: 0;
	padding: 0;
	font-family: Lato;
	font-size: 1.5vh;
	background-color: black;
	/*Background image things*/
	background-image: url("assets/homepage.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

html, body {
	height: 100%;
	margin: 0;
}

body {
	display: flex;
	justify-content: center; /*horizontal*/
	align-items: center; /*vertical*/
}

main {
	display: grid;
	grid-template-columns: 1fr 1fr;
	justify-content: center;
	align-items: center;

	gap: 50vw;
	bottom: 50vh;
}

main img {
	height: 15vh;
}

/*Highlight datalist hover*/
.arrows a img {
	opacity: 0.6;
	transition: opacity 0.3s ease;
}

.arrows a:hover img {
	opacity: 1;
}

footer {
	font-size: 30px;
	position: fixed;
	bottom: 0;
	width: 100%;
	background-color: black;
	color: white;
	padding: 0px 5vw;
	margin: auto 0;
	justify-content: space-between;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	box-sizing: border-box;
}

footer p {
	justify-self: start;
}

footer img {
	justify-self: center;

	height: 4vh;
	margin: 0 auto;
}

.socials {
	justify-self: center;

	list-style: none; /*eliminates things like bullet points*/

	display: flex;
	margin-left: auto;
	gap: 0.5vh;
}

a {
	color: white; /* text color */
}