body{
    background-color: #353839;
    margin: 0 auto;
}


#welcome_text1{
    text-align: center;
    position: relative;
    color: white;
    font-size: 75px;
    top: 50px;
}

#welcome_text2{
    text-align: center;
    position: relative;
    color: #45b1e8;
    font-size: 40px;
    top: -75px;
}

#i_am{
    text-align: center;
    font-family: Arial, sans-serif;
    position: relative;
    color: white;
    font-size: 20px;
    top: -90px;
}

#email_adres{
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 15px;
    position: relative;
    color: #45b1e8;
    font-size: 15px;
    left: -645px;
    top: 165px;
}

#telefoonnummer{
    text-align: center;
    font-family: Arial, sans-serif;
    position: relative;
    color: white;
    font-size: 15px;
    left: -663px;
    top: 155px;
}

#help{
    text-align: center;
    font-family: Arial, sans-serif;
    position: relative;
    color: white;
    font-size: 20px;
    left: -624px;
    top: 65px;
}




#kleinbol1{
    width: 110px;
    height: 110px;
    position: 0 auto;
    position: relative;
    top: -300px;
    left: 500px;
    z-index: -1;
    left: 0%; 
    animation: randomMovement 6s infinite ease-in-out;
}

#kleinbol2{
    width: 110px;
    height: 110px;
    position: 0 auto;
    position: relative;
    top: -300px;
    left: 500px;
    z-index: -1;
    left: 10%; 
    animation: randomMovement 5s infinite ease-in-out 1s; 
}

#kleinbol3{
    width: 110px;
    height: 110px;
    position: 0 auto;
    position: relative;
    top: -400px;
    left: 500px;
    z-index: -1;
    left: 20%; 
    animation: randomMovement 7s infinite ease-in-out 2s; 
}

#kleinbol4{
    width: 110px;
    height: 110px;
    position: 0 auto;
    position: relative;
    top: -600px;
    left: 500px;
    z-index: -1;
    left: 30%; 
    animation: randomMovement 8s infinite ease-in-out;
}

#kleinbol5{
    width: 110px;
    height: 110px;
    position: 0 auto;
    position: relative;
    top: -750px;
    left: 500px;
    z-index: -1;
    left: 40%; 
    animation: randomMovement 6s infinite ease-in-out;
}

#kleinbol6{
    width: 110px;
    height: 110px;
    position: 0 auto;
    position: relative;
    top: -800px;
    left: 500px;
    z-index: -1;
    left: 50%; 
    animation: randomMovement 7s infinite ease-in-out;
}

#kleinbol7{
    width: 110px;
    height: 110px;
    position: 0 auto;
    position: relative;
    top: -900px;
    left: 500px;
    z-index: -1;
    left: 60%; 
    animation: randomMovement 10s infinite ease-in-out;
}

#kleinbol8{
    width: 110px;
    height: 110px;
    position: 0 auto;
    position: relative;
    top: -1000px;
    left: 500px;
    z-index: -1;
    left: 70%; 
    animation: randomMovement 8s infinite ease-in-out;
}

#kleinbol9{
    width: 110px;
    height: 110px;
    position: 0 auto;
    position: relative;
    top: -1100px;
    left: 500px;
    z-index: -1;
    left: 80%; 
    animation: randomMovement 9s infinite ease-in-out;
}

#kleinbol10{
    width: 110px;
    height: 110px;
    position: 0 auto;
    position: relative;
    top: -1200px;
    left: 500px;
    z-index: -1;
    left: 90%; 
    animation: randomMovement 7s infinite ease-in-out;
}




@keyframes randomMovement {
    0% {
        transform: translate(0, 0); 
    }
    25% {
        transform: translate(50px, calc(20vh - 10px)); 
    }
    50% {
        transform: translate(-30px, calc(10vh - 0px)); 
    }
    75% {
        transform: translate(110px, calc(50vh - 710px)); 
    }
    100% {
        transform: translate(0, 0); 
    }
}



.kleinbolletje{
    width: 100px;
    height: 100px;
    border-radius: 100px;
    position: relative;
    background: rgb(135,206,235);
background: linear-gradient(90deg, rgba(135,206,235,0.5523459383753502) 0%, rgba(135,206,235,0.5663515406162465) 100%);
}









.button1 {
    background-color:#45b1e8;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 30px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    position: relative;
    top: -1200px;
    left: 550px;
}
.button:hover {
    background-color:#45b1e8;
}




.button2 {
    background-color:#45b1e8;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 30px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    position: relative;
    top: -1200px;
    left: 690px;
}
.button:hover {
    background-color:#45b1e8;
}



.button3 {
    background-color:#45b1e8;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bold;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 30px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    position: relative;
    top: -1130px;
    left: 285px;
}
.button:hover {
    background-color:#45b1e8;
}