body{
  font-size:20px;
  width: 1000px;
  height: 1500px;
  background-color: #01141c;
}

#main{
  position:absolute;
  display:flex;
  flex-direction:row; 
  flex-wrap:wrap;
  justify-content:center;
  
}

#top{
  position:fixed;
  display:flex;
  flex-direction:row; 
  flex-wrap:wrap;
  justify-content:center;
  padding-left: 13px;
  padding-right: 13px;
  
}
.circle{
  width: 250px;
  height: 250px;
  border-radius: 50%;
  display:inline-block;
  background-color:#FFFF00;
  padding:0px;
}


.circle2{
  width: 250px;
  height: 250px;
  border-radius: 50%;
  display:inline-block;
  background-color: #01141c;
  padding:0px;
         -webkit-transition: background-color 3s ease-out;
-moz-transition: background-color 3s ease-out;
-o-transition: background-color 3s ease-out;
transition: background-color 3s ease-out;

}


.circle2:hover{
    background: #FFFF00;
    z-index: 1;
}