@font-face {
	font-family: 'Ubuntu';
	font-style: normal;
	font-weight: 400;
	src: url('.../Ubuntu-Regular.ttf') format('ttf');
}

@font-face {
	font-family: 'Ubuntu';
	font-style: normal;
	font-weight: 400;
	src: url('.../Ubuntu-Bold.ttf') format('ttf');
}

body {
	font-family: 'Ubuntu';
	margin: 0;
	padding: 0;
	position: fixed;
	text-align: center;
	height: 100%;
	width: 100%;
	overflow: hidden;
}

h1 {
	font-size: min(65vw, 65vh);
	font-weight: bold;
}

h2 {
	font-size: min(10vw, 10vh);
	font-weight: bold;
}

h3 {
	font-size: min(5vw, 5vh);
}

p {
	font-size: 3vw;
	font-weight: bold;
	position: absolute;
	overflow: hidden;
	z-index: -1;
}

header {
	position: flex;
	top: 0;
	left: 10vw;
	right: 10vw;
	height: 10vh;
	display: flex;
	justify-content: space-between;
	padding: 0 20px;
	align-items: center;
}

footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 50px;
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 0 20px;
	z-index: -1;
}

footer div {
	width: 33.33%;
	text-align: center;
}

footer div:last-child {
	z-index: 999;
}

@media (orientation: landscape) {
	footer div:first-child {
		text-align: left;
	}
	footer div:last-child {
		text-align: right;
	}
}

@media (orientation: portrait) {
	footer {
		height:100px;
		flex-direction: column;
		justify-content: flex-end;
		vertical-align: bottom;
		padding-bottom: 10px;
	}
	footer div {
		width: 100%;
	}
}

.move {
	transform: translateX(0) translateY(-50%);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
  	animation: move-left 4s linear;
	animation-timing-function: cubic-bezier(.5,.9,.9,1);
}

.mirror {
	transform: translateX(0) translateY(50%) scaleX(-1);
	z-index: 1;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
  	animation: move-right 4s linear;
	animation-timing-function: cubic-bezier(.5,.9,.9,1);
}

.top {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	height: min(50vw, 50vh);
	width: 100vw;
}

.middle {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	height: min(15vw, 15vh);
	width: 100vw;
	overflow: hidden;
	animation: move-middle 5s linear;
	animation-timing-function: ease-out;
}

.bottom {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	height: min(15vw, 15vh);
	width: 100vw;
	overflow: hidden;
	animation: move-bottom 5s linear;
	animation-timing-function: ease-out;
}

.twitter {
	height: 1em;
	width: 1em;
}

.imp {
	font-size: .75rem;
	opacity: .5;
}

.yellow {
	background-color: yellow;
	color: mediumvioletred;
}

.yellow:link {
	color: darkturquoise;
}

.yellow:visited {
	color: darkturquoise;
}

.red {
	background-color: crimson;
	color: white;
}

.red:link {
	color: black;
}

.red:visited {
	color: black;
}

.green {
	background-color: limegreen;
	color: yellow;
}

.green:link {
	color: paleturquoise;
}

.green:visited {
	color: paleturquoise;
}

@keyframes move-left {
	0% {
	  	transform: translateX(100%) translateY(-50%);
  	}
	15% {
		transform: translateX(100%) translateY(-50%);
	}
	100% {
	  	transform: translateX(0) translateY(-50%);
	}
}

@keyframes move-right {
	0% {
	  	transform: translateX(-100%) translateY(50%) scaleX(-1);
  	}
	15% {
		transform: translateX(-100%) translateY(50%) scaleX(-1);
	}
	100% {
	  	transform: translateX(0) translateY(50%) scaleX(-1);
	}
}

@keyframes move-middle {
	0% {
	  	transform: translateY(100vh);
  	}
	40% {
		transform: translateY(100vh);
	}
	80% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(0);
	}
}

@keyframes move-bottom {
	0% {
	  	transform: translateY(100vh);
  	}
	60% {
		transform: translateY(100vh);
	}
	100% {
		transform: translateY(0);
	}
}