@import url("reset.css");


html {
	background-image: url("images/stars-over-forest.jpg");
	background-size: cover;
}

body {
	display: block;
	font-family: sans-serif;
	background-image: none;
	background-color: #ffffff00;
	color: #ffffff;
	backdrop-filter: blur(4px);
}

.navigation {
	display: flex;
	background-color: #141414;
	width: 100%;
	line-height: 3rem;
}

.navlink {
	position: relative;
	color: #ffffff;
	text-decoration: none;
	padding-left: 1rem;
	padding-right: 1rem;
	transition: 0.3s;
}

.navlink:hover{
	background-color: #4d4d4d;
	color: #ffffff;
	transition: 0.3s;
}

.navtext{	
	background-color: #4d4d4d;
	color: #ffffff;
	text-decoration: none;
	padding-left: 1rem;
	padding-right: 1rem;
}

.banner{
	text-align: center;
	font-family: fantasy;
	font-size: 60px;
	padding: 3rem;
	animation: technicolor 6s linear 0s infinite;
}

@keyframes technicolor {
	from {
		color: #6666ff;
	}
	10% {
		color: #0099ff;
	}
	50% {
		color: #00ff00;
	}
	75% {
		color: #ff3399;
	}
	100% {
		color: #6666ff;
	}
}

.body{
	display: block;
	padding-left: 4rem;
	padding-right: 4rem;
	height: calc(100vh - (3rem + 4rem)); /*Screen height minus navbar height plus footer height*/
	line-height: 2rem;
}

.footer{
	display: flex;
	line-height: 4rem;
	padding-left: 4rem;
	padding-right: 4rem;
	vertical-align: bottom;	
	background-color: #1e1e1e;
}

.fblock{
	padding-left: 1rem;
	padding-right: 1rem;
}

.fseperator{
	height: 4rem;
	width: 70vw;
}

.imglink{
	padding-left: 1rem;
	padding-right: 1rem;
}

img{
	vertical-align: middle;
	height: 30px;
	width: 30px;
}