html {
	background-color: #000000;
	background-image: url("../img/style/background.jpg");
	background-attachment: fixed;
	background-size: 100vw 100vh;
	background-repeat: no-repeat;
	overflow: hidden;
}

body {
	background-color: rgba(170, 170, 170, 0.671);
	margin: 2em;
	padding: 2em;
	border-radius: 1em;
	transform: translateY(calc(50vh - 50%));
	box-shadow:0 0 0.5vw #aaaaaa;
	animation-name: showBody;
	animation-duration: 2s;
}

@font-face {
	font-family: "avenirCondensedHand";
	src: url("../font/AvenirCondensedHand.ttf");
}

h1{
	font-family: "avenirCondensedHand", 'Courier New', Courier, monospace;
	font-weight: 900;
	font-size: 5vw;
	margin-left: 20vw;
	animation-name: insertFromLeft;
	animation-duration: 1.5s;
	overflow: hidden;
	text-overflow: ellipsis;
}
h2{
	font-family: 'Courier New', Courier, monospace;
	font-size: 2.5vw;
	text-align: right;
	margin-right: 20vw;
	animation-name: insertFromRight;
	animation-duration: 1.5s;
	overflow: hidden;
	text-overflow: ellipsis;
}
#contact {
	text-align: right;
	animation-name: insertFromRight;
	animation-duration: 3s;
}

@keyframes showBody {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
		box-shadow: 0 0 2vw #aaaaaa;
	}
}
@keyframes insertFromLeft {
	0% {
		position: relative;
		left: -100vw;
	}
	100% {
		position: relative;
		left: 0;
	}
}
@keyframes insertFromRight {
	0% {
		position: relative;
		right: -100vw;
	}
	100% {
		position: relative;
		right: 0;
	}
}