/* achter grond */
body {
    height: 100vh;
    margin: 0;
    background: rgb(87, 129, 243);
    /*background: linear-gradient(rgb(65, 112, 240), rgb(120, 209, 231));*/
}

body {
    transition: 2s;
}



/* stukken waarvan de wolk gemaakt is */
.wolka {
    height: 60px;
    width: 80px;
    border-radius: 50%;
    background-color: white;
    position: relative;
    top: 0px;
    left: 105px;
}

.wolkb {
    height: 75px;
    width: 100px;
    border-radius: 50%;
    background-color: white;
    position: relative;
    top: -50px;
    left: 20px;
}

.wolkc {
    height: 70px;
    width: 200px;
    border-radius: 50%;
    background-color: white;
    position: relative;
    top: -110px;
}

.wd {
    height: 100px;
    width: 200px;
    /*border: 3px solid;
    border-color: red;*/
    position: relative;
    animation: lrl1 10s infinite ease-in-out;
}




/* animaties */
@keyframes lrl1 {
    0% {transform: translateX(-150px);}
    50% {transform: translateX(150px);}
    100% {transform: translateX(-150px);}
}

@keyframes lrl2 {
    0% {transform: translateX(-100px);}
    50% {transform: translateX(100px);}
    100% {transform: translateX(-100px);}
}




/* positioneren van de wolken zelf */
#wolken1 {
    position: relative;
    margin: 0 auto;
    top: 30px;
    left: -500px;
}

#wolken2 {
    position: relative;
    margin: 0 auto;
    top: 0px;
    left: 300px;
}

#wolken3 {
    position: relative;
    margin: 0 auto;
    top: 100px;
    left: -700px;
}

#wolken4 {
    position: relative;
    margin: 0 auto;
    top: 100px;
    left: 600px;
}

#wolken5 {
    position: relative;
    margin: 0 auto;
    top: 240px;
    left: -100px;
}

#wolken6 {
    position: relative;
    margin: 0 auto;
    top: 200px;
    left: -600px;
}

#wolken7 {
    position: relative;
    margin: 0 auto;
    top: 150px;
    left: 500px;
}






/* eiland */
#eiland {
    height: 500px;
    width: 500px;
    /*border: 3px solid;
    border-color: red;*/
    position: relative;
    margin: 0 auto;
    top: -500px;
    animation: lrl2 10s infinite ease-in-out;
}



.steen1 {
    width: 0;
	height: 0;
	border-left: 200px solid transparent;
	border-right: 100px solid transparent;
	border-top: 300px solid #6e7475;
    position: relative;
    margin: 0 auto;
    top: 300px;
    left: -80px;
    z-index: -2;
}

.steen2 {
    width: 0;
	height: 0;
	border-left: 150px solid transparent;
	border-right: 200px solid transparent;
	border-top: 250px solid #656f70;
    position: relative;
    margin: 0 auto;
    top: 0px;
    left: 70px;
    z-index: -3;
}

.grond1 {
    width: 200px;
	height: 0;
	border-left: 70px solid transparent;
	border-right: 50px solid transparent;
	border-top: 25px solid #6d5036;
    position: relative;
    margin: 0 auto;
    top: -250px;
    left: -80px;
}

.grond2 {
    width: 200px;
	height: 0;
	border-left: 40px solid transparent;
	border-right: 100px solid transparent;
	border-top: 40px solid #7c583b;
    position: relative;
    margin: 0 auto;
    top: -275px;
    left: 80px;
}

.gras1 {
    width: 200px;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 50px solid transparent;
	border-top: 25px solid #22b35e;
    position: relative;
    margin: 0 auto;
    top: -330px;
    left: -120px;
    z-index: 1;
}

.gras2 {
    width: 200px;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 35px solid #22b35e;
    position: relative;
    margin: 0 auto;
    top: -355px;
    left: 140px;
    z-index: 1;
}

.gras3 {
    width: 150px;
	height: 0;
	border-left: 80px solid transparent;
	border-right: 20px solid transparent;
	border-top: 40px solid #22b35e;
    position: relative;
    margin: 0 auto;
    top: -390px;
    left: 0px;
    z-index: 1;
}

.water1 {
    width: 125px;
	height: 0;
	border-left: 0px solid transparent;
	border-right: 20px solid transparent;
	border-top: 10px solid #4676cf;
    position: relative;
    margin: 0 auto;
    top: -40px;
    left: -212px;
    z-index: 2;
}

.water2 {
    width: 3px;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 150px solid #4676cf;
    position: relative;
    margin: 0 auto;
    top: -40px;
    left: -283px;
    z-index: 2;
}

.water3 {
    width: 0px;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 0px solid transparent;
	border-bottom: 10px solid #4676cf;
    position: relative;
    margin: 0 auto;
    top: -200px;
    left: -286px;
    z-index: 2;
}

.gras4 {
    width: 150px;
	height: 0;
	border-left: 80px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 20px solid #22a358;
    position: relative;
    margin: 0 auto;
    top: -450px;
    left: 100px;
    z-index: 1;
}

.berg1 {
    width: 0px;
	height: 0;
	border-left: 100px solid transparent;
	border-right: 80px solid transparent;
	border-bottom: 150px solid #5e686e;
    position: relative;
    margin: 0 auto;
    top: -600px;
    left: -120px;
    z-index: -2;
}

.berg2 {
    width: 0px;
	height: 0;
	border-left: 200px solid transparent;
	border-right: 150px solid transparent;
	border-bottom: 260px solid #6b7983;
    position: relative;
    margin: 0 auto;
    top: -850px;
    left: 0px;
    z-index: -1;
}

.berg3 {
    width: 0px;
	height: 0;
	border-left: 100px solid transparent;
	border-right: 120px solid transparent;
	border-bottom: 200px solid #5e686e;
    position: relative;
    margin: 0 auto;
    top: -1050px;
    left: 120px;
    z-index: -2;
}


.sneeuw1 {
    width: 0px;
	height: 0;
	border-left: 34px solid transparent;
	border-right: 30px solid transparent;
	border-bottom: 50px solid #ffffff;
    position: relative;
    margin: 0 auto;
    top: 0px;
    left: -34px;
    z-index: 4;
}

.sneeuws1 {
    width: 0px;
	height: 0;
	border-left: 34px solid transparent;
	border-right: 30px solid transparent;
	border-bottom: 10px solid #5e686e;
    position: relative;
    margin: 0 auto;
    top: -10px;
    left: -34px;
    z-index: 4;
}

.sneeuw2 {
    width: 0px;
	height: 0;
	border-left: 55px solid transparent;
	border-right: 42px solid transparent;
	border-bottom: 70px solid #ffffff;
    position: relative;
    margin: 0 auto;
    top: 0px;
    left: -55px;
    z-index: 4;
}

.sneeuws2 {
    width: 0px;
	height: 0;
	border-left: 55px solid transparent;
	border-right: 42px solid transparent;
	border-bottom: 15px solid #6b7983;
    position: relative;
    margin: 0 auto;
    top: -15px;
    left: -55px;
    z-index: 5;
}

.sneeuw3 {
    width: 0px;
	height: 0;
	border-left: 45px solid transparent;
	border-right: 35px solid transparent;
	border-bottom: 55px solid #ffffff;
    position: relative;
    margin: 0 auto;
    top: 0px;
    left: -45px;
    z-index: 4;
}

.sneeuws3 {
    width: 0px;
	height: 0;
	border-left: 45px solid transparent;
	border-right: 35px solid transparent;
	border-bottom: 10px solid #5e686e;
    position: relative;
    margin: 0 auto;
    top: -10px;
    left: -45px;
    z-index: 4;
}

.sneeuw4 {
    width: 0px;
	height: 0;
	border-left: 30px solid transparent;
	border-right: 35px solid transparent;
	border-bottom: 70px solid #e9e9e9;
    position: relative;
    margin: 0 auto;
    top: -90px;
    left: -65px;
    z-index: 1;
}  

.sneeuw5 {
    width: 0px;
	height: 0;
	border-left: 45px solid transparent;
	border-right: 35px solid transparent;
	border-bottom: 90px solid #e9e9e9;
    position: relative;
    margin: 0 auto;
    top: -100px;
    left: 0px;
    z-index: 1;
}

.boomlijn {
    width: 500px;
    height: 10px;
    /*background-color: red;*/
    position: relative;
    margin: 0 auto;
    top: -1060px;
    left: 0px;
    z-index: 5;
}

.boomstam1 {
    width: 7px;
    height: 40px;
    background-color: rgb(117, 90, 60);
    position: relative;
    margin: 0 auto;
    top: -40px;
    left: -80px;
    z-index: 6;
}

.boomstam2 {
    width: 7px;
    height: 40px;
    background-color: rgb(117, 90, 60);
    position: relative;
    margin: 0 auto;
    top: -100px;
    left: 60px;
    z-index: 6;
}

.boomstam3 {
    width: 7px;
    height: 40px;
    background-color: rgb(117, 90, 60);
    position: relative;
    margin: 0 auto;
    top: -120px;
    left: 130px;
    z-index: 6;
}

.b1blad1 {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: rgb(240, 53, 224);
    position: relative;
    margin: 0 auto;
    top: 0px;
    left: 0px;
    z-index: 7;
}
.b1blad2 {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: rgb(247, 108, 216);
    position: relative;
    margin: 0 auto;
    top: -50px;
    left: -10px;
    z-index: 7;
}
.b1blad3 {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: rgb(214, 31, 214);
    position: relative;
    margin: 0 auto;
    top: -65px;
    left: -20px;
    z-index: 7;
}

.b2blad1 {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: rgb(226, 71, 213);
    position: relative;
    margin: 0 auto;
    top: 0px;
    left: 3px;
    z-index: 7;
}
.b2blad2 {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: rgb(218, 23, 201);
    position: relative;
    margin: 0 auto;
    top: -45px;
    left: -10px;
    z-index: 7;
}
.b2blad3 {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: rgb(236, 111, 226);
    position: relative;
    margin: 0 auto;
    top: -58px;
    left: -20px;
    z-index: 7;
}

.b3blad1 {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: rgb(235, 94, 200);
    position: relative;
    margin: 0 auto;
    top: 0px;
    left: 0px;
    z-index: 7;
}
.b3blad2 {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: rgb(240, 53, 224);
    position: relative;
    margin: 0 auto;
    top: -50px;
    left: -10px;
    z-index: 7;
}
.b3blad3 {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: rgb(196, 11, 212);
    position: relative;
    margin: 0 auto;
    top: -60px;
    left: -20px;
    z-index: 7;
}














.button {
    position: relative;
    float: right;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    margin-top: 100px;
    margin-left: 100px;
    margin-right: 100px;
    transition: 2s;
}

.buttone {
    position: relative;
    float: right;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    margin-top: 100px;
    margin-left: 100px;
    margin-right: 1720px;
    transition: 2s;
}


.button:hover{
    cursor: pointer;
}

.buttone:hover{
    cursor: pointer;
}







.dark-mode {
    background: rgb(51, 59, 116);
    /*background: linear-gradient(rgb(49, 59, 124), rgb(32, 33, 46));*/
}

.sun {
    background-color: transparent;
    box-shadow: -6px 1px 0 3px #d1d8dd;
    border-left:3px solid #92989e;
    border-radius:50%;
    width: 100px;
    height: 100px;
    margin-left:8px;
    margin-top:0px;
    transition: 2s;
}

.moon {
    background-color: #fdd462;
    box-shadow: 2px 0px 0px 1px #D19C29;
    border-radius:50%;
    width: 100px;
    height: 100px;
    transition: 2s;
}