body {
  justify-content: center;
  flex-direction: column;
  height: 100vh;
}
.green {
  background: #998235;
}
.yellow {
  background: #f3ac3c;
}
.black {
  background: #1a4341;
}
.fc {
  display: flex;
  align-items: center;
}
.main {
  width: 310px;
  height: 100px;
  margin-top: -15px;
}
.circleOne {
  width: 120px;
  height: 120px;
}
.circleTwo {
  width: 100px;
  height: 100px;
  margin-left: -50px;
  justify-content: center;
}

.innerCircle {
  width: 40px;
  height: 40px;
  border: 5px solid #f3ac3c;
}
.hole {
  width: 10px;
  height: 40px;
  border-radius: 10px;
  margin-left: 40px;
}
.rd {
  border-radius: 50%;
}
.bar {
  width: 110px;
  height: 20px;
  margin-left: -1px;
  position: relative;
  z-index: -1;
}
.cord {
  width: 40px;
  height: 30px;
  border-radius: 12px;
  margin-left: -4px;
  position: relative;
}
.cord::after {
  content: "";
  width: 20px;
  height: 4.5px;
  background: #1a4341;
  position: absolute;
  top: 8px;
  left: 10px;
  border-radius: 5px;
}
.cord::before {
  content: "";
  width: 20px;
  height: 4.5px;
  background: #1a4341;
  position: absolute;
  bottom: 8px;
  left: 10px;
  border-radius: 5px;
}

/* Ignore*/

.anchor {
  position: fixed;
  top: 0;
  right: 0;
  font-weight: bold;
  padding: 12px;
}