* {
	box-sizing: border-box;
}
body {
	background: radial-gradient(white, #eef);
	padding: 0;
	margin: 0;
	min-height: 100vh;
	font-family: 'Fresca',sans-serif;
	text-align: center;
	transition: all 2s;
}
h1 {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	text-align: center;
	user-select: none;
	font: 14vw 'Indie Flower',cursive;
	margin: 0;
	padding: 0;
	white-space: nowrap;
	color: #6662;
	z-index: 0;
}
a {
	color: inherit;
	transform: none;
	animation: throb 1s infinite alternate;
}
@keyframes throb {
	to { opacity: 0.8; transform: scale(0.95); }
}
#message {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100%; /* prevent transform from squishing */
	color: royalblue;
	margin: 0;
	padding: 1em;
	font-size: 5vh;
	z-index: 2;
	transition: all 0.5s;
}
#message.faded {
	transform: translate(-50%,-50%) scale(0.8);
	filter: blur(0.1em);
}
img {
	width: 66vw;
}
button.hidden {
	display: none;
}
button.shown,
.bg-pastel button.up.pastel,
.bg-black button.up.black {
	display: block;
	animation: springy 1s 0s 1 forwards;
}
nav {
	position: fixed;
	bottom: 20px;
	left: 5vw;
	height: 100px;
	width: 90vw;
	z-index: 100;
}
nav button {
	position: fixed;
	display: block;
	bottom: -140px;
	height: 120px;
	width: 120px;
	border-radius: 50%;
	background-size: 60%;
	background-position: center;
	border: 4px solid #333;
	cursor: pointer;
	z-index: 1000;
	transition: all 0.4s cubic-bezier(0,1,1,1);
	animation: springy 1s 1s 1 forwards;
	&:hover {
		transform: scale(1.05);
		background-position: -100% -100%;
		box-shadow: 0 -5px 10px #0004;
	}
	&:active {
		transform: scale(0.95);
	}
}
@keyframes springy {
	0%  { bottom: -140px; }
	50% { bottom: 0; }
	100%{ bottom: -20px; }
}
@keyframes spring-right {
	0%  { right: -140px; }
	50% { right: 0; }
	100%{ right: -20px; }
}

.bg-pastel {
	background: linear-gradient(45deg, #ecf, #acf);
}
.bg-pastel #message {
	color: white;
}
.bg-pastel aside {
	color: #fff9;
}

.bg-black {
	background: radial-gradient(#222, black);
}
.bg-black #message {
	color: #666;
}
.bg-black aside {
	color: #444;
}

.pastel, .black, .vanderstank {
	display: none;
}

.up {
	left: 10px;
	background-image: url(images/reload.png);
}
.down {
	display: none;
	left: 150px;
	background-image: url(images/down.png);
	animation-delay: 1.5s;
}
.white  {
	background-color: #9ae;
}
.pastel {
	background-color: #222;
}
.black  {
	background-color: #666;
}

#vanderbutton {
	left: 150px;
	background: #666 url(images/down.png);
	animation-duration: 1.3s;
	animation-delay: 0s;
}
.submit {
	right: -140px;
	bottom: 10px;
	orphans: inherit;
	widows: inherit;
	background: #666 url(images/pencil.png) center / 60%;
	animation: spring-right 1.5s 1s 1 forwards;
}
#submitform {
	max-width: 600px;
	background: white;
	padding: 1em;
	border: 0;
	border-radius: 1em;
	box-shadow: 0 0.5em 1em #0004;
	text-align: left;
}
#submitform[open] {
	animation: dialog 0.5s 0s 1 forwards;
}
@keyframes dialog {
	from { transform: scale(0.8); opacity: 0; }
	to   { transform: scale(1); opacity: 1; }
}
#submitform button {
	background: royalblue;
	color: white;
	padding: 0.5em;
	font: inherit;
	border: 0;
	border-radius: 0.5em;
	cursor: pointer;
	transition: background-color 0.2s;
}
#submitform button:hover {
	background: cornflowerblue;
}
#submitform .x {
	appearance: none;
	background: transparent;
	padding: 0;
	float: right;
	font-size: 1.5em;
	color: gray;
}
#submitform .x:hover {
	background: transparent;
}

input, textarea {
	font: inherit;
	color: inherit; /* prevent ios blue button text */
	background: #eee;
	border: none;
	border-radius: 0.5em;
	margin: 0.5em auto;
	padding: 0.5em;
}
input[type="text"], textarea {
	width: 100%;
}

.fucked-up-1 {
	transform: rotate(180deg);
	filter: brightness(1.8) blur(1px);
	text-shadow: 0 0 1em white;
}
.fucked-up-1 * {
	filter: brightness(2);
	animation: slotate 10s linear 0s infinite;
}

footer p {
	font-size: 3vh;
}
#theshape {
	position: fixed;
	bottom: 0;
	right: 0;
	height: 2vh;
	width: 4vh;
}

@keyframes slotate {
	from { transform: rotate(0); }
	to   { transform: rotate(360deg); }
}