*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #f4f4f4;
}

.btn {
  background: transparent;
  position: absolute;
  top: 40%;
  left: 50%;
  translate: -50% -50%;
  border: none;
  cursor: pointer;
}

.spin-container {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform-style: preserve-3d;
  transition: transform 0.6s ease-in-out;
  position: relative;
}

.spin-container.active {
  transform: rotateY(180deg);
}

.front,
.back {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  backface-visibility: hidden;
  perspective: 1000px;
  transform-style: preserve-3d;
}

.front {
  background: linear-gradient(45deg, rgb(161, 243, 186), rgb(152, 198, 250));
  color: black;
}

.back {
  background: linear-gradient(45deg, rgb(255, 187, 160), rgb(250, 132, 132));
  color: white;
  transform: rotateY(180deg);
}

.bar {
  width: 50%;
  height: 5px;
  border-radius: 9999px;
  background: #333;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%) translateZ(50px);
}

.b1 {
  transform: translate(-50%, -300%) translateZ(50px);
}
.b3 {
  transform: translate(-50%, 300%) translateZ(50px);
}

.b-back1 {
  transform: translate(-50%, 0px) translateZ(50px) rotate(45deg);
}
.b-back2 {
  transform: translate(-50%, 0px) translateZ(50px) rotate(-45deg);
}