@font-face {
	font-family: 'kiwisoda';
	src: url('/res/kiwisoda-webfont.woff2') format('woff2'),
	url('/res/kiwisoda-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
html {
	background-color: black;
}
@keyframes oscillate {
	0% {
		background-position: 0% 50%;
	}
	25% {
		background-position: 50% 100%;
	}
	50% {
		background-position: 50% 50%;
	}
	75% {
		background-position: 25% 100%;
	}
	100% {
		background-position: 0% 50%;
	}
}
body {
	background-image: url("/res/backtile.png");
	background-repeat: repeat;
	background-size: 70vh;
	animation: oscillate 100s ease infinite;
	image-rendering: pixelated;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 100vh;
	text-align: center;
}
#contentarea {
    padding-bottom: 2vw;
    display: flex;
    align-items: center;
	justify-content: center;
    flex-direction: column;
    background-image: url("/res/gridfill.png");
    background-repeat: repeat;
    background-size: 128px;
    border: 2.5vh solid transparent;
    border-image: url("/res/pipeborder.png") 16 stretch;
    border-radius: 10%;
    margin: 2vw;
    color: #11ee11;
    font-family: "kiwisoda";
    text-shadow: 0.6vw 0.6vw 0 #000000;
    padding: 2vw;
    padding-left: 3vw;
    padding-right: 3vw;
    width: 35vh;
    height: 35vh;
}
#headertext {
    font-size: 6.5vh;	
}
#subheadertext {
	font-size: 4vh;
}

#header-guy {
	width: 14vh;
	padding-bottom: 1vw;
	animation: wiggle 2.5s infinite;
}
@keyframes wobb {
	0%, 100%   {transform: translateY(0px)}
	25%  {transform: translateY(-2px)}
	75%  {transform: translateY(2px)}
}
.wobble span {
	animation-name: wobb;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-duration: 400ms;
	display: inline-block;
	transform: translateY(0px);
}
@keyframes wiggle {
    0% { transform: rotate(0deg); }
   80% { transform: rotate(0deg); }
   85% { transform: rotate(5deg); }
   95% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}
a, a:hover, a:visited, a:active {
	color: #00aa00;
	text-decoration: underline;
}
