html, body{
	overflow:hidden;
}



#circle_jr{
	width:100px;
	height:100px;
	border-radius: 100px;
	color: red;
	background-color:#FC0FC0;
	position: absolute;
	left:50%;
	top:40%;
	animation:change .2s infinite;
	cursor: pointer;

}



@keyframes change{
	0%{background-color:#FC0FC0;}
	
	25%{background-color: #0417a1;
    }
	50%{background-color: #00fc12;
    }
	75%{background-color: #dd0000;
    }
	75%{background-color: #ffffff;
    }
}




#circle_jr:hover{
	animation: jitter .1s infinite;
}

@keyframes jitter{
	0%{background-color:#FC0FC0}
	
	33%{background-color: #0417a1;transform:translate(6,0)}
	66%{background-color: #00fc12;transform:translate(-12,0)}
	99%{background-color: #dd0000;transform:translate(6,-7)}
}






#circle2_jr{
	width:900px;
	height:70px;
	border-radius:100px 100px 10px 10px;
	background-color:#03006f;
	position: absolute;
	left:20%;
	top:70%;
	animation:change2 4s infinite;
}






@keyframes change2{
	0%{background-color:#03006f }
	
	25%{background-color: #2c006f}
	50%{background-color: #45049d}
	75%{background-color: #04539d}
	100%{background-color: #460b78}
}

/*#circle2_jr:hover{
	width:100px;
	height:100px;
	border-radius:100px;
	background-color:#03006f;
	position: absolute;
	left:50%;
	top:5%;
	transition: 4.5s;
	animation:change3 2s infinite;
}*/






#container{
	width:100%;
	height:33%;
	position: absolute;
	bottom:0%;
	left:0%;
	
}

#container:hover  #circle2_jr{
	width:100px;
	height:100px;
	border-radius:100px;
	background-color:#03006f;
	position: absolute;
	left:50%;
	top:5%;
	transition: 4.5s;
	animation:change3 1s infinite;
}


@keyframes change3{
	0%{background-color:#03006f }
	
	25%{background-color: #2c006f}
	50%{background-color: #45049d}
	75%{background-color: #04539d}
	100%{background-color: #460b78}
}