#div1:hover{
    transition: 1s ease-in-out;
transform: rotate(30deg) scale(1.2);
    box-shadow: 0 0 40px rgba(0, 217, 255, 0.801);

}
#p1{
font-family: cursive;
position: absolute;
top: 10px;
left: 10px;
}
#div1{
    width: 110px;
    height: 110px;
    background-color: hsl(209, 100%, 57%);
    text-align: center;
 position: absolute;   
 top: 200px;
 left: 680px;
 color: rgb(255, 255, 255);
 animation:  ani 2s ease-in-out;
 border-radius: 25%;
 border: 3px solid aqua;
 box-shadow: 0px  0px 20px rgba(0, 255, 255, 0.801);    
transform: scale(1.5);
}
@keyframes ani {
0%{    background-color: hsl(72, 100%, 50%);
transform: scale(2);
border: solid green;
border-radius: 20%;
 box-shadow: 0px  0px 1px rgb(255, 225, 225);
 left: -190px;
 top: -190px;

}
80%{
    background-color: hsl(209, 78%, 77%);
transform:  scale(1);
border: solid rgb(0, 0, 0);
border-radius: 25%;
 box-shadow: 0px  0px 20px rgb(69, 67, 67);
 left: 680px;
 top: 200px;

}
100%{
    transform: scale(1.5) rotate(360deg);
        background-color: hsl(209, 100%, 57%);
        border:solid aqua;

 box-shadow: 0px  0px 20px rgba(0, 255, 255, 0.801);
}

}
body{
    transition: 2s;
    background-color: black;    
}