@font-face {
    font-family: 'Lato';
    src: url("/font/Lato.woff2") format('woff2');
    font-weight: normal;
    font-style: normal;
}

@keyframes fadeIn1 {
	from {transform: translate(0em, 0.4em); opacity: 0%;}
	to {transform: translate(0em, 0em); opacity: 100%;}
}

@keyframes fadeIn2 {
	0% {transform: translate(0em, 0.4em); opacity: 0%;}
	30% {transform: translate(0em, 0.4em); opacity: 0%;}
	100% {transform: translate(0em, 0em); opacity: 100%;}
}

body {
    background: url("/img/bg.png");
	background-attachment: fixed;
	background-size: cover;
	background-repeat: repeat-y;
    overflow-x: hidden;
	margin: 0px;
	color: rgb(50,50,50);
	font-family: Lato;
}

.container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}


/*			  */
/* Navigation */
/*			  */

nav {
	position: fixed;
	top: 0px;
	width: 100%;
	height: 5em;
	background: rgb(33,33,33,0);
	padding-top: 9px;
	transition: background 0.3s, box-shadow 0.3s, height 0.3s, padding-top 0.3s;
	transition-duration: 0.5s;
	z-index: 1;
}

nav ul{
	list-style-type: none;
	display: flex;
	margin-top: 6px;
	justify-content: center;
	padding-left: 0;
	animation-name: fadeIn1;
	animation-duration: 0.5s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: backwards;
	animation-delay: 0.25s;
}

@media screen and (min-width: 767px){
	nav ul { justify-content: left; padding-left: 40px;}
}

nav a {
	display: block;
	text-align: center;
	font-size: 13pt;
	text-decoration: none;
	border-style: solid;
	border-radius: 4px;
	border-width: 2px;
	border-color: rgba(0,0,0,0);
	color: rgb(250,250,250);
	transition: color 0.3s, border-color 0.3s
}

nav li {
	text-align: center;
	padding: 0.7em;
}

/* Stuff that happens on scroll or hover */
nav.scrolled {
	height: 4em;
	padding-top: 0px;
	background: rgba(33,33,33,1);
	box-shadow: -3px 5px 20px rgba(43,42,42,0.85);
	transition: background 0.3s, box-shadow 0.4s, height 0.3s, padding-top 0.3s;
	transition-duration: 0.5s;
}

nav.scrolled a {
	border-color: rgba(0,0,0,0);
	transition: border-color 0.3s, background-color: 0.3s;
	color: rgb(200,200,200);
	transition: color 0.3s, text-decoration 0.3s, font-weight 0.3s;
}

nav a:hover {
	border-color: rgba(100,100,100,0.3);
	transition: background-color 0.3s, border-color 0.3s;
}

nav.scrolled a:hover {
	border-color: rgba(100,100,100,0.5);
	background-color: rgba(100,100,100,0.3);
	transition: background-color 0.3s, border-color 0.3s;
}


/*				  */
/* Header & title */
/*				  */
	
header {
	background: #ffffff url("/img/bg.png");
	background-attachment: fixed;
	background-size: cover;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 40vh;
}	
	
.title {
	text-align: center;
	animation-name: fadeIn1;
	animation-duration: 0.5s;
	animation-timing-function: ease-in-out;
}

h1 {
	font-family: Lato;
	font-weight: 300;
	color: white;
	font-size: 50pt;
	text-align: center;
	margin: 0px;
	z-index: 0;
}

@media screen and (min-width: 767px){
	h1 { font-size: 64pt; }
	header { height: 60vh; }
	.title { margin-bottom: 1.5vh; }
}


/*				*/
/* Main Content */
/*				*/
.content {
	border-radius: 10px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	padding: 1em;
	padding-left: 2em;
	background-color: white;
	font-size: 14pt;
	box-shadow: -3px 5px 20px rgba(50,50,50,0.7);
	animation-name: fadeIn2;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: backwards;
}

footer {
	color: #212121;
	margin: 15px;
	text-align: center;
	font-size: 10pt;
	animation-name: fadeIn1;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: backwards;
}

footer p {
	color: #5e6c84;
}