body {

    background-color: white;
    height: 1300px;
    width: 1300px;
}

#big {

    height: 100px;
    width: 600px;
    background-color: white;
    font-size: 80px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: rgb(166, 255, 0);
    text-align: center;
    padding-top: 10px;
    margin-bottom: 0px;
    
}

#facts {

    height: 600px;
    width: 600px;
    background-color: rgb(30, 196, 30);
    font-size: 20px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: rgb(166, 255, 0);
    margin-top: 0px;
    padding-top: 0px;
    margin-left: 20px;
    
}

#topfacts {

    font-size: 40px;
    color: rgb(166, 255, 0);
    margin-left: 5px;
}


#lotto {

    height: 200px;
    width: 800px;
    display: grid;
    grid-template-columns: 90px 90px 90px 90px 90px 90px 90px;
    background-color: white;
    margin-left: 20px;
    margin-bottom: 0px;
    
    
}

#button {

    margin-left: 500px;
    margin-top: 10px;
    background-color: rgb(166, 255, 0);
    color: green;
    height: 40px;
    width: 80px;
    border-radius: 20%;
}

#circle1 {

    height: 70px;
    width: 70px;
    border-radius: 50%;
    background-color: aqua;
    margin-left: 600px;
    margin-top: -200px;
    animation-name: ball1;
    animation-delay: 2s;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    align-items: center;
    
    
}



@keyframes ball1 {

    0%{margin-left: 600px;margin-top: -100px;}
    25%{margin-left: 600px; margin-top: 100px;transform: rotate(0deg);}
    100%{margin-left: 0px;margin-top: 100px;transform: rotate(-360deg);}
}

@keyframes ball11 {

    0%{margin-left: 600px;margin-top: -100px;}
    25%{margin-left: 600px; margin-top: 100px;transform: rotate(0deg);}
    100%{margin-left: 0px;margin-top: 100px;transform: rotate(-360deg);}
}



#cir1 {

    color: white;
    font-size: 50px;
    height: 100%;
    width: 100%;
    text-align: center;
    margin-top: 0px;

    
}

#circle2 {

    height: 70px;
    width: 70px;
    border-radius: 50%;
    background-color: aqua;
    margin-left: 510px;
    margin-top: -200px;
    animation-name: ball2;
    animation-delay: 5s;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    
}

@keyframes ball2 {

    0%{margin-left: 510px;margin-top: -100px;}
    25%{margin-left: 510px; margin-top: 100px;transform: rotate(0deg);}
    100%{margin-left: 0px;margin-top: 100px;transform: rotate(-360deg);}
}

@keyframes ball22 {

    0%{margin-left: 510px;margin-top: -100px;}
    25%{margin-left: 510px; margin-top: 100px;transform: rotate(0deg);}
    100%{margin-left: 0px;margin-top: 100px;transform: rotate(-360deg);}
}


#cir2 {

    color: white;
    font-size: 50px;
    height: 100%;
    width: 100%;
    text-align: center;
    margin-top: 0px;
}

#circle3 {

    height: 70px;
    width: 70px;
    border-radius: 50%;
    background-color: aqua;
    margin-left: 420px;
    margin-top: -200px;
    animation-name: ball3;
    animation-delay: 9s;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    
}

@keyframes ball3 {

    0%{margin-left: 420px;margin-top: -100px;}
    25%{margin-left: 420px; margin-top: 100px;transform: rotate(0deg);}
    100%{margin-left: 0px;margin-top: 100px;transform: rotate(-360deg);}
}

@keyframes ball33 {

    0%{margin-left: 420px;margin-top: -100px;}
    25%{margin-left: 420px; margin-top: 100px;transform: rotate(0deg);}
    100%{margin-left: 0px;margin-top: 100px;transform: rotate(-360deg);}
}


#cir3 {

    color: white;
    font-size: 50px;
    height: 100%;
    width: 100%;
    text-align: center;
    margin-top: 0px;
}

#circle4 {

    height: 70px;
    width: 70px;
    border-radius: 50%;
    background-color: aqua;
    margin-left: 330px;
    margin-top: -200px;
    animation-name: ball4;
    animation-delay: 13s;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    
}

@keyframes ball4 {

    0%{margin-left: 330px;margin-top: -100px;}
    25%{margin-left: 330px; margin-top: 100px;transform: rotate(0deg);}
    100%{margin-left: 0px;margin-top: 100px;transform: rotate(-360deg);}
}

@keyframes ball44 {

    0%{margin-left: 330px;margin-top: -100px;}
    25%{margin-left: 330px; margin-top: 100px;transform: rotate(0deg);}
    100%{margin-left: 0px;margin-top: 100px;transform: rotate(-360deg);}
}


#cir4 {

    color: white;
    font-size: 50px;
    height: 100%;
    width: 100%;
    text-align: center;
    margin-top: 0px;
}

#circle5 {

    height: 70px;
    width: 70px;
    border-radius: 50%;
    background-color: aqua;
    margin-left: 240px;
    margin-top: -200px;
    animation-name: ball5;
    animation-delay: 17s;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    display: inline;
    
}

@keyframes ball5 {

    0%{margin-left: 240px;margin-top: -100px;}
    25%{margin-left: 240px; margin-top: 100px;transform: rotate(0deg);}
    100%{margin-left: 0px;margin-top: 100px;transform: rotate(-360deg);}
}

@keyframes ball55 {

    0%{margin-left: 240px;margin-top: -100px;}
    25%{margin-left: 240px; margin-top: 100px;transform: rotate(0deg);}
    100%{margin-left: 0px;margin-top: 100px;transform: rotate(-360deg);}
}


#cir5 {

    color: white;
    font-size: 50px;
    height: 100%;
    width: 100%;
    text-align: center;
    margin-top: 0px;
}

#circle6 {

    height: 70px;
    width: 70px;
    border-radius: 50%;
    background-color: red;
    margin-left: 150px;
    margin-top: -200px;
    animation-name: ball6;
    animation-delay: 21s;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    
}

@keyframes ball6 {

    0%{margin-left: 150px;margin-top: -100px;}
    25%{margin-left: 150px; margin-top: 100px;transform: rotate(0deg);}
    100%{margin-left: 0px;margin-top: 100px;transform: rotate(-360deg);}
}

@keyframes ball66 {

    0%{margin-left: 150px;margin-top: -100px;}
    25%{margin-left: 150px; margin-top: 100px;transform: rotate(0deg);}
    100%{margin-left: 0px;margin-top: 100px;transform: rotate(-360deg);}
}


#cir6 {

    color: white;
    font-size: 50px;
    height: 100%;
    width: 100%;
    text-align: center;
    margin-top: 0px;
}

#circle55 {

    height: 70px;
    width: 70px;
    border-radius: 50%;
    background-color: red;
    margin-left: 240px;
    margin-top: -200px;
    animation-name: ball5;
    animation-delay: 17s;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    display: inline;
    
}




#cir5 {

    color: white;
    font-size: 50px;
    height: 100%;
    width: 100%;
    text-align: center;
    margin-top: 0px;
}

#circle66 {

    height: 70px;
    width: 70px;
    border-radius: 50%;
    background-color: aqua;
    margin-left: 150px;
    margin-top: -200px;
    animation-name: ball6;
    animation-delay: 21s;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    
}



#cir6 {

    color: white;
    font-size: 50px;
    height: 100%;
    width: 100%;
    text-align: center;
    margin-top: 0px;
}

#circle77 {

    height: 70px;
    width: 70px;
    border-radius: 50%;
    background-color: red;
    margin-left: 150px;
    margin-top: -200px;
    animation-name: ball7;
    animation-delay: 25s;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    
}

@keyframes ball7 {

    0%{margin-left: 150px;margin-top: -100px;}
    25%{margin-left: 150px; margin-top: 100px;transform: rotate(0deg);}
    100%{margin-left: 0px;margin-top: 100px;transform: rotate(-360deg);}
}

@keyframes ball77 {

    0%{margin-left: 150px;margin-top: -100px;}
    25%{margin-left: 150px; margin-top: 100px;transform: rotate(0deg);}
    100%{margin-left: 0px;margin-top: 100px;transform: rotate(-360deg);}
}


#cir7 {

    color: white;
    font-size: 50px;
    height: 100%;
    width: 100%;
    text-align: center;
    margin-top: 0px;
}