html {
  background: #1F1F14;
  color: white;
}
.main {
  width: 455px;
  height: 305px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 8%;
}
.outer-circ {
  width: 450px;
  height: 300px;
  background: yellow;
  border: #4D4D33 ridge 4px;
  border-radius: 50%;
}
.midline {
  width: 60%;
  height: 28%;
  background: black;
  -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
  transform: rotate(90deg);
  margin-left: auto;
  margin-right: auto;
  margin-top: -131%;
}
.wings {
  width: 90%;
  height: 80%;
  background: black;
  border-radius: 50%;
  position: relative; 
  top: 10%;
  left: 5%;
}
.bl1 {
  width: 10%;
  height: 15%;
  background: yellow;
  border-radius: 50%;
  position: relative;
  left: 20%;
  top: -9%;
}
.bl2 {
  width: 13%;
  height: 20%;
  background: yellow;
  border-radius: 50%;
  position: relative;
  left: 29%;
  top: -24%;
}
.bl3 {
  width: 46%;
  height: 15%;
  background: yellow;
  position: relative;
  left: 27%;
  top: -38%;
}
.br1 {
  width: 10%;
  height: 15%;
  background: yellow;
  border-radius: 50%;
  position: relative;
  left: 70%;
  top: -59%;
}
.br2 {
  width: 13%;
  height: 20%;
  background: yellow;
  border-radius: 50%;
  position: relative;
  left: 58.5%;
  top: -75%;
}
.tl {
  width: 15%;
  height: 25%;
  background: yellow;
  border-radius: 50%;
  position: relative;
  top: -154%;
  left: 30%;
}
.tr {
  width: 15%;
  height: 25%;
  background: yellow;
  border-radius: 50%;
  position: relative;
  top: -179%;
  left: 55%;
}
.tm{
  width: 25%;
  height: 20%;
  background: yellow;
  position: relative;
  top: -205%;
  left: 38%;
}