* {
  box-sizing: border-box;
}

html, body{
  position: relative;
  height: 100%;
}

html {
  overflow:hidden;
}

body { 
  --zand1: rgba(224,215,196,1);
  --zand2: rgba(224,209,177,1);
  --zand3: rgba(224,204,153,1);
  --zand4: rgba(230,179,77,1);
  --zand5: rgba(229,153,79,1);
  --zand6: #cb792d;
  
  --groen1: #214348;
  --groen2: #113328;
  
  --grijs0: #ccc;
  --grijs1: rgba(192,192,192,1);
  --grijs2: #7b7e8d;
  --grijs3: #484742;
  --grijs4: #1c242d;
  
  --blauw1: #40b0f0;
  --blauw2: #1c99e9;
  --blauw3: #287bad;
  --blauw35: #186b9d;
  --blauw4: #03568a;
  --blauw5: #014061;
  --blauw55:#042e68;
  --blauw6: #112833;
  --blauw7: #081419;
  
  --bruin1: #85582e;
  --bruin2: #421b0c;
  --bruin3: #231313;
  
  --rood1: #b66b4b;
  --rood2: #b12d14;
  --rood3: #8a1a04;
  
  --perspective-origin-horizontal:64;
  --perspective-origin-vertical:64;
  
  margin:0;
  background-color:var(--blauw2);
  
  transform-style: preserve-3d;
}

main {
  position:relative;
  width:100%; height:100%;
  
  transform-style: preserve-3d;
  perspective-origin:
    calc(var(--perspective-origin-horizontal) * 1vw)
    calc(var(--perspective-origin-vertical) * 1vh);
  perspective:50vw;
  
  transition:perspective-origin .5s;
}

/**************/
/* MUUR LINKS */
/**************/
div.muurlinks {
  position: absolute;
  width:400vw; height:520vh;
  top:0; left:-15vw;
  
  transform-origin:left center;
  transform: rotateY(90deg);
  
  display:grid;
  grid-template-columns:25vw 19vw 96vw 38vw 224vw;
  grid-template-rows:2vh 41vh 23vh 49vh 1fr;
}

div.muurlinks div:nth-of-type(1) {
  grid-column:span 4;
  background-color:var(--grijs4);
}

div.muurlinks div:nth-of-type(2) {
  grid-column:1/3;
  background-color:var(--zand1);
}

div.muurlinks div:nth-of-type(3) {
  background-color:var(--zand3);
}

div.muurlinks div:nth-of-type(4) {
  grid-row:3/5;
  background-color:var(--zand3);
}

div.muurlinks div:nth-of-type(5) {
  grid-column:span 2;
  grid-row-start: 4;
  background-color:var(--zand2);
}

div.muurlinks div:nth-of-type(6) {
  grid-column:1/5;
  grid-row-start: -2;
  background-color:var(--blauw3);
}

div.muurlinks div:nth-of-type(7) {
  grid-column-start:4;
  grid-row:2/-2;
  background-color:var(--zand5);
}

div.muurlinks div:nth-of-type(8) {
  grid-column:4/5;
  grid-row-start: -2;
  background-color:var(--zand5);
  opacity:.25;
}

/* binnen */
div.muurlinks div:nth-of-type(9){
  position: relative;
  grid-column:-2/-1;
  grid-row:1/-1;
  background-color:var(--blauw3);
}

/* binnen raam */
div.muurlinks div:nth-of-type(9) div {
  position:absolute;
  width:146vw; height:25vh;
  left:39vw; top:41vh;
  background-color:var(--groen2);
}

/* buiten raam */
div.raam {
  position:absolute;
  width:115vw; height:23vh;
  left:-15vw; top:43vh;
  background-image:linear-gradient(var(--blauw7) 5vh, var(--blauw6) 5vh);
  
  transform-origin:-25vw center;
  transform:translateX(25vw) rotateY(90deg) translateZ(-7vw);
  transform-style: preserve-3d;
}

div.raam div:nth-of-type(1){
  position:absolute;
  width:7vw; height:100%;
  top:0; right:0;
  background-color:var(--grijs2);
  
  transform-origin:right center;
  transform:rotateY(90deg);
}

div.raam div:nth-of-type(2){
  position:absolute;
  width:100%; height:7vw;
  top:0; left:0;
  background-color:var(--grijs3);
  
  transform-origin:center top;
  transform:rotateX(90deg);
}

div.raam div:nth-of-type(3){
  position:absolute;
  width:100%; height:7vw;
  bottom:0; left:0;
  background-color:var(--grijs0);
  
  transform-origin:center bottom;
  transform:rotateX(-90deg);
}


/***************/
/* MUUR RECHTS */
/***************/
div.muurrechts {
  position: absolute;
  width:224vw; height:135vh;
  top:-20vh; right:-50vw; 
  
  background-color:var(--blauw4);
  
  transform-origin:right center;
  transform: rotateY(-90deg) translateX(-176vw);
}

/* deur */
div.muurrechts div {
  position:absolute;
  width:80vw; height:94vh;
  left:20vw; bottom:0;
  background-color:var(--groen1);
}


/***************/
/* MUUR ACHTER */
/***************/
div.achtermuur{
  position: absolute;
  width:165vw; height:540vh;
  left:-15vw; top:-20vh; 
  
  background-color:var(--blauw5);

  transform: translateZ(-400vw);
}

/* raam */
div.achtermuur div {
  position:absolute;
  width:120vw; height:27vh;
  left:22.5vw; top:59vh;
  background-color:var(--blauw7);
}


/*************/
/* MUUR VOOR */
/*************/
div.voormuur {
  position: absolute;
  width:330vw; height:520vh;
  left:-180vw; top:-20vh;

  transform: translateZ(-176vw);
  
  display:grid;
  grid-template-columns:165vw 3vw 76vw 3vw 60vw 8vw 15vw;
  grid-template-rows:40vh 18vh 77vh 1fr;
}

div.voormuur div:nth-of-type(1) {
  grid-column:1/2;
  grid-row:1/4;
  background-color:var(--grijs3);
}

div.voormuur div:nth-of-type(2) {
  grid-column:2/6;
  grid-row:2/3;
  background-color:var(--bruin3);
}

div.voormuur div:nth-of-type(3) {
  grid-column:2/3;
  grid-row:1/-1;
  background-color:var(--grijs4);
}

div.voormuur div:nth-of-type(4) {
  grid-column:4/5;
  grid-row:1/-1;
  background-color:var(--grijs4);
}

div.voormuur div:nth-of-type(5) {
  grid-column:6/7;
  grid-row:1/4;
  background-color:var(--bruin2);
}

div.voormuur div:nth-of-type(6) {
  grid-column:7/8;
  grid-row:1/4;
  background-color:var(--zand1);
}


/***********/
/* PLAFOND */
/***********/
div.plafond {
  position: absolute;
  width:330vw; height:224vw;
  left:-180vw; top:-20vh; 
  
  background-color:var(--rood2);
  
  transform-origin:center top;
  transform: rotateX(-90deg) translateY(176vw);
}


/*********/
/* VLOER */
/*********/
div.vloer{
  position: absolute;
  width:165vw; height:400vw;
  left:-15vw; bottom:-15vh;

  transform-origin:center bottom;
  transform: rotateX(90deg);
  
  display:grid;
  grid-template-columns:43vw 36vw 32vw 39vw 15vw;
  grid-template-rows:224vw 36vw 66vw 48vw 1fr;
}

div.vloer div:nth-of-type(1) {
  grid-column:1/-1;
  background-color:var(--zand4);
}

div.vloer div:nth-of-type(2) {
  grid-column:1/-2;
  grid-row:2/3;
  background-color:var(--zand2);
}

div.vloer div:nth-of-type(3) {
  grid-row:2/-2;
  background-color:var(--grijs1);
}

div.vloer div:nth-of-type(4) {
  grid-row:span 2;
  background-color:var(--blauw3);
  opacity:.25;
}

div.vloer div:nth-of-type(5) {
  grid-row:span 2;
  background-color:var(--blauw4);
  opacity:.25;
}

div.vloer div:nth-of-type(6) {
  background-color:var(--zand6);
}

div.vloer div:nth-of-type(7) {
  background-color:var(--grijs2);
}

div.vloer div:nth-of-type(8) {
  background-color:var(--rood1)
}

div.vloer div:nth-of-type(9) {
  background-color:var(--zand2);
}

div.vloer div:nth-of-type(10) {
  grid-column:1/-1;
  background-color:var(--zand3);
}

/* vloerrand */
div.vloerrand {
  position: absolute;
  width:79vw; height:6vh;
  left:-15vw; top:115vh;
  
  background-color:var(--grijs4);
  
  transform: translateZ(-140vw);
}

div.vloerrand2 {
  position: absolute;
  width:114vw; height:6vh;
  right:36vw; top:115vh;
  
  background-color:var(--grijs4);
  transform-origin:right center;
  transform: rotateY(-90deg) translateX(-26vw);
}


/***********/
/* ZWEMBAD */
/***********/
div.zwembadvloer {
  position: absolute;
  width:165vw; height:374vw;
  left:-15vw; bottom:-15vh;
  
  transform-origin:center bottom;
  transform:rotateX(90deg) translateY(-26vw) translateZ(-180vh);
  
  background-color:var(--blauw55);
}

/* muur */
div.zwembadmuur {
  position: absolute;
  width:374vw; height:180vh;
  right:-50vw; top:115vh;
  
  transform-origin:right center;
  transform:rotateY(-90deg) translateX(-26vw);
  
  background-color:var(--blauw4);
}


/*********/
/* GEVEL */
/*********/
div.gevel {
  position: absolute;
  width:330vw; height:50vh;
  left:-180vw; top:-50vh;
  
  background-color:var(--zand1);
  
  transform: translateZ(-140vw);
}

/* raam */
div.gevel div {
  position: absolute;
  width:90vw; height:30vh;
  left:70vw; bottom:0;
  
  background-image:linear-gradient(var(--blauw7) 5vh, var(--blauw6) 5vh);
}

div.gevelrand {
  position: absolute;
  width:15vw; height:36vw;
  right:-50vw; top:0;
  background-color:var(--blauw6);
  
  transform-origin: center top;
  transform:rotatex(-90deg) translateY(140vw); 
}

div.gevellinks {
  position: absolute;
  width:36vw; height:20vh;
  right:-35vw; top:-20vh;
  background-color:var(--blauw6);
  
  transform-origin:right center;
  transform:rotateY(90deg) translateX(176vw); 
}

div.gevelrechts {
  position: absolute;
  width:36vw; height:20vh;
  right:-50vw; top:-20vh;
  background-color:var(--zand1);
  
  transform-origin:right center;
  transform:rotateY(90deg) translateX(176vw); 
}


/**********/
/* ACHTER */
/**********/

aside {
  position:absolute;
  width:100vw; height:100vh;
  top:0; left:0;
  
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-template-rows: 20vh 24vh 20vh 4vh 8vh 1fr;
  transform:translateZ(-500vw);
}

aside div:nth-of-type(1) {
  grid-column:2;
  grid-row:1;
  background-color:var(--blauw1);
}

aside div:nth-of-type(2) {
  grid-column:1;
  grid-row:2/4;
  background-color:var(--blauw3);
}

aside div:nth-of-type(3) {
  grid-column:2;
  grid-row:2;
  background-color:var(--blauw35);
}

aside div:nth-of-type(4) {
  grid-column:3;
  grid-row:2;
  background-color:var(--blauw1);
}

aside div:nth-of-type(5) {
  grid-column:3;
  grid-row:3;
  background-color:var(--blauw35);
}

aside div:nth-of-type(6) {
  grid-column:1/-1;
  grid-row:4;
  background-color:var(--rood3);
}

aside div:nth-of-type(7) {
  grid-column:1/-1;
  grid-row:5;
  background-color:var(--bruin1);
}

aside div:nth-of-type(8) {
  grid-column:2;
  grid-row:6;
  background-color:var(--blauw1);
}

/*

@keyframes wiebelenbutton {
  0% { transform:rotate(-2deg); 
       width: 110px;
       height: 40px;
       font-size: 1.1em;}
  100% { transform:rotate(2deg); 
         width: 110px;
         height: 40px;
         font-size: 1.1em;}
}

button{
  background-color: #ff6699;
  width: 100px;
  height: 30px;
  color: white;
  position: absolute;
  z-index: 400;
  font-family: 'Raleway', sans-serif;
  text-align: center;
  padding: 5px;
  border-radius: 10px;
  top: 4%;
  left: 88%;
  border:none;
  font-size: 1em;
  border: 1px solid white;
  text-shadow: 2px 2px 5px grey;
}

button:hover{
  background-color: #e6004c;
  cursor:pointer;
  animation-name: wiebelenbutton ;
  animation-duration:.50s;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
  animation-direction:alternate-reverse;
}

body.visible button {
  background-color: #8a1a04;
  border: 1px solid black;
}

ul.achtergrond{
  position: absolute;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: #258abe;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 15% 20% 18% 5% 14% 10% 10% 10%;
}

@keyframes achtergrond {
  0% { filter:brightness(50%); }
  40% {filter:none;}
  50% { filter:none; }
  60% { filter:none; }
  100% { filter:brightness(50%); }
}

body.visible ul.achtergrond{
  animation-name: achtergrond ;
  animation-duration: 10s;
  animation-iteration-count:infinite;
}

ul.achtergrond li:nth-of-type(1){
  background-color: #189bed;
}

ul.achtergrond li:nth-of-type(2){
  background-color: #35a5e8;
}

ul.achtergrond li:nth-of-type(3){
  background-color: #1c99e9;
}

ul.achtergrond li:nth-of-type(4),{
  background-color: #1394e8;
}

ul.achtergrond li:nth-of-type(5){
  background-color: #1083c4;
}

ul.achtergrond li:nth-of-type(6){
  background-color: #40b0f0;
}

ul.achtergrond li:nth-of-type(9){
  background-color: #0773bc;
}

ul.achtergrond li:nth-of-type(12){
  background-color: #8a1a04;
}

ul.achtergrond li:nth-of-type(15){
  background-color: #85582e;
}

ul.dak{
  list-style: none;
  padding: 0;
  margin: 0;
  width: 58%;
  height: 15%;
  display: grid;
  grid-template-columns: 10fr 25fr;
  grid-template-rows: 5fr 1fr 7fr;
  position: absolute;
  top: 25%;
  left: 15%;
  z-index: 50;
}

ul.dak li:nth-of-type(1){
  background-color: #dbd3be;
  grid-row-start: 1;
  grid-row-end: 4;
  grid-column-start:1;
  grid-column-end:3;
}

ul.dak li:nth-of-type(2){
  background-color: #080705;
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start:1;
  grid-column-end:2;
}

ul.dak li:nth-of-type(3){
  background-color: #182037;
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start:1;
  grid-column-end:2;
  box-shadow: inset 0px 5px 5px #000;
}

ul.voorkant{
  list-style: none;
  padding: 0;
  margin: 0;
  width: 37%;
  height: 33%;
  display: grid;
  grid-template-columns: 6fr 1fr 16fr 1fr 16fr 2fr 4fr;
  grid-template-rows: 10fr 3fr 16fr;
  position: absolute;
  top: 38%;
  left: 32%;
  z-index: 10;
}

ul.voorkant li:nth-of-type(1){
  background-color: #484742;
  grid-row-start: 1;
  grid-row-end: 4;
  z-index: 10;
}

ul.voorkant li:nth-of-type(2){
  background-color: #231313;
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start:3;
  grid-column-end:6;
  z-index: 10;
}

ul.voorkant li:nth-of-type(3){
  background-color: #292933;
  grid-row-start: 1;
  grid-row-end: 4;
  grid-column-start:2;
  grid-column-end:3;
}

ul.voorkant li:nth-of-type(4){
  background-color: #2c242f;
  grid-row-start: 1;
  grid-row-end: 4;
  grid-column-start:4;
  grid-column-end:5;
}

ul.voorkant li:nth-of-type(5){
  background-color: #421b0c;
  grid-row-start: 1;
  grid-row-end: 4;
  grid-column-start:6;
  grid-column-end:7;
}

ul.voorkant li:nth-of-type(6){
  background-color: #c4b8a0;
  grid-row-start: 1;
  grid-row-end: 4;
  grid-column-start:7;
  grid-column-end:8;
}

.binnenin1{
  position:absolute;
  background-color: #287bad;
  width: 100px;
  height: 122px;
  left: 37%;
  top: 47.8%;
  transform: perspective(100px) rotateY(40deg);
  z-index: 2;
}

ul.binnenin2{
  list-style: none;
  padding: 0;
  margin: 0;
  width: 37%;
  height: 33%;
  display: grid;
  grid-template-columns: 10fr 13fr 10fr;
  grid-template-rows: 10fr 13fr 5.4fr;
  position: absolute;
  top: 38%;
  left: 32%;
  background-color:red;
}

ul.binnenin2 li:nth-of-type(1){
  background-color: #b12d14;
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start:1;
  grid-column-end:4;
}

ul.binnenin2 li:nth-of-type(2){
  background-color: #014061;
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start:2;
  grid-column-end:3;
}

ul.binnenin2 li:nth-of-type(3){
  background-color: #d7a029;
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start:1;
  grid-column-end:4;
}

.binnenin3{
  position:absolute;
  background-color: #03568a;
  width: 100px;
  height: 122px;
  left: 55.5%;
  top: 47.8%;
  transform: perspective(100px) rotateY(140deg);
  z-index: 2;

}

ul.grond{
  list-style: none;
  padding: 0;
  margin: 0;
  width: 17%;
  height: 29%;
  display: grid;
  grid-template-columns: 4.6fr 1fr 7fr 9fr;
  grid-template-rows: 2.2fr 2fr 8fr 8fr;
  position: absolute;
  top: 71%;
  left: 33.3%;
  z-index: 3;
}

ul.grond li:nth-of-type(1){
  background-color: #cdc197;
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start:1;
  grid-column-end:5;
}

ul.grond li:nth-of-type(2){
  background-color: #231f16;
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start:1;
  grid-column-end:5;
}

ul.grond li:nth-of-type(3){
  background-color: #3496bb;
  grid-row-start: 3;
  grid-row-end: 5;
  grid-column-start:1;
  grid-column-end:2;
}

ul.grond li:nth-of-type(4){
  background-color: #062e3a;
  grid-row-start: 3;
  grid-row-end: 5;
  grid-column-start:2;
  grid-column-end:3;
}

ul.grond li:nth-of-type(5){
  background-color: #0a79c0;
  grid-row-start: 3;
  grid-row-end: 5;
  grid-column-start:3;
  grid-column-end:4;
}

ul.grond li:nth-of-type(6){
  background-color: #004353;
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start:4;
  grid-column-end:5;
}

ul.grond li:nth-of-type(7){
  background-color: #042e68;
  grid-row-start: 4;
  grid-row-end: 5;
  grid-column-start:4;
  grid-column-end:5;
}

ul.grond2{
  list-style: none;
  padding: 0;
  margin: 0;
  width: 19%;
  height: 31.4%;
  display: grid;
  grid-template-columns: 10fr 15fr 5.4fr;
  grid-template-rows: 7.7fr 9fr 9fr;
  position: absolute;
  top: 71%;
  left: 50%;
  z-index: 10;
  transform-origin:left top;
  transform:perspective(16.6em) rotateX(75deg);
}

ul.grond2 li:nth-of-type(1){
  background-color: #cdc197;
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start:1;
  grid-column-end:3;
}

ul.grond2 li:nth-of-type(2){
  background-color: #cb792d;
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start:1;
  grid-column-end:2;
}

ul.grond2 li:nth-of-type(3){
  background-color: #7b7e8d;
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start:2;
  grid-column-end:3;
}

ul.grond2 li:nth-of-type(4){
  background-color: #b66b4b;
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start:1;
  grid-column-end:2;
}

ul.grond2 li:nth-of-type(5){
  background-color: #bdaf8a;
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start:2;
  grid-column-end:3;
}

ul.grond2 li:nth-of-type(6){
  background-color: #a4a4a6;
  grid-row-start: 1;
  grid-row-end: 4;
  grid-column-start:3;
  grid-column-end:4;
}

ul.zijkant{
  list-style: none;
  padding: 0;
  margin: 0;
  width: 48%;
  height: 41%;
  display: grid;
  grid-template-columns: 9fr 5fr 18fr 2fr 9.5fr 10fr;
  grid-template-rows: 1fr 15fr 8fr 15fr;
  position: absolute;
  top: 36.5%;
  left: 5.65%;
  z-index: 100;
  transform: perspective(250px) rotateY(45deg);
}

ul.zijkant li:nth-of-type(1){
  background-color: #2a2529;
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start:1;
  grid-column-end:6;
}

ul.zijkant li:nth-of-type(2){
  background-color: #d4ccb5;
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start:1;
  grid-column-end:3;
}

ul.zijkant li:nth-of-type(3){
  background-color: #d5c18e;
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start:3;
  grid-column-end:5;
}

ul.zijkant li:nth-of-type(4){
  background-color: #d98f48;
  grid-row-start: 2;
  grid-row-end: 5;
  grid-column-start:5;
  grid-column-end:6;
  z-index: 10;
}

ul.zijkant li:nth-of-type(5){
  background-color: #d2b983;
  grid-row-start: 3;
  grid-row-end: 5;
  grid-column-start:1;
  grid-column-end:2;
}

ul.zijkant li:nth-of-type(6){
  background-color: #03232e;
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start:2;
  grid-column-end:4;
  box-shadow: inset 0px 10px 10px #000;
}

ul.zijkant li:nth-of-type(7){
  background-color: #cfc4a8;
  grid-row-start: 4;
  grid-row-end: 5;
  grid-column-start:2;
  grid-column-end:5;
}

ul.zijkant li:nth-of-type(8){
  background-color: #787c7f;
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start:4;
  grid-column-end:5;
}

.onderdak1{
  width: 37px;
  height: 27px;
  background-color: #141a2a;
  position:absolute;
  top: 40%;
  left: 65.7%;
  z-index: 200;
}

.onderdak2{
  width: 0;
  height: 0;
  border-top: 27px solid #141a2a;
  border-right: 44px solid transparent;
  position: absolute;
  top:40%;
  left: 69%;
}

.raam{
  background-color: #020e1c;
  width: 100px;
  height: 30px;
  position: absolute;
  left: 46.3%;
  top: 55.5%;
}

 De animatie 

@keyframes bewegen {
  0% { top: 50%; }
  30% { top: 52%; }
  50% { top: 55%; }
  80% { top: 52%; }
  100% { top: 50%; }
}

.deflamingo {
  display: none;
}

body.visible .deflamingo {
  display: block;
  position:absolute;
  width:300px;
  height:300px;
  z-index: 200;
  top: 50%;
  left: 25%;
  animation-name: bewegen ;
  animation-duration: 5s;
  animation-iteration-count:infinite;
}

.kop{
  background-color: #ff6699;
  position:absolute;
  width: 90px;
  height: 50px;
  border-radius: 50%;
  left: 18%;
  top: 16%;
  z-index: 10;
}

@keyframes knipperen {
  0%{
    transform:scaleY(1);
  }
  48% {
    transform:scaleY(1);
  }
  50% {
    transform:scaleY(0);
  }
  52% {
    transform:scaleY(1);
  }
  100% {
    transform:scaleY(1);
  }
}

.oog{
  background-color: white;
  position: absolute;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  left: 20%;
  top: 20%;
  z-index: 10;
  animation-name: knipperen;
    animation-duration:4s;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
}

.pupil{
  background-color: black;
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  left: 25%;
  top: 25%;
  z-index: 10;
}

.snavel{
  background-color: #ffad33;
  position: absolute;
  width: 20px;
  height: 60px;
  border-radius:.5em 2em .5em .5em;
  left: 20%;
  transform:rotate(-120deg);
  top: 18%;
  z-index: 1;
  box-shadow:inset .20em .25em black;
}

.nek{
  background-color: #ff6699;
  position:absolute;
  width: 55px;
  height: 180px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  transform: rotate(20deg);
  left: 20%;
  top: 20%;
  z-index: 10;
}

@keyframes wiebelen {
  0% { transform:rotate(-2deg); }
  100% { transform:rotate(2deg); }
}

.band{
  background-color: #ff6699;
  position:absolute;
  width:250px;
  height:100px;
  border-radius: 50%;
  top: 55%;
  left: 5%;
  z-index: 10;
  box-shadow:inset -.75em -.75em #ff3377;
  animation-name: wiebelen;
  animation-duration:.50s;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
  animation-direction:alternate-reverse;
}

@keyframes bewegenzon {
  0% { top: 30%; }
  40% {top: 5%;}
  50% { top: 5%; }
  60% {top: 5%;}
  100% { top: 30%; }
}

.dezon{
  display: none;
}

body.visible .zon{
  width: 100px;
  height: 100px;
  background-color: #ffff00;
  position: absolute;
  border-radius: 50%;
  left: 20%;
  top: 5%;
  box-shadow: inset -.25em -.25em 30px #e67300;
  animation-name: bewegenzon ;
  animation-duration: 10s;
  animation-iteration-count:infinite;
}

*/