body{
    background-color: #0d73e7;

}
#wolkendoos{
    width: 300px;
    height: 100px;
    
    position: relative;
    top: 400px;
    left: -20;
    animation: wolk1 5s infinite;
}

#wolklangdeel{
    width: 150px;
    height: 50px;
    border-radius: 100px;
    background-color: white;
    position: relative;
    top: -50px;
}

#wolkkleinbolletje{
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: white;
    position: relative;
    top: -140px;
    left: 20px;
}

#wolkgrootbolletje{
    width: 75px;
    height: 75px;
    border-radius: 50px;
    background-color: white;
    position: relative;
    top: -195px;
    left: 50px;
}



#wolkendoos2{
    width: 300px;
    height: 100px;
    
    position: relative;
   top: 600px;
   left: 200px;
   animation: wolk2 5s infinite;
   z-index: -500;
}

#wolklangdeel2{
    width: 150px;
    height: 50px;
    border-radius: 100px;
    background-color: white;
    position: relative;
    top: -50px;
}

#wolkkleinbolletje2{
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: white;
    position: relative;
    top: -140px;
    left: 20px;
}

#wolkgrootbolletje2{
    width: 75px;
    height: 75px;
    border-radius: 50px;
    background-color: white;
    position: relative;
    top: -195px;
    left: 50px;
}





#wolkendoos3{
    width: 300px;
    height: 100px;
    
    position: relative;
    top: -100px;
    left: 600px;
    animation: wolk3 5s infinite;
}

#wolklangdeel3{
    width: 150px;
    height: 50px;
    border-radius: 100px;
    background-color: white;
    position: relative;
    top: -50px;
}

#wolkkleinbolletje3{
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: white;
    position: relative;
    top: -140px;
    left: 20px;
}

#wolkgrootbolletje3{
    width: 75px;
    height: 75px;
    border-radius: 50px;
    background-color: white;
    position: relative;
    top: -195px;
    left: 50px;
}




#wolkendoos4{
    width: 100px;
    height: 100px;
    
    position: relative;
    top: -100px;
    left: 1100px;
    animation: wolk4 5s infinite;
    z-index: 10;
}

#wolklangdeel4{
    width: 150px;
    height: 50px;
    border-radius: 100px;
    background-color: white;
    position: relative;
    top: -50px;
}

#wolkkleinbolletje4{
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: white;
    position: relative;
    top: -140px;
    left: 20px;
}

#wolkgrootbolletje4{
    width: 75px;
    height: 75px;
    border-radius: 50px;
    background-color: white;
    position: relative;
    top: -195px;
    left: 50px;
}



#wolkendoos5{
    width: 300px;
    height: 100px;
    
    position: relative;
    top: 390px;
    left: 1100px;
    animation: wolk5 5s infinite;
}

#wolklangdeel5{
    width: 150px;
    height: 50px;
    border-radius: 100px;
    background-color: white;
    position: relative;
    top: -50px;
}

#wolkkleinbolletje5{
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: white;
    position: relative;
    top: -140px;
    left: 20px;
}

#wolkgrootbolletje5{
    width: 75px;
    height: 75px;
    border-radius: 50px;
    background-color: white;
    position: relative;
    top: -195px;
    left: 50px;
}


#wolkendoos6{
    width: 300px;
    height: 100px;
    
    position: relative;
    top: -400px;
    left: -200;
    animation: wolk6 20s infinite;
}

#wolklangdeel6{
    width: 150px;
    height: 50px;
    border-radius: 100px;
    background-color: white;
    position: relative;
    top: -50px;
}

#wolkkleinbolletje6{
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: white;
    position: relative;
    top: -140px;
    left: 20px;
}

#wolkgrootbolletje6{
    width: 75px;
    height: 75px;
    border-radius: 50px;
    background-color: white;
    position: relative;
    top: -195px;
    left: 50px;
}

#wolkendoos7{
    width: 300px;
    height: 100px;
   
    position: relative;
    top: 400px;
    left: -20;
    animation: wolk7 15s infinite;
}

#wolklangdeel7{
    width: 150px;
    height: 50px;
    border-radius: 100px;
    background-color: white;
    position: relative;
    top: -50px;
}

#wolkkleinbolletje7{
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: white;
    position: relative;
    top: -140px;
    left: 20px;
}

#wolkgrootbolletje7{
    width: 75px;
    height: 75px;
    border-radius: 50px;
    background-color: white;
    position: relative;
    top: -195px;
    left: 50px;
}


#wolkendoos8{
    width: 300px;
    height: 100px;
   
    position: relative;
    top: 400px;
    left: -20;
    animation: wolk8 30s infinite;
}

#wolklangdeel8{
    width: 150px;
    height: 50px;
    border-radius: 100px;
    background-color: white;
    position: relative;
    top: -50px;
}

#wolkkleinbolletje8{
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: white;
    position: relative;
    top: -140px;
    left: 20px;
}

#wolkgrootbolletje8{
    width: 75px;
    height: 75px;
    border-radius: 50px;
    background-color: white;
    position: relative;
    top: -195px;
    left: 50px;
}


#wolkendoos9{
    width: 300px;
    height: 100px;
   
    position: relative;
    top: 400px;
    left: -20;
    animation: wolk9 24s infinite;
}

#wolklangdeel9{
    width: 150px;
    height: 50px;
    border-radius: 100px;
    background-color: white;
    position: relative;
    top: -50px;
}

#wolkkleinbolletje9{
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: white;
    position: relative;
    top: -140px;
    left: 20px;
}

#wolkgrootbolletje9{
    width: 75px;
    height: 75px;
    border-radius: 50px;
    background-color: white;
    position: relative;
    top: -195px;
    left: 50px;
}


#wolkendoos10{
    width: 300px;
    height: 100px;
    
    position: relative;
    top: 400px;
    left: -20;
    animation: wolk10 10s infinite;
}

#wolklangdeel10{
    width: 150px;
    height: 50px;
    border-radius: 100px;
    background-color: white;
    position: relative;
    top: -50px;
}

#wolkkleinbolletje10{
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: white;
    position: relative;
    top: -140px;
    left: 20px;
}

#wolkgrootbolletje10{
    width: 75px;
    height: 75px;
    border-radius: 50px;
    background-color: white;
    position: relative;
    top: -195px;
    left: 50px;
}


#wolkendoos11{
    width: 300px;
    height: 100px;
    
    position: relative;
    top: 400px;
    left: -20;
    animation: wolk11 3s infinite;
}

#wolklangdeel11{
    width: 150px;
    height: 50px;
    border-radius: 100px;
    background-color: white;
    position: relative;
    top: -50px;
}

#wolkkleinbolletje11{
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: white;
    position: relative;
    top: -140px;
    left: 20px;
}

#wolkgrootbolletje11{
    width: 75px;
    height: 75px;
    border-radius: 50px;
    background-color: white;
    position: relative;
    top: -195px;
    left: 50px;
}


#wolkendoos12{
    width: 300px;
    height: 100px;
    
    position: relative;
    top: 400px;
    left: -20;
    animation: wolk12 5s infinite;
}

#wolklangdeel12{
    width: 150px;
    height: 50px;
    border-radius: 100px;
    background-color: white;
    position: relative;
    top: -50px;
}

#wolkkleinbolletje12{
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: white;
    position: relative;
    top: -140px;
    left: 20px;
}

#wolkgrootbolletje12{
    width: 75px;
    height: 75px;
    border-radius: 50px;
    background-color: white;
    position: relative;
    top: -195px;
    left: 50px;
}

#eiland{
    width: 0;
    height: 0;
    border-left: 150px solid transparent;
    border-right: 150px solid transparent;
    border-top: 300px solid rgb(115, 85, 47);
    position: relative;
    top: -200px; 
    left: 547px;
    animation: eiland 5s infinite;
}

#stam{
    width: 20px;
    height: 60px;
    background-color: rgb(68, 42, 11);
    position: relative;
    top: -560px;
    left: 800px;
    z-index: 10;
}

#blad1{
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: rgb(103, 164, 13);
    position: relative;
    top: -650px;
    left: 800px;
    z-index: 10;
}

#blad2{
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: rgb(129, 203, 16);
    position: relative;
    top: -700px;
    left: 770px;
    z-index: 10;
}

#grass{
    width: 300px;
    height: 250px;
    border-radius: 150px;
    background-color: green;
    position: relative;
    top: -800px;
    left: 547px;
}



#dak{
    width: 0px;
    height: 0px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid brown;
    position: relative;
    top: -1070px;
    left: 650px;
    animation: dak 5s infinite;
}
#natuur{
    position: relative;
    animation: natuur 5s infinite;
}

#eiland2{
    width: 0px;
    height: 0px;
    border-left: 100px solid transparent;
    border-right: 30px solid transparent;
    border-top: 200px solid rgb(115, 84, 47);
    position: relative;
    top: -1070px;
    left: 630px;
    animation: eiland2 5s infinite;
    
}
#eiland3{
    width: 0px;
    height: 0px;
    border-left: 30px solid transparent;
    border-right: 100px solid transparent;
    border-top: 180px solid rgb(63, 43, 18);
    position: relative;
    left: 630px;
    animation: eiland3 5s infinite;
    z-index: -10;
}
#berg1{
    width: 0px;
    height: 0px;
    border-radius: 30px;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 200px solid rgb(77, 74, 74);
    position: relative;
    animation: berg 5s infinite;
    top: -1600px;
    left: 570px;
}
#sneeuw{
    width: 0px;
    height: 0px;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 80px solid white;
    position: relative;
    animation: sneeuw 5s infinite;
    left: 630px;
}
#bol1{
    width: 25px;
    height: 25px;
    border-radius: 50px;
    background-color: white;
    position: relative;
    animation: bol1 5s infinite;
    left: 650px;
}
#bol2{
    width: 25px;
    height: 25px;
    border-radius: 50px;
    background-color: white;
    position: relative;
    animation: bol2 5s infinite;
    left: 670px;
}
#bol3{
    width: 25px;
    height: 25px;
    border-radius: 50px;
    background-color: white;
    position: relative;
    animation: bol3 5s infinite;
    left: 685px;
}
#bol4{
    width: 25px;
    height: 25px;
    border-radius: 50px;
    background-color: white;
    position: relative;
    animation: bol4 5s infinite;
    left: 632px;
}
#licht1{
    width: 15px;
    height: 15px;
    border-radius: 5px;
    background-color: yellow;
    position: relative;
    animation: licht1 5s infinite;
    left: 640px;
}
#licht2{
    width: 15px;
    height: 15px;
    border-radius: 5px;
    background-color: yellow;
    position: relative;
    animation: licht2 5s infinite;
    left: 680px;
}
#licht3{
    width: 15px;
    height: 15px;
    border-radius: 5px;
    background-color: rgb(234, 255, 0);
    position: relative;
    animation: licht3 5s infinite;
    left: 690px;
}
#rivier{
    width: 150px;
    height: 100px;
    border-radius: 100px;
    background-color: aqua;
    position: relative;
    animation: rivier 5s infinite;
    left: 600px;
}
#eilandboven{
    width: 0px;
    height: 0px;
    border-left: 200px solid transparent;
    border-right: 200px solid transparent;
    border-top: 400px solid rgb(60, 38, 10);
    position: relative;
    animation: eilandboven 5s infinite;
    left: 100px;  
    z-index: -30; 
}
#eilandboven1{
    width: 0px;
    height: 0px;
    border-left: 200px solid transparent;
    border-right: 100px solid transparent;
    border-top: 50px solid rgb(60, 38, 10);
    position: relative;
    animation: eilandboven1 5s infinite;
    top: -2500px;
    left: 100px;
    transform: rotate(120deg);
    z-index: -30;
}
#eilandboven2{
    width: 0px;
    height: 0px;
    border-left: 200px solid transparent;
    border-right: 100px solid transparent;
    border-top: 50px solid rgb(60, 38, 10);
    position: relative;
    animation: eilandboven2 5s infinite;
    top: -2500px;
    left: 200px;
    transform: rotate(70deg);
    z-index: -30;
}
#grass2{
    width: 400px;
    height: 300px;
    border-radius: 200px;
    background-color: green;
    position: relative;
    animation: grass2 5s infinite;
    top: -3000px;
    left: 100px;
    z-index: -20;
}
#racebaan{
    width: 250px;
    height: 200px;
    border-radius: 100px;
    background-color: rgb(51, 48, 48);
    position: relative;
    animation: racebaan 5s infinite;
    left: 175px;
    z-index: 10;
}
#racebaanbinnen{
    width: 150px;
    height: 100px;
    border-radius: 50px;
    background-color: rgb(0, 0, 0);
    position: relative;
    animation: racebaanbinnen 5s infinite;
    left: 226px;
    z-index: 10;
}
#auto{
    position: relative;
    animation: auto 5s infinite;
    left: 190px;
    z-index: 40;
}
#voorkant{
    width: 0px;
    height: 0px;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 30px solid white;
    border-radius: 200px;
    position: relative;
    transform: rotate(270deg);
    left: 110px;
    top: 40px;
}
#achterkant{
    width: 0px;
    height: 0px;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 30px solid white;
    border-radius: 70px;
    position: relative;
    transform: rotate(90deg);
    left: 58px;
    top: 10px;
}
#body{
    width: 70px;
    height: 30px;
    background-color: white;
    position: relative;
    left: 68px;
    top: -20px;
    
}
#zitplek{
    width: 50px;
    height: 30px;
    background-color: white;
    border-radius: 10px;
    position: relative;
    top: -65px;
    left: 80px;
}
#raam1{
    width: 15px;
    height: 15px;
    background-color: black;
    border-radius: 2px;
    position: relative;
    top: -90px;
    left: 110px;
}
#raam2{
    width: 15px;
    height: 15px;
    background-color: black;
    border-radius: 2px;
    position: relative;
    top: -105px;
    left: 86px;
}
#deurhandel1{
    width: 5px;
    height: 5px;
    border-radius: 5px;
    background-color: black;
    position: relative;
    top: -100px;
    left: 87px;
}
#deurhandel2{
    width: 5px;
    height: 5px;
    border-radius: 5px;
    background-color: black;
    position: relative;
    top: -105px;
    left: 110px;
}
#band1{
    width: 20px;
    height: 20px;
    border-radius: 20px;
    background-color: black;
    position: relative;
    top: -100px;
    left: 75px;
}
#band2{
    width: 20px;
    height: 20px;
    border-radius: 20px;
    background-color: black;
    position: relative;
    top: -120px;
    left: 115px;
}
#lijnracebaan{
    width: 260px;
    height: 210px;
    border-radius: 100px;
    background-color: rgb(255, 255, 255);
    position: relative;
    animation: lijnracebaan 5s infinite;
    left: 170px;
    z-index: -10;
}
#berg{
    position: relative;
    animation: berg 5s infinite;
}

#berg2{
    width: 0px;
    height: 0px;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 60px solid rgb(71, 69, 69);
    position: relative;
    top: -2720px;
    left: 360px;
}
#berg3{
    width: 0px;
    height: 0px;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 80px solid rgb(63, 62, 62);
    position: relative;
    top: -2800px;
    left: 300px;
}
#berg4{
    width: 0px;
    height: 0px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid rgb(36, 36, 36);
    position: relative;
    top: -2900px;
    left: 230px;
}
#berg5{
    width: 0px;
    height: 0px;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 60px solid rgb(128, 128, 128);
    position: relative;
    top: -2960px;
    left: 190px;
}
#boom2{
    position: relative;
    animation: boom2 5s infinite;
}

#stam2{
    width: 20px;
    height: 60px;
    background-color: rgb(68, 42, 11);
    position: relative;
    top: -560px;
    left: 450px;
    z-index: 10;
}


#blad3{
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: rgb(103, 164, 13);
    position: relative;
    top: -650px;
    left: 450px;
    z-index: 10;
}

#blad4{
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: rgb(129, 203, 16);
    position: relative;
    top: -700px;
    left: 420px;
    z-index: 10;
    
}

    

@keyframes dak{
    0% {top: -1300px;}
    50% {top: -1135px;}
    100% {top: -1300px;}
}
@keyframes deur{
    0% {top: -1100px;}
    50% {top: -935px;}
    100% {top: -1100px;}
}
@keyframes huis{
    0% {top: -1000px;}
    50% {top: -835px;}
    100% {top: -1000px;}
}
@keyframes raam1{
    0% {top: -1070px;}
    50% {top: -906px;}
    100% {top: -1070px;}
}
@keyframes eiland{
    0% {top: -200px;}
    50% {top: -35px;}
    100% {top: -200px;}
}
@keyframes natuur{
    0% {top: 0px;}
    50% {top: 165px;}
    100% {top: 0px;}

}
@keyframes rivier{
    0% {top: -1750px;}
    50% {top: -1585px;}
    100% {top: -1750px;}

}
@keyframes wolk1{
    0% {left: -200px;}
    100% {left: 1500px;}
}
@keyframes wolk2{
    0% {left: -100px;}
    100% {left: 1500px;}
}
@keyframes wolk3{
    0% {left: -250px;}
    100% {left: 1500px;}
}
@keyframes wolk4{
    0% {left: -50px;}
    100% {left: 1500px;}
}
@keyframes wolk5{
    0% {left: -300px;}
    100% {left: 1500px;}
}
@keyframes wolk6{
    0% {left: -300px;}
    100% {left: 1500px;}
}
@keyframes wolk7{
    0% {left: -300px;}
    100% {left: 1500px;}
}
@keyframes wolk8{
    0% {left: -300px;}
    100% {left: 1500px;}
}
@keyframes wolk9{
    0% {left: -300px;}
    100% {left: 1500px;}
}
@keyframes wolk10{
    0% {left: -300px;}
    100% {left: 1500px;}
}
@keyframes wolk11{
    0% {left: -300px;}
    100% {left: 1500px;}
}
@keyframes wolk12{
    0% {left: -300px;}
    100% {left: 1500px;}
}
@keyframes eiland2{
        0% {top: -800px;}
        50% {top: -635px;}
        100% {top: -800px;}
}
@keyframes eiland3{
    0% {top: -1000px;}
    50% {top: -835px;}
    100% {top: -1000px;}
}
@keyframes berg1{
    0% {top: -1550px;}
    50% {top: -1385px;}
    100% {top: -1550px;}
}
@keyframes sneeuw{
    0% {top: -1750px;}
    50% {top: -1585px;}
    100% {top: -1750px;}
}
@keyframes bol1{
    0% {top: -1765px;}
    50% {top: -1600px;}
    100% {top: -1765px;}
}
@keyframes bol2{
    0% {top: -1785px;}
    50% {top: -1620px;}
    100% {top: -1785px;}
}
@keyframes bol3{
    0% {top: -1810px;}
    50% {top: -1645px;}
    100% {top: -1810px;}
}
@keyframes bol4{
    0% {top: -1840px;}
    50% {top: -1675px;}
    100% {top: -1840px;}
}
@keyframes licht1{
    0% {top: -1790px;}
    50% {top: -1625px;}
    100% {top: -1790px;}
}
@keyframes licht2{
    0% {top: -1840px;}
    50% {top: -1675px;}
    100% {top: -1840px;}
}
@keyframes licht3{
    0% {top: -1790px;}
    50% {top: -1625px;}
    100% {top: -1790px;}
}
@keyframes eilandboven{
    0% {top: -2590px;}
    50% {top: -2425px;}
    100% {top: -2590px;}
}
@keyframes eilandboven1{
    0% {top: -2840px;}
    50% {top: -2675px;}
    100% {top: -2840px;}
}
@keyframes eilandboven2{
    0% {top: -2840px;}
    50% {top: -2675px;}
    100% {top: -2840px;}
}
@keyframes grass2{
    0% {top: -3240px;}
    50% {top: -3075px;}
    100% {top: -3240px;}
}
@keyframes racebaan{
    0% {top: -3490px;}
    50% {top: -3325px;}
    100% {top: -3490px;}
}
@keyframes racebaanbinnen{
    0% {top: -3640px;}
    50% {top: -3475px;}
    100% {top: -3640px;}
}
@keyframes auto{
    0% {top: -3890px;}
    25% {top: -3790px; left: 100px;}
    50% {top: -3725px; left: 100px;}
    75% {transform: rotate(10deg); left: 125px; top: -3910px;}
    80% {top: -3900px; }
    90% {top: -3920px; left: 280px;transform: rotate(10deg);}
    95% {top: -3900; left:275px;}
    100% {top: -3890px; left: 200px;}
}
@keyframes lijnracebaan{
    0% {top: -3795px;}
    50% {top: -3630px;}
    100% {top: -3795px;}
}
@keyframes berg{
    0% {top: -1550px;}
    50% {top: -1385px;}
    100% {top: -1550px;}
}
@keyframes boom2{
    0% {top: -3900px;}
    50% {top: -3735px;}
    100% {top: -3900px;}
}
 

body {
    transition: 1.5s;
    }
    .night-toggle {
    width: 33px;
    height: 33px;
    right: 20px;
    top: 20px;
    position: absolute;
    }
    .night-toggle:hover{
      cursor: pointer;
    }
    .moon {
      background-color: transparent;
      box-shadow: -6px 1px 0 3px #275e8e;
      border-left:3px solid #27476D;
      border-radius:50%;
      width: 20px;
      height: 20px;
      margin-left:8px;
      margin-top:0px;
      transition: 2s;
    }
    .sun {
      background-color: #fdd462;
      box-shadow: 2px 0px 0px 1px #D19C29;
      border-radius:50%;
      width: 26px;
      height: 26px;
      transition: 2s;
    }
    
    /* ----- 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;
    }