body {
    transition: 1.5s;
    background: fixed;
    
}
    .night-toggle{
        width: 33px;
        height: 33px;
        right: 20px;
        top: 20px;
        position: absolute;
    }
    
    .night-toggle:hover{
        cursor: pointer;
    }

    .moon{
        width: 90px;
        height: 90px;
        background-color: transparent;
        box-shadow: -17px 1px 0 15px #28435a;
        border-left:3px solid #27476D ;
        transition: 2s;
        border-radius: 50%;
        margin-left:-1700px;
        margin-top:50px;
    }

    .sun {
        background-color: #eed811;
        box-shadow: 2px 0px 0px 1px #d19d2c;
        border-radius:50%;
        width: 230px;
        height: 230px;
        transition: 2s;
        margin-top: 50px;
        margin-left: -200px;
    }

    /* ----- optional ----- */
.break {
  flex-basis: 100%;
  height: 0;
}
.opt {
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
  font-family: sans-serif;
  margin-top:5%;
  text-align:center;
}


#wolkendoos{
    width: 300px;
    height: 180px;
    border: ;
    position:relative;
    margin:0 auto;
    top:190px;
    animation-name: cloud1;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    z-index: -20;

}

.wolk1 {
    width: 150px;
    height: 50px;
    border-radius: 100px;
    background-color: white;
    position: relative;
    margin: 0;
    top: 90px;
    left: 75px;
 


}

.wolk2 {
    height: 50px;
    width: 50px;
    border-radius: 25px;
    background-color: white;
    position: relative;
    left: 90px;
    top: px;

}

.wolk3 {
    width: 75px;
    height: 75px;
    border-radius: 50px;
    background-color: white;
    position: relative;
    left: 125px;
    top: -70px;

}

#wolkendoos2{
    width: 300px;
    height: 180px;
    border: ;
    position:relative;
    margin:0 auto;
    top:400px; left: -360px;
    animation-name: cloud2;
    animation-duration: 8s;
    animation-iteration-count: infinite;
}

#wolkendoos3{
    width: 300px;
    height: 180px;
    border: ;
    position:relative;
    margin:0 auto;
    top: -250px; left: 420px;
animation-name: cloud3;
animation-duration: 8s;
animation-iteration-count: infinite;}

#wolkendoos4{
    width: 300px;
    height: 180px;
    border;
    position:relative;
    margin:0 auto;
    top: -550px; left: -500px; ;
animation-name: cloud4;
animation-duration: 8s;
animation-iteration-count: infinite;}

#wolkendoos5{
    width: 300px;
    height: 180px;
    border: ;
    position:relative;
    margin:0 auto;
    top:px; left: 400px;
    animation-name: cloud5;
    animation-duration: 8s;
    animation-iteration-count: infinite;
}

@keyframes cloud1{
    0% {transform: translateX(70%);}
    100% {transform: translateX(-900%);}

}
@keyframes cloud2{
    0%{left: -360px;}
    50%{left: -600px;}
    100%{left: -1050px;}
}
@keyframes cloud3{
    0%{transform: translateX(100%);}
   100%{transform: translateX(-100%);}
}
@keyframes cloud4{
    0%{transform:translateX (100%)}
    100%{transform: translateX(-1000%);}
}
@keyframes cloud5{
    0%{transform: translateX(100%) }
    100%{transform: translateX(-500%s);}
}
#wolkendoos6{
    width: 150px;
    height: 90px;
    border: ;
    position: relative;
    margin: 0% auto;
    top: -400px; left:-300px ;
    animation-name: cloud6;
    animation-duration: 8s;
    animation-iteration-count: infinite;
}

.wolkje1{
    width: 30px;
    height: 30px;
    border-radius: 25px;
    background-color: white;
    position: relative;
    top: 20px; left: 40px;
}
.wolkje2{
    width: 110px; 
    height: 30px;
    border-radius: 100px;
    background-color: white;
    position: relative;
    top: 15px; left: 20px;
}
.wolkje3{
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background-color: white;
    position: relative;
    top: -50px; left: 65px;
}

#wolkendoos7{
    width: 150px;
    height: 90px;
    border: ;
    position: relative;
    margin: 0% auto;
    top: -550px; left: 2000px;
    animation-name: cloud7;
    animation-duration: 8s;
    animation-iteration-count: infinite;
}


#wolkendoos8{
    width: 150px;
    height: 90px;
    border: ;
    position: relative;
    margin: 0% auto;
    top: -800px; left:-750px ;
    animation-name: cloud8;
    animation-duration: 8s;
    animation-iteration-count: infinite;
}

#wolkendoos9{
    width: 150px;
    height: 90px;
    border: ;
    position: relative;
    margin: 0% auto;
    top: -350px; left: 1100px; 
    animation-name: cloud9;
    animation-duration: 8s;
    animation-iteration-count: infinite;
}


#wolkendoos12{
    width: 150px;
    height: 90px;
    border: ;
    position: relative;
    margin: 0% auto;
    top: -1500px; left: 1200px;
    animation-name: cloud12;
    animation-duration: 8s;
    animation-iteration-count: infinite;
}

@keyframes cloud6{
    0%{left: -300px;}
    100%{left: -1200px;}
}

@keyframes cloud7{
    0%{left: 2000px;}
    100%{left: -2000px;}
    
}

@keyframes cloud8{
    0%{transform: translateX(100%);}
    100%{transform: translateX(-200%);}
}

@keyframes cloud9{
    0%{transform: translateX(100%);}
    100%{transform: translateX(-3000px);}
}
@keyframes cloud12{
    0%{left: 5000px;}
    100%{left: 500px;}
}


#wolkendoos10{
    width: 400px;
    height: 280px;
    border: ;
    margin: 0% auto;
    position: relative;
    top: -1150px; left: 1100px;
    animation-name: cloud10;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    z-index: -10;

}

.wolkje4{
    width: 230px;
    height: 75px;
   border-radius: 50px;
    background-color: white;
    position: relative;
    top: 180px; left: 70px;
}
.wolkje5{
    width: 75px;
    height: 75px;
   border-radius: 50px;
    background-color: white;
    position: relative;
    top: 40px; left: 105px;
}
.wolkje6{
    width: 100px;
    height: 100px;
   border-radius: 50px;
    background-color: white;
    position: relative;
    top: -55px; left: 150px;
}

#wolkendoos11{
    width: 400px;
    height: 280px;
    border: ;
    margin: 0% auto;
    position: relative;
    top: -1000px; left: 1500px;
    animation-name: cloud11;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    z-index: 100;

}
@keyframes cloud10{
    0%{left: 1100px;}
    100%{left: -500px;}
}
@keyframes cloud11{
    0%{left: 1500px;}
    100%{left: -800px;}
} 

#islandbox{
    width: 750px;
    height: 600px;
    border: ;
    margin: 0% auto;
    position: relative;
    top: -1700px;
    animation-name: island;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
#ground{
    width: 0;
	height: 0;
	border-left: 170px solid transparent;
	border-right: 170px solid transparent;
	border-top: 330px solid #353331;
    position: relative;
    top: 250px; left: 190px;
    z-index: 2;
}

#dirt{
    width: 0px;
    height: 0px;
    border-left: 180px solid transparent;
	border-right: 180px solid transparent;
	border-top: 330px solid #312715;
    position: relative;
    top: -100px; left: 180px;
    z-index: 1;
}
#grass{
    width: 0px;
    height: 0px;
    border-left: 185px solid transparent;
	border-right: 185px solid transparent;
	border-top: 330px solid #1b8312;
    position: relative;
    top: -440px; left: 175px;
    z-index: 0;
}
#mountain{
    width: 0;
	height: 0;
	border-left: 90px solid transparent;
	border-right: 90px solid transparent;
	border-bottom: 200px solid #333232;
    position: relative;
    top: -965px; left: 275px;
    z-index: -15;
}
#snowtop{
    width: 0;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 50px solid #dfd7d7;
    position: relative;
    top: -1170px; left: 345px;
    z-index: -14;

}
#mountain2{
    width: 0;
	height: 0;
	border-left: 70px solid transparent;
	border-right: 70px solid transparent;
	border-bottom: 170px solid #4d4949;
    position: relative;
    top: -1170px; left: 360px;
    z-index: -4;
}
#snowtop2{
    width: 0;
	height: 0;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-bottom: 40px solid #ffffff;
    position: relative;
    top: -1345px; left: 415px;
    z-index: -3;
}
#mountain3{
    width: 0;
	height: 0;
	border-left: 70px solid transparent;
	border-right: 70px solid transparent;
	border-bottom: 170px solid #3b3939;
    position: relative;
    top: -1400px; left: 200px;
    z-index: -13;
}
#snowtop3{
    width: 0;
	height: 0;
	border-left: 17px solid transparent;
	border-right: 17px solid transparent;
	border-bottom: 40px solid #f1e2e2;
    position: relative;
    top: -1570px; left: 253px;
    z-index: -12;
}
#ground2{
    width: 0;
	height: 0;
	border-left: 150px solid transparent;
	border-right: 150px solid transparent;
	border-top: 240px solid #3f3e3d;
    position: relative;
    top: -1360px; left: 90px;
    z-index: 10;
}
#dirt2{
width: 0;
	height: 0;
	border-left: 160px solid transparent;
	border-right: 160px solid transparent;
	border-top: 240px solid #3a270f;
    position: relative;
    top: -1615px; left: 80px;
    z-index: 9;
}
#grass2{
    width: 0;
	height: 0;
	border-left: 165px solid transparent;
	border-right: 165px solid transparent;
	border-top: 240px solid #17861c;
    position: relative;
    top: -1865px; left: 73px;
    z-index: 8;
}
#mountain4{
    width: 0;
	height: 0;
	border-left: 70px solid transparent;
	border-right: 70px solid transparent;
	border-bottom: 170px solid #4e4b4b;
    position: relative;
    top: -2270px; left: 110px;
    z-index:7;
}
#snowtop4{
    width: 0;
	height: 0;
	border-left: 18px solid transparent;
	border-right: 18px solid transparent;
	border-bottom: 40px solid #f1e2e2;
    position: relative;
    top: -2439px; left: 162px;
    z-index: 8;
}
#mountain5{
    width: 0;
	height: 0;
	border-left: 80px solid transparent;
	border-right: 80px solid transparent;
	border-bottom: 190px solid #424040;
    position: relative;
    top: -2500px; left: 75px;
    z-index:6;
}
#snowtop5{
    width: 0;
	height: 0;
	border-left: 18px solid transparent;
	border-right: 18px solid transparent;
	border-bottom: 41px solid #f1e2e2;
    position: relative;
    top: -2690px; left: 137px;
    z-index: 7;
}
#stamboom{
    width: 15px;
    height: 60px;
    background-color: rgb(90, 63, 13);
    position: relative;
    top: -2605px; ; left: 240px; 
    z-index: 10;
}


.bladeren{
    width: 0;
	height: 0;
	border-left: 18px solid transparent;
	border-right: 18px solid transparent;
	border-bottom: 41px solid #408f1c;
    position: relative;
    top: -px; left: -10px;
    z-index: 11;
}
.bladeren2{
    width: 0;
	height: 0;
	border-left: 18px solid transparent;
	border-right: 18px solid transparent;
	border-bottom: 41px solid #469721;
    position: relative;
    top: -55px; left: -10px;
    z-index: 11;
}

#stamboom2{
    width: 15px;
    height: 60px;
    background-color: rgb(90, 63, 13);
    position: relative;
    top: -2665px; ; left: 275px; 
    z-index: 10;
}
#stamboom3{
    width: 15px;
    height: 60px;
    background-color: rgb(90, 63, 13);
    position: relative;
    top: -2725px; ; left: 310px; 
    z-index: 10;
}

#stamboom4{
    width: 15px;
    height: 60px;
    background-color: rgb(90, 63, 13);
    position: relative;
    top: -2785px; ; left: 345px; 
    z-index: 10;
}

#stamboom5{
    width: 15px;
    height: 60px;
    background-color: rgb(90, 63, 13);
    position: relative;
    top: -2845px; ; left: 380px; 
    z-index: 10;
}
#groteboom{
    width: 15px;
    height: 90px;
    background-color: #3f2a11;
    position: relative;
    top: -2935px; left: 257px; ;
    z-index: 8;
}
.bladeren3 {
    width: 0px;
    height: 0px;
    border-left: 24px solid transparent;
    border-right: 24px solid transparent;
    border-bottom:65px solid rgb(19, 71, 15) ;
    position: relative;
    top: 10px; left: -16px;
}
.bladeren4{ width: 0px;
    height: 0px;
    border-left: 24px solid transparent;
    border-right: 24px solid transparent;
    border-bottom:65px solid rgb(24, 95, 17) ;
    position: relative;
    top: -80px; left: -16px;s
}
#groteboom2{
    width: 15px;
    height: 90px;
    background-color: #3f2a11;
    position: relative;
    top: -3025px; left: 292px; ;
    z-index: 8;
}
#groteboom3{
    width: 15px;
    height: 90px;
    background-color: #3f2a11;
    position: relative;
    top: -3115px; left: 327px; ;
    z-index: 8;
}
#groteboom4{
    width: 15px;
    height: 90px;
    background-color: #3f2a11;
    position: relative;
    top: -3205px; left: 362px; ;
    z-index: 8;
}
#rock3{
    width: 0;
	height: 0;
	border-left: 120px solid transparent;
	border-right: 120px solid transparent;
	border-top: 200px solid #4e4b48;
    position: relative;
    top: -3140px; left: 330px;
    z-index: 100; 
}
#dirt3{
    width: 0;
	height: 0;
	border-left: 126px solid transparent;
	border-right: 126px solid transparent;
	border-top: 200px solid #35210e;
    position: relative;
    top: -3350px; left: 325px;
    z-index: 99; 

}
#grass3{
    width: 0;
	height: 0;
	border-left: 131px solid transparent;
	border-right: 131px solid transparent;
	border-top: 200px solid #166806;
    position: relative;
    top: -3560px; left: 321px;
    z-index: 98; 
}
#towerL{
    width: 20px;
    height: 80px;
    background-color: #686565;
    position: relative;
    top: -3840px; left: 380px;
    z-index: 101;
}
.towerL2{
    width: 35px;
    height: 20px;
    background-color: #4b4b48;
    position: relative;
    top: 60px; left: -7px;
    z-index: 102;
}
.towerL3{
    width: 40px;
    height: 25px;
    background-color: #534f4f;
    position: relative;
    top: -20px; left: -10px;
    z-index: 102;
}
.towerL4{
    width: 45px;
    height: 10px;
    background-color: #7a7977;
    position: relative;
    top: -43px;left:-12px;
    z-index: 103;
}
.towerL5{
    width: 8px;
    height: 15px;
    background-color: #635c5c;
    position: relative;
    top: -67px; left: -12px;
    z-index: 104;
}
.towerL6{
    width: 8px;
    height: 15px;
    background-color: #635c5c;
    position: relative;
    top: -82px; left: px;
    z-index: 104;
}
.towerL7{
    width: 8px;
    height: 15px;
    background-color: #635c5c;
    position: relative;
    top: -97px; left: 12px;
    z-index: 104;
}
.towerL8{
    width: 8px;
    height: 15px;
    background-color: #635c5c;
    position: relative;
    top: -112px; left: 24px;
    z-index: 104;
}
.towerL9{
    width: 40px;
    height: 10px;
    background-color: #7a7977;
    position: relative;
    top: -50px;left:-9px;
    z-index: 104;
}
#towerL2{
    width: 20px;
    height: 80px;
    background-color: #686565;
    position: relative;
    top: -3920px; left: 550px;
    z-index: 101;
}
#wall{
    width: 150px;
    height: 40px;
    background-color: #585050;
    position: relative;
    top: -3960px; left: 400px;
    z-index: 90;
}
.wall2{
    width: 150px;
    height: 7px;
    background-color: #8a8787;
    position: relative;
    top: 4px; left: px;
    z-index:  120;
}
.wall3{
    width: 13px;
    height: 20px;
    background-color: #5e5656;
    position: relative;
    top:-20px; left: 8px;
    z-index:  95;
}

.wall4{
    width: 13px;
    height: 20px;
    background-color:#504b4b ;
    position: relative;
    top: -40px; left: 28px;
    z-index:  95;
}

.wall5{
    width: 13px;
    height: 20px;
    background-color:#524d4d ;
    position: relative;
    top: -60px; left: 48px;
    z-index:  95;
}
.wall6{
    width: 13px;
    height: 20px;
    background-color:#4d4646 ;
    position: relative;
    top: -80px; left: 68px;
    z-index:  95;
}

.wall7{
    width: 13px;
    height: 20px;
    background-color:#504a4a ;
    position: relative;
    top: -100px; left: 88px;
    z-index:  95;
}
.wall8{
    width: 13px;
    height: 20px;
    background-color:#554f4f ;
    position: relative;
    top: -120px; left: 108px;
    z-index:  95;
}
.wall9{
    width: 13px;
    height: 20px;
    background-color:#5a5656 ;
    position: relative;
    top: -140px; left: 128px;
    z-index:  95;
}
#castle{
    width: 110px;
    height: 110px;
    background-color: #867b7b;
    position: relative;
    top: -4060px; left:420px;
    z-index: 80;
}
.castle2{
    width: 120px;
    height: 7px;
    background-color: #474343;
    position: relative;
    top: 3px; left: -5px;
    z-index: 81;
}
.castle3{
    width: 15px;
    height: 21px;
    background-color: #726d6d;
    position: relative;
    top: -24px; left:-5px;
    z-index: 820;
}
.castle4{
    width: 15px;
    height: 21px;
    background-color: #555151;
    position: relative;
    top: -45px; left:15px;
    z-index: 800;
}

.castle5{
    width: 15px;
    height: 21px;
    background-color: #746b6b;
    position: relative;
    top: -66px; left:37px;
    z-index: 800;
}
.castle6{
    width: 15px;
    height: 21px;
    background-color: #5c5c5c;
    position: relative;
    top: -87px; left:59px;
    z-index: 800;
}
.castle7{
    width: 15px;
    height: 21px;
    background-color: #968f8f;
    position: relative;
    top: -108px; left:79px;
    z-index: 80;
}
.castle8{
    width: 15px;
    height: 21px;
    background-color: #535050;
    position: relative;
    top: -129px; left:100px;
    z-index: 80;
}




@keyframes island{
    0%{top: -1700px;}
    25%{top: -1800px;}
    50%{top: -1700px;}
    75%{top: -1600px;}
    100%{top: -1700px;}

}