.circle {
    background: black;
    position: absolute;
    left: 350px;
    border-radius: 50%;
    height: 700px;
    width: 700px;
    z-index:10;
    transition: 1s;
    opacity: 1;
  }
  h1{color: white;
opacity: 1}
  
.circle:hover{
  opacity: 0
}

body{
    background-color: black
}

img{
    position: absolute;
    left: 510px;
    top: 40px;
}

.bulbtop{ 
    position: absolute;
    top:  70px;
    left: 560px;
    width: 300px;
    height: 380px;
    border-radius: 50%;
    animation: fill 4s infinite;
    animation-direction: alternate;
}
.bottom{
    position: absolute;
    top:  430px;
    left: 630px;
    width: 160px;
    height: 60px;
    border-radius: 20%;
    animation: fillbottom 4s infinite;
    animation-direction: alternate;
}
@keyframes fill {
    0%{
      background-color: #ffffea;
      opacity: 0.5;
    }
    30%{
        background-color:#ffff8f;
        opacity: 0.5;
    }
    60%{
        background-color:#ffff27;
        opacity: 0.5;
    }
    100%{
        background-color:#b7b700;
        opacity: 0.5;
    }
  }
  @keyframes fillbottom {
    0%{
        background-color: #ffffea;
        opacity: 0.5;
      }
      30%{
          background-color:#ffff8f;
          opacity: 0.5;
      }
      60%{
          background-color:#ffff27;
          opacity: 0.5;
      }
      100%{
          background-color:#b7b700;
          opacity: 0.5;
      }
    }