@font-face {
	font-family: "MarsStandard";
	src: url("../fonts/marsstandard-regular.otf");
}

a {
	color: #fff;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

html {
	min-height: 100%;
	min-height: 100vh;
	min-height: -webkit-fill-available;
	overflow: hidden;
}

body {
	position: relative;
	height: 100vh;
	width: 100vw;
	background-color: #0f233e;
	background-image: url("../img/Blue-city-transitioning-1280x720px.jpg");
	background-size: cover;
	color: #fff;
	font-family: "MarsStandard", Arial, sans-serif;
	overflow: hidden;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
	_::-webkit-full-page-media, _:future, :root , body { height: -webkit-fill-available !important; }
}

.wrapper {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-sizing: border-box;
	height: 100vh;
	height: -webkit-fill-available;
}

header {
	display: flex;
	height: 20vh;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}

header img {
	margin: auto;
	max-width: 800px;
	max-height: 10vh;
}

main {
	text-align: center;
	margin: 5vh 0;
}

aside {
	position: absolute;
	padding-top: 15vh;
	top: 20vh;
	left: 0;
	height: 80vh;
	width: 95vw;
	border-top-right-radius: 15px;
	text-align: center;
	pointer-events: none;
}

main h1, main h2, main h3 {
	max-width: 80vw;
	margin: 0 auto;
}

main h1 {
	font-size: calc(20px + 2vi);
	line-height: calc(20px + 2 vi);
}

main h2 {
	font-size: calc(10px + 1.2vi);
	margin-top: 2vi;
	margin-bottom: 3vi;
}

main h3 {
	font-size: calc(10px + .5vi);
	margin-bottom: 1.5vi;
	color: #eee;
}

@keyframes snake {
	0% {background-position: -95vw 0px, calc(95vw - 1em) -90vh;}
	20% {background-position: 0px 0px, calc(95vw - 1em) -90vh;}
	40% {background-position: 95vw 0px, calc(95vw - 1em) 0px;}
	60% {background-position: 95vw 0px, calc(95vw - 1em) 95vh;}
	80% {background-position: 95vw 0px, calc(95vw - 1em) 95vh;}
	100% {background-position: 95vw 0px, calc(95vw - 1em) 95vh;}
}

@keyframes staticsnake {
	0% {background-position: -95vw 0px, calc(95vw - 1em) -540px;}
	20% {background-position: 0px 0px, calc(95vw - 1em) -540px;}
	40% {background-position: 95vw 0px, calc(95vw - 1em) 0px;}
	60% {background-position: 95vw 0px, calc(95vw - 1em) 540px;}
	80% {background-position: 95vw 0px, calc(95vw - 1em) 540px;}
	100% {background-position: 95vw 0px, calc(95vw - 1em) 540px;}
}

aside {
	background:
	linear-gradient(0deg, #9EFF00 0%, #9EFF00 100%),
	linear-gradient(90deg, #9EFF00 0%, #9EFF00 100%);
	background-size: 95vw 1em, 1em 90vh;
	background-repeat: no-repeat;
	background-position: -95vw 0px, calc(95vw - 1em) -90vh;
	animation: snake 6s linear infinite
}

footer {
	padding: 50px;
	box-sizing: border-box;
}

footer .contacts {
	display: inline-block;
	padding: 2px 10px;
	margin-right: 20px;
	margin-bottom: 10px;
	border-left: 1px solid #9EFF00;
	font-size: calc(12px + .1vi);
	font-weight: lighter;
}

footer .contacts h1, footer .contacts h2 {
	margin: 0;
	font-size: calc(12px + .2vi);
	font-weight: bold;
}

footer .contacts p {
	margin: 2px 0;
	
	display: block;
	font-family: Arial, sans-serif;
	font-weight: lighter;
}

footer .contacts span {
	display: inline-block;
	white-space: nowrap;
}

footer .contacts strong {
	font-size: calc(12px + .2vi);
	font-family: "MarsStandard", Arial, sans-serif;
	font-weight: bold;
	margin-right: 3px;
}

@media only screen and (max-width: 500px) {
	header img {
		width: 80vw;
	}
	
	footer {
		padding: 20px;
	}
	
	footer .contacts {
		font-size: calc(8px + max(.1vw,.1vh));
		font-size: calc(8px + .1vi);
	}
	
	footer .contacts h1, footer .contacts h2 {
		font-size: calc(8px + .2vi);
	}
	
	footer .contacts strong {
		font-size: calc(8px + .2vi);
	}
}

@media only screen and (max-width: 990px) {
	
	header img {
		width: 80vw;
	}
	
	main {
		padding-top: 8vh;
	}
}

@media only screen and (max-height: 540px) {
	.wrapper {
		overflow: scroll;
	}
}

/*
@media only screen and (max-height: 540px) {
	
	header {
		height: 60px;
	}
	
	header img {
		width: auto !important;
	}
	
	main {
		height: 540px;
		box-sizing: border-box;
		position: absolute;
		bottom: 0px;
		left: 0px;
		padding-top: 60px;
		background-size: 95vw 1em, 1em 540px;
		background-position: -95vw 0px, calc(95vw - 1em) -540px;
		animation-name: staticsnake;
	}
	
	body {
		height: 600px;
		overflow: scroll;
		position: relative;
	}
	
	footer {
		position: absolute;
	}
	
	footer .contacts strong {
		display: block;
	}
}*/