html {
	font-family: Georgia, Times, "Times New Roman", serif;;
	height: 100%;
}
body { 
	font-size: 100%;
	color: white;
	height:90%;
	padding: 0;
	margin:0;
  	background: url(images/bg.jpeg) no-repeat center center fixed; 
 	-webkit-background-size: cover;
 	-moz-background-size: cover;
 	-o-background-size: cover;
 	background-size: cover;
}
.hidden {
	visibility: hidden;
}
.container{
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 500px;
	height: 100vh;
	margin: 0 auto;
	padding: 0;

}

h1 {
	font-size: 5em;
	text-align: center;
	background: rgba(0,0,0,0.5);
	width: 500px;    
	margin:0 auto;
}
h2 {
	text-align: center;
}

#details {
	margin:0 auto;
}

ul {
	list-style: none;
	background: rgba(0,0,0,0.5);
	padding: 0;
}

li {
	text-align:left;
}

a {
	text-decoration: none;
	color: white;
}

a:hover {
	text-decoration: underline;
}

/*animate title fade in*/

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
	opacity:0;  /* make things invisible upon start */
	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;
 
	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
 
	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	animation-duration:1s;	
}

.fade-in.one {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
 
.fade-in.two {
-webkit-animation-delay: 2s;
-moz-animation-delay:2s;
animation-delay: 2s;
}

.fade-in.three {
-webkit-animation-delay:3s;
-moz-animation-delay:3s;
animation-delay: 3s;
}

@media (max-width: 768px) {
	h1 {
		font-size: 3em;
		width:100vw;
	}
	.container {
		width: auto;
	}
}