@charset "utf-8";
@import "https://use.fontawesome.com/releases/v5.5.0/css/all.css";
@font-face {
    font-family: slant-font;
    src: url(../fonts/SLANT.TTF);
}

@keyframes img_page_load {
	0% {
		opacity: 0%;
		transform: translate(100%) scale(0.25);
	}
	100% {
		opacity: 100%;
		transform: translate(0) scale(1);
	}
}
@keyframes all_page_load {
	0% {
		opacity: 0%;
	}
	100% {
		opacity: 100%;
	}
}
/* CSS Document */

*, html{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

body{
	animation: 2s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 all_page_load;
	line-height: 0;
	font-family: sans-serif;
	white-space: nowrap;
	background: #1C1F23 no-repeat;
	overflow: hidden;
}

a:link{
	color: #30AAED;
	text-decoration: none;
}

a:hover{
	color: #89D0F7;
	text-decoration: underline;
}

a:visited{
	color: #2960C3;
}

body img.static {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
	filter: drop-shadow(0 0 10px black);
}

div.wrapper{
	position: absolute;
	text-align: center;
	top: 50%;
	left: 50%;
	width: 100%;
	transform: translate(-50%,-50%);
	color: white;
}

div img.animate{
	animation: 2s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 img_page_load;
}

img {
	width: 43vw;
}

figure.captionedimage figcaption.sub{
	color: rgba(255,255,255,1.00);
	font-family: slant-font;
	font-size: 3vw;
	transform: translate(0,0.5em) rotate(-8.8deg);
	filter: drop-shadow(0 0 0.25em rgba(0,0,0,0.25));
}

figure.captionedimage figcaption.sub2{
	color: rgba(255,255,255,1.00);
	font-family: slant-font;
	font-size: 2.25vw;
	transform: translate(0,1.6em) rotate(-8.8deg);
	filter: drop-shadow(0 0 0.25em rgba(0,0,0,0.25));
	line-height: 0.75;
}

figure.captionedimage figcaption.title{
	color: #FF3A3A;
	text-shadow: 0.05em 0.05em 0 rgba(91,0,0,0.48);
	font-weight: bold;
	text-transform: uppercase;
	font-size: 3.5vw;
	transform: translate(0,-1em) rotate(9deg);
	filter: drop-shadow(0 0 0.5em red);
}

.shaded{
	filter: drop-shadow(0 0 0.25vw rgba(0,0,0,0.6));
}