:root
{
    --time-duration:9s;
}
body {
    margin: 0px;
}
body::-webkit-scrollbar
{
    overflow:hidden;
    display:none;
}
h3
{
    margin:0px;
}
#rod-one {
	position: absolute;
	top: 0%;
	background-color: crimson;
	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: crimson;
    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(green 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);
}