@import "crt.animations.style.css";
@import "main.animations.style.css";
@import "title.animations.style.css";
@import "subtitle.animations.style.css";
@import "flicker.animations.style.css";

body,html {
	background: #1A1A1A;
	margin: 0;
	padding: 0;
}

.initial-fade-in {
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation: mainAnimation ease-in 9s;
	-moz-animation: mainAnimation ease-in 9s;
	-o-animation: mainAnimation ease-in 9s;
	 animation: mainAnimation ease-in 9s;
}

.main-container {
	align-content: space-between;
	background-color: #1A1A1A;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	font-family: 'Montserrat', sans-serif;
	height: 100vh;
	/* mobile viewport bugfix*/
	height: -webkit-fill-available;
	justify-content: space-between;
	padding: 5vh 5vw 1vh 5vw;
	width: 100vw;
}

.menu-container {
	align-items: center;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}

.menu-title > a {
	color: white;
	font-size: 5vh;
	text-decoration: none;
}

.animate-menu-title {
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation: flicker cubic-bezier(0,1.61,1,-2.21) 5s;
	-moz-animation: flicker cubic-bezier(0,1.61,1,-2.21) 5s;
	-o-animation: flicker cubic-bezier(0,1.61,1,-2.21) 5s;
	 animation: flicker cubic-bezier(0,1.61,1,-2.21) 5s;
	 animation-delay: 16.3s;
	 animation-iteration-count: 1;
}

.menu-items-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-evenly;
}

.menu-item {
	padding: 1em 2em 1em 2em;
}

.menu-item > p {
	color: whitesmoke;
	font-size: 2vh;
}

.content-container {
	align-items: center;
	align-content: center;
	color: white;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}

.content-title-container > h1 {
	margin: 2vh;
	font-size: 15vh;
}

.animate-title {
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation: titleAnimation cubic-bezier(0,1.61,1,-2.21) 3s, flicker cubic-bezier(0,1.61,1,-2.21);
	-moz-animation: titleAnimation cubic-bezier(0,1.61,1,-2.21) 3s, flicker cubic-bezier(0,1.61,1,-2.21);
	-o-animation: titleAnimation cubic-bezier(0,1.61,1,-2.21) 3s, flicker cubic-bezier(0,1.61,1,-2.21);
	 animation: titleAnimation cubic-bezier(0,1.61,1,-2.21) 3s, flicker cubic-bezier(0,1.61,1,-2.21);
	 animation-delay: 0s, 17.3s;
	 animation-duration: 3s, 2s;
	 animation-iteration-count: 2, 1;
}

.content-subtitle-container > p {
	margin: 2vh;
	font-size: 5vh;
}

.animate-subtitle {
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation: subtitleAnimation cubic-bezier(1,-0.01,.94,.55), flicker cubic-bezier(0,1.61,1,-2.21);
	-moz-animation: subtitleAnimation cubic-bezier(1,-0.01,.94,.55), flicker cubic-bezier(0,1.61,1,-2.21);
	-o-animation: subtitleAnimation cubic-bezier(1,-0.01,.94,.55), flicker cubic-bezier(0,1.61,1,-2.21);
	 animation: subtitleAnimation cubic-bezier(1,-0.01,.94,.55), flicker cubic-bezier(0,1.61,1,-2.21);
	 animation-delay: 0s, 16.7s;
	 animation-duration: 6s, 3s;
	 animation-iteration-count: 1, 1;
}

.content-subtitle-icon-container {
	font-size: 5vh;
}

.content-subtitle-container {
	display: flex;
	align-items: center;
	align-content: center;
	display: flex;
	flex-direction: row;
}

.content-subtitle-icon-container {
	margin: 1vw;
}

.footer-container {
	align-items: center;
	align-content: center;
	color: whitesmoke;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.footer-left-item-container {
	display: flex;
	flex-direction: row;
}

.footer-left-item-container > p {
	margin-left: 20px;
	margin-right: 20px;
}

.animate-copyright {
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation: flicker cubic-bezier(0,2.23,.44,-2.77) 6s;
	-moz-animation: flicker cubic-bezier(0,2.23,.44,-2.77) 6s;
	-o-animation: flicker cubic-bezier(0,2.23,.44,-2.77) 6s;
	 animation: flicker cubic-bezier(0,2.23,.44,-2.77) 6s;
	 animation-delay: 16s;
	 animation-iteration-count: 2;
}