body {
    background-color: rgb(61, 126, 195);
    background-image: url("bg.jpg");
    background-size: cover;
}

div {
    user-select: none;
}

#box{
    position: relative;
    margin: auto;
    width: 600px;
    height: 600px;
    margin-top: -60px;
  }
  
  .bulb {
     cursor: pointer;
  }
    
    .circle {
      position: absolute;
      width: 40%;
      height: 40%;
      background: yellow;
      top: 20%;
      left: 30%;
      margin: 0 auto;
      border-radius: 50%;
    }
  
  .trapezoid {
    position: absolute;
    background: yellow;
    height: 30%;
    width: 40%;
    left: 30%;
    top: 42%;
  -webkit-clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
  
  }
  
  #bottom1 {
    position: absolute;
    height: 5%;
    width: 25%;
    background: grey;
    top: 72%;
    left: 37.5%;
    z-index: 1;
    
  }
    
  #bottom1:before {
    content: "";
    height: 100%;
    width: 20%;
    background: grey;
    display: block;
    position: absolute;
    border-radius: 50%;
    left: -8%;
  }
  
  #bottom1:after {
    content: "";
    height: 100%;
    width: 20%;
    background: grey;
    display: block;
    position: absolute;
    border-radius: 50%;
    right: -8%;
  }
  
  #bottom2 {
    position: absolute;
    height: 5%;
    width: 22%;
    background: grey;
    top: 78%;
    left: 39%;
    
  }
    
  #bottom2:before {
    content: "";
    height: 100%;
    width: 20%;
    background: grey;
    display: block;
    position: absolute;
    border-radius: 50%;
    left: -8%;
  }
  
  #bottom2:after {
    content: "";
    height: 100%;
    width: 20%;
    background: grey;
    display: block;
    position: absolute;
    border-radius: 50%;
    right: -8%;
  }
  
  
  #bottom3 {
    position: absolute;
    height: 5%;
    width: 18%;
    background: grey;
    top: 84%;
    left: 41%;
    z-index: 1;
    
  }
    
  #bottom3:before {
    content: "";
    height: 100%;
    width: 20%;
    background: grey;
    display: block;
    position: absolute;
    border-radius: 50%;
    left: -8%;
  }
  
  #bottom3:after {
    content: "";
    height: 100%;
    width: 20%;
    background: grey;
    display: block;
    position: absolute;
    border-radius: 50%;
    right: -8%;
  }
  
  #shine {
    width: 20%;
    height: 20%;
    background: white;
    border-radius: 50%;
    top: 20%;
    position: absolute;
    left: 18%;
    
  }
  
  
  .halfCircle {
       height:45px;
       width:90px;
       border-radius: 0 0 90px 90px;
       background: black;
       margin: 0 auto;
       top: 88%;
       position: relative;
  }
  
  .drop {
    width: 5%;
    height: 5%;
    position: absolute;
    border: 15px solid #ffbf1d;
  
    
  }
  
  #left {
    left: 38%;
    top: 45%;
    border-radius: 50% 50% 0 50%;
  }
  
  #left:after {
    content: "";
    height: 110px;
    width: 24px;
    border: 15px solid #ffbf1d;
    display: block;
    position: absolute;
    left: 100%;
    top: 100%;
  }
  
  #right {
    right: 38%;
    top: 45%;
    border-radius: 50% 50% 50% 0;
  }

  .blue, .red, .green, .yellow, .magenta {
    background: rgba(83, 83, 83, 0.357);
  }
  
  .halfCircle.red, .halfCircle.red.enlighted {
    background: #c40000;
  }

  .indicator-red {
    color: #c40000;
  }

  .red.enlighted {
    background: #ff1d1d; /* seed */
  }

  .halfCircle.blue, .halfCircle.blue.enlighted {
    background: #00b2b4;
  }

  .indicator-blue {
    color: #00b2b4;
  }


  .blue.enlighted {
    background: #1dffff;
  }

  .halfCircle.green, .halfCircle.green.enlighted {
    background: #00bf00;
  }

  .indicator-green {
    color: #00bf00;
  }

  .green.enlighted {
    background: #1dff1d;
  }

  .halfCircle.yellow, .halfCircle.yellow.enlighted {
    background: #ffd100;
  }

  .indicator-yellow {
    color: #ffd100;
  }

  .yellow.enlighted {
    background: #ffff1d;
  }


  .halfCircle.magenta, .halfCircle.magenta.enlighted {
    background: #ff1d8e;
  }

  .indicator-magenta{
    color: #ff1d8e;
  }

  .magenta.enlighted {
    background: #ff1d8e;
  }