body,
html {
    background-color: lightblue;
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    text-align: right;
    color: red;
    /* Hide scrollbar */
}

.bottomright {
    position: absolute;
    bottom: 8px;
    right: 16px;
    font-size: 18px;
}

.ball1 {
    width: 20px;
    height: 20px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    /* Center vertically */
    left: 50%;
    /* Initial position at the left edge */
    animation: bounce 1s infinite alternate;
}

@keyframes bounce {
    0% {
        top: 0;
        left: 0;
    }

    100% {
        top: calc(100% - 50px);
        /* Move to the right edge */
    }
}

@media (max-width:1600px) {
    .ball2 {
        width: 20px;
        height: 20px;
        background-color: red;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        /* Center vertically */
        left: 0;
        /* Initial position at the left edge */
        animation: bounce2 1s infinite alternate;
    }

    @keyframes bounce2 {
        0% {
            left: 0;
        }

        100% {
            left: calc(100% - 50px);
            /* Move to the right edge */
        }
    }
}

.ball {
  width: 50px;
  height: 50px;
  background-color: red;
  border-radius: 50%;
  position: absolute;
  top: 50%; /* Adjust as needed */
  left: calc(100% - 50px); /* Start from the right corner */
  animation: bounce 1s infinite alternate;
}

 @keyframes bounce3 {
     0% {
         top: 0;
         left: 0;
     }

     100% {
         top: calc(100% - 50px);
         left: calc(100% - 50px);
     }
 }

@media (max-width: 1200px) {
    .ball4 {
        width: 20px;
        height: 20px;
        background-color: red;
        border-radius: 50%;
        position: absolute;
        top: 80%;
        /* Center vertically */
        left: 0;
        /* Initial position at the left edge */
        animation: bounce4 .75s infinite alternate;
    }

    @keyframes bounce4 {
        0% {
            right: 0;
            top: 0;
        }

        100% {
            left: calc(100% - 50px);
            /* Move to the right edge */
        }
    }
}

@media (max-width: 1000px) {
    .ball5 {
        width: 20px;
        height: 20px;
        background-color: red;
        border-radius: 50%;
        position: absolute;
        top: 80%;
        /* Center vertically */
        left: 0;
        /* Initial position at the left edge */
        animation: bounce5 .75s infinite alternate;
    }

    @keyframes bounce5 {
        0% {
           left:0
        }

        100% {
            left: calc(100% - 50px);
            /* Move to the right edge */
        }
    }
}

 @media (max-width: 800px) {
.ball6 {
     width: 20px;
     height: 20px;
     background-color: red;
     border-radius: 50%;
     position: absolute;
     top: 50%;
     /* Start position in the middle vertically */
     left: 50%;
     /* Start position in the middle horizontally */
     animation: bounce6 1s infinite alternate;
 }
 }
 @keyframes bounce6 {
     0% {
         top: 0;
     }

     100% {
         top: calc(100% - 50px);
         /* Bounce to the bottom of the screen */
     }
    }

    @media (max-width: 600px) {
        .ball7 {
                width: 20px;
                height: 20px;
                background-color: red;
                border-radius: 50%;
                position: absolute;
                bottom: 0;
                left: 0;
                animation: bounce7 .75s infinite alternate;
            }
    }

        @keyframes bounce7 {
            0% {
                bottom: 0;
                left: 0;
            }
    
            100% {
                bottom: calc(100% - 50px);
                left: calc(100% - 50px);
            }
        }