style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

:root
{
    --time-duration:9s;
}
body {
    margin: 0px;
    font-family: 'Poppins', sans-serif;
    background-color: #2E4F4F;  
}
body::-webkit-scrollbar
{
    overflow:hidden;
    display:none;
}
h3
{
    margin:0px;
    color: white;
}
#rod-one {
	position: absolute;
	top: 0%;
	background-color: rgb(0, 0, 0);
	border: 2px solid black;
    width: 20vw;
    box-sizing: border-box;
    border-radius: 20px;
    height: 5vh;
    padding:5px;
    text-align: center;
}
#rod-two {
	position: absolute;
	bottom: 0%;
    background-color: rgb(0, 0, 0);
    border-radius: 20px;;
	border: 2px solid black;
    width: 20vw;
    box-sizing: border-box;
    height: 5vh;
    padding:5px;
    text-align: center;
}
#ball {
	height: 50px;
    width: 50px;
    position:absolute;
    border-radius: 50%;
    background-image:radial-gradient(rgb(255, 255, 255) 0%,black 221%);
    box-sizing: border-box;
}


.animate-top-right
{
    transition:transform linear var(--time-duration);
    transform: translateX(2000px) translateY(-2000px);
}
.animate-bottom-right
{
    transition:transform linear var(--time-duration);
    transform: translateX(2000px) translateY(2000px);
}
.animate-top-left
{
    transition:transform linear var(--time-duration);
    transform: translateX(-2000px) translateY(-2000px);
}
.animate-bottom-left
{
    transition:transform linear var(--time-duration);
    transform: translateX(-2000px) translateY(2000px);
}