* {
    box-sizing:border-box;
}

@font-face {
  font-family: 'Geometric706';
  src:	url('fonts/Geometric706BT-BlackB.eot?#iefix') format('embedded-opentype'),
  		url('fonts/Geometric706BT-BlackB.woff') format('woff'),
  		url('fonts/Geometric706BT-BlackB.ttf')  format('truetype'),
		url('fonts/Geometric706BT-BlackB.svg#Geometric706BT-BlackB') format('svg');
  font-weight: normal;
  font-style: normal;
}


html, body {
    margin:0;
    padding:0;
    background:#020f25;
    min-height:100%;
    height:100%;
}

body {
    min-height:100%;
	background: url('stripes.png') center, url('bg.jpg') center no-repeat;
	background-size: auto, cover;
	font-family: "Geometric706", sans-serif;
    color:white;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    text-align:center;
}

a {
	color:white;
}

h1 {
	font-weight:normal;
	font-size: 50px;
	text-transform:uppercase;
	letter-spacing:0.08em;
}

@keyframes fadeInContent {
	0% { opacity:0; transform:scale(0.9);}
	100% { opacity:1; transform:scale(1); }
}

#main {
	width:100%;
	height:100%;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	transform:scale(1);
	padding:15px;

	animation: fadeInContent 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000) 900ms 1;
	animation-fill-mode:both;
}

.site-corner {
	position:fixed;
	width:60px;
	height:60px;
	pointer-events:none;
}

content {
	font-size: 24px;
	line-height:1.4;
	display:flex;
}

content p {
	padding: 30px;
	margin:0;
}
.logo {
	margin: 50px 0;
	max-width:100%;
	height:auto;
}

@keyframes cornerTopAnim {
	0% { left: calc(50% - 30px); top: calc(50% - 30px); }
	20% { left:calc(50% - 30px); top: calc(50% - 30px); }
	50% { left: 20px; top: calc(50% - 30px); }
	70% { left: 20px; top: calc(50% - 30px); }
	100% { left: 20px; top: 20px; }
}

.site-corner-top {
	box-shadow: inset 15px 15px 0 0 white;
	left:20px;
	top:20px;

	animation: cornerTopAnim 1000ms cubic-bezier(0.710, 0.005, 0.175, 1.000) 0.1s 1;
	animation-fill-mode:both;
}

@keyframes cornerBottomAnim {
	0% { right: calc(50% - 30px); bottom: calc(50% - 30px); }
	20% { right:calc(50% - 30px); bottom: calc(50% - 30px); }
	50% { right: 20px; bottom: calc(50% - 30px); }
	70% { right: 20px; bottom: calc(50% - 30px); }
	100% { right: 20px; bottom: 20px; }
}

.site-corner-bottom {
	box-shadow: inset -15px -15px 0 0 white;
	bottom:20px;
	right:20px;

	animation: cornerBottomAnim 1000ms cubic-bezier(0.710, 0.005, 0.175, 1.000) 0.1s 1;
	animation-fill-mode:both;
}

@media screen and (max-width: 640px) {

	h1 {
		font-size: 32px;
	}

	content {
		font-size:16px;
	}

	.logo {
		width:180px;
		height:auto;
		margin: 15px 0;
	}
	
	content p {
	    padding:15px;
	}
}

@media screen and (max-width: 480px) {

	content {
		display:block;
	}
	
}