@charset "UTF-8";

@media screen and (min-width: 10px) {

* {
	margin: 0; padding: 0;
	box-sizing: border-box;
	font-weight: normal;
	text-decoration: none;
	list-style-type: none;
	text-align: justify;
}

body { background: #000; }


header {
	width: 100vw; height: 100vh;
	background: white;
	overflow: hidden;
	position: fixed; left: 0; top: 0;
	z-index: -80;
}
header::before {
	content: "";
	display: block;
	width: 100vw; height: 100vh;
	position: absolute; left: 0; top: 0;
	background: url("images/headerLogo.svg");
	background-size: 100% auto;
	background-position: center;
}
h1 {
	width: 100vw; height: 100vh;
	position: absolute; left: 0; top: 0;
	background: url("images/h1Text.svg");
	background-size: 100% auto;
	background-position: center top;
	font-size: 0;
}

nav {
	width: 100vw; height: 15vh;
	padding: 5vh 0 0;
	display: flex;
	justify-content: center;
	position: fixed; left: 0; top: 80vh; 
	background: white;
}
nav::before {
	content: "";
	display: block;
	width: 100vw; height: 100vh;
	position: absolute; left: 0; top: -100vh;
	background: url("images/headerMoku.svg");
	background-size: 100% auto;
	background-position: center bottom;
	z-index: -8;
}
nav a {
	margin: 0 40px;
	font-family: niveau-grotesk, sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 4vh; line-height: 1em;
	color: #222;
}
nav a:hover {
	color: #00b7ee;
	transform: scale(1.3);
	filter: drop-shadow(1vh 1vh 0 rgb(0 0 0 / .1));
}

#baloon {
	width: 200px; height: 180px;
	position: fixed; right: 5vw; bottom: 20vh;
	font-size: 0;
	background: url("images/baloon.svg");
	filter: drop-shadow(1vh 1vh 0 rgb(0 0 0 / .1));
}
#baloon:hover {
	animation: hov .2s ease forwards;
}
@keyframes hov {
	  0% { transform: scale(1.1) translateX(0); }
	 20% { transform: scale(1.1) translateX(5px); }
	 40% { transform: scale(1.1) translateX(-5px); }
	 60% { transform: scale(1.1) translateX(5px); }
	 80% { transform: scale(1.1) translateX(-5px); }
	100% { transform: scale(1.1) translateX(0); }
}

footer {
	width: 100vw; height: 5vh;
	padding: 2vh;
	display: flex;
	justify-content: center;
	position: fixed; left: 0; bottom: 0; 
	background: #222 url("images/footerTex.svg");
	background-size: 100% auto;
	background-position: center;
	color: #fff;
	font-size: 10px; line-height: 1em;
}