#circulo {
   fill: white; 
}

#circulo:hover {

fill: #0088f8;
  fill: -moz-linear-gradient(-45deg, #ff5db1 0%, rgba(0, 87, 137, 0.7) 100%);
  fill: -webkit-gradient(left top, right bottom, color-stop(0%, #ff5db1), color-stop(100%, rgba(0, 87, 137, 0.7)));
  fill: -webkit-linear-gradient(-45deg, #ff5db1 0%, rgba(0, 87, 137, 0.7) 100%);
  fill: -o-linear-gradient(-45deg, #ff5db1 0%, rgba(0, 87, 137, 0.7) 100%);
  fill: -ms-linear-gradient(-45deg, #ff5db1 0%, rgba(0, 87, 137, 0.7) 100%);
  fill: linear-gradient(135deg, #ff5db1 0%, rgba(0, 87, 137, 0.7) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5db1', endColorstr='#005789', GradientType=1 );
}

/* DEMO SPECIFIC STYLES */

body {
  background: #ddd;
  text-align: center;
  padding-top: 2em;
}
html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.bg {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom right,  
    #2C3E50, #FD746C, 
    #FF8235, #ffff1c, 
    #92FE9D, #00C9FF, 
    #a044ff, #e73827);
  background-repeat: no-repeat;
  background-size: 1000% 1000%;
  animation: gradient 240s ease infinite;
}

h1 {
  padding: 0;
  margin: 0;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 100;
}
    
@keyframes gradient { 
  0%{background-position:0% 0%}
  50%{background-position:100% 100%}
  100%{background-position:0% 0%}
}