/* ===============================================================
	global
================================================================= */
* {
	margin : 0;
	padding : 0;
	border : none;
	background : transparent;
	-webkit-box-sizing : border-box;
	-moz-box-sizing : border-box;
	-o-box-sizing : border-box;
	-ms-box-sizing : border-box;
	box-sizing : border-box;
	font : normal normal 100% / 1.5 "Century Gothic",Tahoma,Helvetica,sans-serif;
}
*::after {
	display : block;
	clear : both;
}
html,body {
	margin : 0;
	padding : 0;
	height : 100%;
}
html {
	scroll-behavior : smooth;
}
body {
	display : flex;
	flex-flow : column;
	justify-content : space-between;
	background : #000000 url(../images/background.png) 0 0;
	color : #333132;
	font-size : 62.5%;
	text-align : center;
}

img {
	margin : 0 auto;
	max-width : 100%;
	height : auto;
}

/* ===============================================================
	definition
================================================================= */

@keyframes What {
	0% {
		opacity : 0;
		transform : translateX(20vw) scaleX(1) scaleY(1) skew(-60deg);
	}
	10% {
		opacity : 1;
	}
	80% {
		transform : scaleX(0.3) scaleY(1.2);
	}
	100% {
		transform : scaleX(1) scaleY(1);
	}
}

@keyframes Oops {
	0% {
		opacity : 0;
	}
	85% {
		opacity : 0;
		transform : scale(0.3) translateY(150%);
	}
	90% {
		opacity : 0.8;
		transform : scale(1.5) translateY(-30%);
	}
	100% {
		opacity : 1;
		transform : scale(1) translateY(0);
	}
}

header,
main {
	font-size : 1.2rem;
	width : 100%;
}

/* ===============================================================
	header
================================================================= */

header {
}
header h1 {
	padding : 1% 2%;
	font-size : 0.9rem;
	text-align : right;
}

/* ===============================================================
	main
================================================================= */

main {
	display : flex;
	flex-flow : column;
	justify-content : space-between;
	flex : 1;
	margin : auto;
	text-align : center;

}
main > h2 {
	overflow : hidden;
	margin : auto;
	padding : 37.125% 0 0 0;
	background : url(../images/logo.png) no-repeat 0 0 / contain;
	text-indent : 100%;
	white-space : nowrap;
	width : 75%;
	max-width : 800px;
}
main > p {
	margin : -37% 0 0 0;
	font-size : 1.0rem;
}
article {
	overflow : hidden;
	margin : auto 2% 0 auto;
	font-size : 0.8rem;
	text-align : left;
}
article > h3,article > section > h4,article > section > p {
	font-family : "Rock Salt", cursive;
	font-weight : 400;
	font-style : normal;
}
article > h3 {
	margin : auto auto auto 33%;
	animation : What 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
article > section {
	margin : auto auto 5% auto;
}
article > section > h4 {
	margin : auto auto 5% 33%;
	animation : What 2.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
article > section > p {
	margin : auto auto auto 1%;
	animation : Oops 3.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	text-align : right;
}

@media screen and (min-width : 768px) {
	main > h2  {
		width : 60%;
	}
	article {
		font-size : 0.9rem;
	}
	article > h3 {
		margin : auto auto auto 15%;
	}
	article > section > h4 {
		margin : auto auto 5% 15%;
	}
	article > section > p {
		margin : auto;
		font-size : 1rem;
	}
}

/* ===============================================================
	footer
================================================================= */

footer {
	padding : 15px;
	font-size : 0.8rem;
}