body {
	background-color:white;
	margin:0;
	font-family:serif;}
a:link {color:#d96900;}
a:visited {color:#d98f4a;}
a:hover {color:#ff7b00;}
a:active {color:#ff7b00;}


#splash-o {
	position:fixed;
	width:200%;
	height:200%;
	left:-50%;
	top:-50%;
	transition:transform 0.25s ease-out;
	pointer-events: none;
}

.splash-i {
	position:absolute;
	width:120%;
	height:50%;
	transition:all 0.25s ease-out;
    background-repeat:no-repeat;
    background-size:cover;
    z-index:1;
}

#splash-a {
	background-image:url('/img/moss_back_top.jpg');
    background-position:center bottom;
	top:0;
	left:-10%;
}
#splash-b {
	background-image:url('/img/moss_back_bot.jpg');
    background-position:center top;
	bottom:0;
	right:-10%;
}

#splash-b img {
	margin:120px auto 0;
	display:none;
}


.bounce {
	animation: bounce 2s infinite;
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-10px);
  }
}


.splash-i p {
	position:absolute;
	color:white;
	font-size:48pt;
	font-family: 'Contrail One', cursive;
	text-align:center;
	width:100%;
	margin:0;
	transition:font-size 0.25s ease-out;
}

#splash-a p {
	bottom:5px;}
#splash-b p {
	top:10px;}

.splash-o-open {
	transform:rotate(-90deg);}

.splash-o-open #splash-a {
	top:-300px;}
.splash-o-open #splash-b {
	bottom:-300px;}


#content {
	position:relative;
	z-index:-1;
	width:500px;
	margin:30em auto 20em;
	font-family: 'Karma', serif;
	font-size:16pt;
	line-height:1.5em;
}

#copyright {
	text-align:center;
	font-size:9px;
	color:silver;
	width:500px;
	margin:5em auto;
	font-family:sans-serif;
	z-index:-2;
}

@media only screen and (max-device-width:767px) {
	
	#content {
		font-size:14pt;
	}
	#content, #copyright {
		width:55%;
		margin:20em auto 10em;
	}
	
	.splash-o-open #splash-a {top:-10%;}
	.splash-o-open #splash-b {bottom:-10%;}
	
	.splash-o-open .splash-i p {font-size:16pt;}
	
	.splash-o-open #splash-a p {bottom:-1px;}
	.splash-o-open #splash-b p {top:0;}

}