body{background-color: rgb(139, 213, 255);
margin: 0px;
	padding: 0px;
	
}

#pagina{background-image: url("../map/indexachtergrond.jpg");
font-size:15px;}

#h1{z-index: 100;
	position: absolute;
top: 00px;
left: 500px;}

#h2{z-index: 100;
	position: absolute;
top: 50px;
left: 540px;}

#smoes{z-index: 150;
position: absolute;
top: 140px;
left: 10px;}

#eiland{position: absolute;
	left:10px;
	top: 50px;
	  white-space: pre;
  }

#smile{ 
position: absolute;
top: 500px; 
left:600px;
animation-name: example;
animation-duration: 1s;
animation-iteration-count: infinite;}

#wolk1{background-color: rgb(255, 255, 255);
    width: 120px;
    height: 120px;
    border-radius: 100px;
	position: absolute;
	left: 00px;
	top: 500px;
	animation-name: wolk1;
	animation-duration: 50s;
	animation-iteration-count: infinite;}

#wolk2{background-color: rgb(255, 255, 255);
    width: 280px;
height: 70px;
border-radius: 100px 100px 50px 50px;
position: relative;
top: 55px;
right: 30px;}

#wolk3{background-color: rgb(255, 255, 255);
    width: 150px;
    height: 150px;
    position: relative;
    left: 60px;
    bottom: 100px;
    border-radius: 400px;}

#alien{
	position: absolute;
    top: 250px; 
    left:900px;
	animation-name: upanddown;
	animation-duration: 8s;
	animation-iteration-count: infinite;
}

#blok1 {
    background-color: blueviolet;
    height: 200px;
    width: 200px;
border-radius: 100000000000000000000000000000px;
position: absolute;
top: 100px;
left:150px;
  animation-name: spin;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-delay: 12s;
}
#blok2 {
    background-color: rgb(194, 129, 240);
    height: 200px;
    width: 200px;
    border-radius: 50px;
    position: absolute;
    left: 0px;
    top: 48px;
   transform: rotate(45deg);
z-index: 90;
animation-name: pin;
animation-iteration-count: infinite;
animation-duration: 1ms;

}
#blok3 {
    background-color: rgb(206, 137, 204);
    height: 50px;
    width: 50px;
    border-radius: 100px;
    position: absolute;
    left: 76px;
    bottom: 25px;
    z-index: 100;
}


#blok4{
height: 295px;
width: 50px;
position: absolute;
    left: 175px;
    top: 298px;
border-radius: 20px 20px 5px 5px;
z-index: -10;
	animation-name: trans;
    animation-duration: 20s;
    animation-iteration-count: infinite;
}
#blok5{
    width: 100px;
    height: 150px;
    border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
    position: absolute;
    margin: 50px auto;
    transform: rotate(-40deg);
  top: 330px;
left: 100px;
z-index: -1;
	  animation-name: trans;
    animation-duration: 20s;
    animation-iteration-count: infinite;
}
#blok6{  
    width: 100px;
    height: 150px;
    border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
    position: absolute;
   margin: 50px auto;
    transform: rotate(40deg);
    top: 360px;
    left: 200px;
    z-index: -100;
	  animation-name: trans;
    animation-duration: 20s;
    animation-iteration-count: infinite;
  }
  
#blok7{ background-color: rgb(156, 66, 240);
    width: 100px;
    height: 150px;
    border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
    position: relative;
    margin: 50px auto;
transform: rotate(150deg);
bottom: -170px;
left: 45px;
z-index: 80;
animation-name: example;
animation-duration: 2s;
animation-iteration-count: infinite;
}

#blok8{background-color: rgb(156, 66, 240);
    width: 100px;
    height: 150px;
    border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
    position: relative;
    margin: 50px auto;
transform: rotate(125deg);
bottom: 80px;
left: 120px;
z-index: 80;
 animation-name: example;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-delay: 1s;
}

#blok9{background-color: rgb(156, 66, 240);
    width: 100px;
    height: 150px;
    border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
    position: relative;
    margin: 50px auto;
transform: rotate(100deg);
bottom: 350px;
left: 170px;
z-index: 80;
animation-name: example;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-delay: 2s;
}

#blok10{background-color: rgb(156, 66, 240);
    width: 100px;
    height: 150px;
    border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
    position: relative;
    margin: 50px auto;
transform: rotate(70deg);
bottom: 630px;
left: 170px;
z-index: 80;
animation-name: example;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-delay: 3s;
}

#blok11{background-color: rgb(156, 66, 240);
    width: 100px;
    height: 150px;
    border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
    position: relative;
    margin: 50px auto;
transform: rotate(30deg);
position: relative;
bottom: 890px;
left: 110px;
z-index: 80;
animation-name: example;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-delay: 4s;
}

#blok12{background-color: rgb(156, 66, 240);
width: 100px;
height: 150px;
border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
    position: relative;
    margin: 50px auto;
transform: rotate(0deg);
position: relative;
bottom: 1130px;
right: -30px;
z-index: 80;
animation-name: example;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-delay: 5s;
}

#blok13{background-color: rgb(156, 66, 240);
    width: 100px;
    height: 150px;
    border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
        position: relative;
        margin: 50px auto;
    transform: rotate(-20deg);
    position: relative;
    bottom: 1320px;
    right: 55px;
    z-index: 80;
    animation-name: example;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-delay: 6s;
}

#blok14{background-color: rgb(156, 66, 240);
    width: 100px;
    height: 150px;
    border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
        position: relative;
        margin: 50px auto;
    transform: rotate(-45deg);
    position: relative;
    bottom: 1475px;
    right: 123px;
    z-index: 80;
    animation-name: example;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-delay: 7s;
}

#blok15{background-color: rgb(156, 66, 240);
    width: 100px;
    height: 150px;
    border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
        position: relative;
        margin: 50px auto;
    transform: rotate(-78deg);
    position: relative;
    bottom: 1600px;
    right: 150px;
    z-index: 80;
    animation-name: example;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-delay: 8s;
}

#blok16{background-color: rgb(156, 66, 240);
    width: 100px;
    height: 150px;
    border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
        position: relative;
        margin: 50px auto;
    transform: rotate(-110deg);
    position: relative;
    bottom: 1720px;
    right: 130px;
    z-index: 80; 
    animation-name: example;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-delay: 9s;
}

#blok17{background-color: rgb(156, 66, 240);
    width: 100px;
    height: 150px;
    border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
        position: relative;
        margin: 50px auto;
    transform: rotate(-130deg);
    position: relative;
    bottom: 1850px;
    right: 80px;
    z-index: 80; 
    animation-name: example;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-delay: 10s;
}
#blok18{background-color: rgb(156, 66, 240);
    width: 100px;
    height: 150px;
    border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
        position: relative;
        margin: 50px auto;
    transform: rotate(-170deg);
    position: relative;
    bottom: 2020px;
    right: 10px;
    z-index: 80; 
    animation-name: example;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-delay: 11s;
}

@keyframes example { 0%   {background-color: red;}
    10%  {background-color: rgb(255, 115, 0);}
    20%  {background-color: rgb(9, 255, 0);}
    30% {background-color: rgb(0, 191, 255);}
    40% {background-color:rgb(255, 151, 255) ;}
    50% {background-color: blueviolet;}
    60% {background-color:rgb(255, 151, 255) ;}
    70% {background-color: rgb(0, 191, 255);}
    80%  {background-color: rgb(9, 255, 0);}
    90%  {background-color: rgb(255, 115, 0);}
    100%  {background-color: rgb(242, 33, 22);}
    }
     @keyframes spin { 
        0% {transform: rotate(0deg);}
        25% {left: 1100px;}
        50% {transform: rotate(360deg);}
    }


@keyframes wolk1{
	0%{position: absolute;
	left: 0px;}
	50%{position: absolute;
	left: 1300px;}
	100%{position: absolute;
	left: -100px;}

}
	
@keyframes trans {
    0% {background-image: linear-gradient( rgb(27, 148, 27),rgb(27, 148, 27))}
    50% {background-image: linear-gradient( rgb(27, 148, 27), transparent);}
    100% {background-image: linear-gradient( transparent, transparent);}
}
	

@keyframes upanddown  {
  0%{transform: translateY(0);}
 50%{transform: translateY(-100px);}
 100%{transform: translateY(0);}
            }