:root {
	--main-background:rgb(225, 221, 217);
	--main-color:rgba(30, 26, 22, .8);
	--translucent-color:rgba(8, 4, 0, .125);
	--very-translucent-color:rgba(8, 4, 0, .0625);
	--sannes-blue:#1b75bb;
}

*, *::after, *::before {
	box-sizing:border-box;
	padding:0;
	margin:0;
	font-family:"Saira", "sans-serif";
}

html{
	background:gold;
	text-align:center;
	animation:achter 20s infinite alternate;
}

@keyframes achter  {
   	to {
        background:silver;
    }
}

body {
	background:none;
	text-align:center;
    padding-top:14em;
}

main {
	position:relative;
	display:inline-block;
	width:48rem;
	height:18rem;
	
	perspective: 25rem;
}

/* de tekst */
section:first-of-type {
	position:absolute;
	width:36em; left:6em;
	padding:19rem 1rem 1rem;
	

	background:linear-gradient(to bottom, rgba(0,0,0,.2) 0%,rgba(255,255,255,0.2) 100%);
	border-radius:10%;
	border-style:solid;
	border-width:0.25rem 0.5rem 1.5rem;
	border-color:rgba(255,255,255,.75);
	box-shadow:inset 0 .2rem 0 .2em rgba(0,0,0,0.25), 0 .2rem .6rem .2rem rgba(0,0,0,0.5);
	
	transform: rotateX(30deg);
}

section:first-of-type * {
	font-family:monospace;
	line-height: 1.5em;
	padding:0;
	margin:0;
	color:rgba(0,0,0,.75);
	font-weight:bold;
	text-shadow:-1px -1px 1px rgba(0,0,0,.5), 1px 1px 1px rgba(255,255,255,1);
}

section:first-of-type h2 {
    font-size:2em;
}

@media (max-width:45em) {
	section:not(:nth-of-type(even)) {
		padding:17rem 1rem 1rem;
		border-width:0.2rem 0.4rem 1.25rem;
	}
	
	section:not(:nth-of-type(even)) h2 {
		font-size:1.5em;
	}
	
	section:not(:nth-of-type(even)) 9 {
		font-size:.9em;
	}
	
}

@media (max-width:36em) {
	section:not(:nth-of-type(even)) {
		padding-top:16rem 1rem 1rem;
		border-width:0.15rem 0.3rem 1rem;
	}
	
	section:not(:nth-of-type(even)) h2 {
		font-size:1.4em;
	}
	
	section:not(:nth-of-type(even)) p {
		font-size:.85em;
	}
}

@media (max-width:32em) {
	section:not(:nth-of-type(even)) {
		padding:15rem 1rem 1rem;
		border-width:0.15rem 0.3rem 1rem;
	}
	
	section:not(:nth-of-type(even)) h2 {
		font-size:1.3em;
	}
	
	section:not(:nth-of-type(even)) p {
		font-size:.8em;
	}
}

@media (max-width:29em) {
	section:not(:nth-of-type(even)) {
		padding:14rem 1rem 1rem;
		border-width:0.1rem 0.2rem .75rem;
	}
	
	section:not(:nth-of-type(even)) h2 {
		font-size:1.2em;
	}
	
	section:not(:nth-of-type(even)) p {
		font-size:.75em;
	}
}

@media (max-width:26em) {
	section:not(:nth-of-type(even)) {
		padding:13rem 1rem 1rem;
	}
	
	section:not(:nth-of-type(even)) h2 {
		font-size:1.1em;
	}
	
	section:not(:nth-of-type(even)) p {
		font-size:.7em;
	}
}

@media (max-width:24em) {
	section:not(:nth-of-type(even)) {
		padding:12rem 1rem 1rem;
	}
	
	section:not(:nth-of-type(even)) h2 {
		font-size:1em;
	}
	
	section:not(:nth-of-type(even)) p {
		font-size:.65em;
	}
}


/* jut en jul */
section:last-child {
	margin-top:7em;
}

/* het lijf */
@keyframes hetLijf {
    to {
    	width:10.5em;
    	height:14em;
    	margin:0 3em;
   	}
}

@keyframes laag {
	to {
		border-radius:50%/60% 60% 40% 40%;
		box-shadow:0 .25em 1em rgb(0,0,255), 0 .25em 2em rgb(0,0,255), 0 1em 2em -0.25em rgba(0,0,0,.5);
		transform:translate(15%,-40%) rotate(10deg);
	}
}

@keyframes hoog {
	to {
		border-radius:50%/40% 40% 60% 60%;
		box-shadow:0 0.2em 0 0.1em black, 0 7em 2em -0.5em rgba(0,0,0,.15);
		transform:translate(-25%,-100%) rotate(-10deg);
	}
}

section > div {
	width:14em;
	height:10.5em;
	display:inline-block;
	margin:0 1.5em;
	border-radius:50%/100% 100% 0 0;
}

section > div:first-of-type {
	padding-left:1em;
	background: radial-gradient(ellipse at 35% 35%, rgba(255,255,255,0.75) 0%, rgb(0,0,255) 50%), rgb(0,0,255);
	box-shadow:0 -.25em 1em rgb(0,0,255), 0 -.25em 2em rgb(0,0,255), 0 0 .5em rgba(0,0,0,.5);
	animation: hetLijf .7s .1s infinite alternate, laag .7s .1s infinite alternate;
}

section > div:last-of-type {
	padding-right:1em;
	background: radial-gradient(ellipse at 35% 35%, rgba(255,255,255,0.75) 0%, red 50%), red;
	border:solid .3em black;
	box-shadow:0 -0.2em 0 0.1em black, 0 0 .5em rgba(0,0,0,.5);
	animation: hetLijf .8s  infinite alternate, hoog .8s infinite alternate;
}

section > div:last-of-type:hover {
	background: radial-gradient(ellipse at 35% 35%, rgba(255,255,255,0.75) 0%, gold 50%), gold;
}

/* de ogen en de mond */
section:last-child > div div {
	border-radius: 50%;
	display: inline-block;
}

/* de ogen */
@keyframes oogLaag {
	to {
		box-shadow:0 .1em 0 .1em rgba(0,0,204,.5);
	}
}
@keyframes oogHoog {
	to {
		box-shadow:0 .1em 0 .1em rgba(204,0,0,.5);
	}
}
@keyframes oogHoogHover {
	to {
		box-shadow:0 .1em 0 .1em rgba(204,204,0,.5);
	}
}

section > div > div {
	background:white;
	width:40%;
	height:40%;
}

section > div:first-of-type > div {
	box-shadow:0 .7em 0 -.4em rgba(0,0,204,.5);
	animation: oogLaag .7s .15s ease-in-out infinite alternate;
}

section > div:last-of-type > div {
	box-shadow:0 .7em 0 -.4em rgba(204,0,0,.5);
	animation: oogHoog .8s .05s ease-in-out infinite alternate;
}

section > div:last-of-type:hover > div {
	box-shadow:0 .7em 0 -.4em rgba(204,204,0,.5);
	animation: oogHoogHover .8s .05s ease-in-out infinite alternate;
}

section > div:first-of-type > div:nth-child(2),
section > div:last-of-type > div:first-child {
	transform:scale(0.97);
}

/* de pupillen */
@keyframes pupil {
	to {
		-webkit-transform:translate(0,50%);
		transform:translate(0,50%);
	}
}

section > div > div > div {
	width:50%;
	height:50%;
	background: radial-gradient(ellipse at 35% 35%, white 0%,black 30%);
	animation: pupil ease-in-out infinite alternate;
}

section > div:first-of-type > div > div {
	animation-duration:.7s;
	animation-delay: .15s;
}

section > div:last-of-type > div > div {
	animation-duration:.8s;
	animation-delay: .05s;
}

/* de mond */
@keyframes mondHoog {
	to {
		width:8%;
		height:6%;
		margin-left:45%;
		margin-top:0;
		box-shadow:0 .2em 0 .15em black;
	}
}

@keyframes mondLaag {
	to {
		width:18%;
		height:8%;
		margin-left:45%;
		margin-top:30%;
		box-shadow:-.1em -.1em .75em .15em black, .1em .1em .75em .15em white;
	}
}

section > div > div:last-of-type {
	display:block;
	background:white;
	width:20%;
	height:5%;
	margin-left:40%;
	margin-top:35%;
}

section > div:first-of-type > div:last-of-type {
	box-shadow:.1em .1em 1.5em .15em black, -.1em -.1em 1.5em .15em white;
	animation: mondLaag .7s .15s ease-out infinite alternate;
}

section > div:last-of-type > div:last-of-type {
	border:solid .3em black;
	box-shadow:0 -.2em 0 .1em black;
	animation: mondHoog .8s .05s ease-out infinite alternate;
}

@media (max-width:52em) {
	main {
		width:90vw;
		perspective:40rem;
	}
	
	section:not(:nth-of-type(even)) {
		width:80%;
		margin:0;
		left:10%;
	}
}

@media (max-width:45em) {
	section > div {
		width:9.6em;
		height:7.2em;
		margin:0 1em;
	}
	
	@keyframes hetLijf {
		to {
			width:7.2em;
			height:9.6em;
			margin:0 2.2em;
		}
	}
}

@media (max-width:36em) {
	section > div {
		width:8.8em;
		height:6.6em;
		margin:0 0.85em;
	}
	
	@keyframes hetLijf {
		to {
			width:6.6em;
			height:8.8em;
			margin:0 1.95em;
		}
	}
}

@media (max-width:32em) {
	section > div {
		width:8em;
		height:6em;
		margin:0 0.7em;
	}
	
	@keyframes hetLijf {
		to {
			width:6em;
			height:8em;
			margin:0 1.7em;
		}
	}
}

@media (max-width:29em) {
	section > div {
		width:7.2em;
		height:5.4em;
		margin:0 0.55em;
	}
	
	@keyframes hetLijf {
		to {
			width:5.4em;
			height:7.2em;
			margin:0 1.45em;
		}
	}
}

@media (max-width:26em) {
	section > div {
		width:6.4em;
		height:4.8em;
		margin:0 0.4em;
	}
	
	@keyframes hetLijf {
		to {
			width:4.8em;
			height:6.4em;
			margin:0 1.2em;
		}
	}
}

@media (max-width:24em) {
	section > div {
		width:5.6em;
		height:4.2em;
		margin:0 0.25em;
	}
	
	@keyframes hetLijf {
		to {
			width:4.2em;
			height:5.6em;
			margin:0 .95em;
		}
	}
}


/**********/
/* RIBBON */
/**********/
.banner {
	position:fixed;
	left:calc(50% - 2em); top: -1em;
	z-index:1000;
	font-size:1em;
	line-height:1em;
	font-weight:normal;
	background-image:linear-gradient(45deg, transparent 2.82842712474619em, var(--sannes-blue) 2.82842712474619em), linear-gradient(315deg, transparent 2.82842712474619em, var(--sannes-blue) 2.82842712474619em);
	transition:top .5s;
}

.banner:hover {
	top:0;
}

.banner span, .banner a {
	display:block;
	width:4em; height:8em;
	padding:1.5em .25em 0;
	text-align:center;
	color:white;
	opacity:.5;
	transition:opacity .5s;
	text-decoration:none;
}

.banner span:hover, .banner a:hover {
	opacity:1;
}


@media (min-width:32em) {
	.banner {
		left:8em;
	}
}

/***********/
/* MAIL ME */
/***********/
.mail-me {
	position:fixed;
	z-index:1000;
	display:block;
	width:3.5em; height:3.5em;
	right:.5em; top:.5em;
	font:300 .875em 'Saira Condensed', sans-serif;
	text-align:center;
	padding-top:2em;
	color:transparent;
	background:url("https://www.sinds1971.nl/images/paperplain-333.svg") center .375em / 2em no-repeat;
	opacity:.25;
	transition:.5s;
}

.mail-me:hover,
.mail-me:focus {
	color:inherit;
	background-color:var(--translucent-color);
	opacity:1;
}

/* grijze rand */
.mail-me:hover::before,
.mail-me:focus::before{
	content:"";
	position:absolute;
	width:100%;height:100%;
	left:0; top:0;
	box-shadow:inset 0 0 0 .25em var(--very-translucent-color);
}