.coin-wrap {
  transform: perspective(400px);
  transform-style: preserve-3d;
  display: inline-block;
  /* filter: drop-shadow(0 10px 4px #eee); */
}

.coin {
  position: relative;
  transform-style: preserve-3d;
  width: 200px;
  height: 200px;
}

.coin-result-heads {
  animation: flip-heads 1.25s linear forwards;
}

.coin-result-tails {
  animation: flip-tails 1.25s ease-out forwards;
}

.coin:after {
  /* coin depth */
  content: "";
  position: absolute;
  top: 100px;
  /* Adjusted to center the depth of the coin */
  left: 0;
  right: 0;
  height: 12px;
  transform: rotateX(90deg);
  transform-origin: 50% 100%;
  background-color: #f57c00;
}

.coin__front,
.coin__back {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffc107;
  background-color: #ff9800;
  width: 100%;
  height: 100%;
  font-size: 65px;
  text-shadow: 1px 2px #f57c00, -1px 0 #fff;
  border-radius: 50%;
}

.coin__front:before,
.coin__back:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  transform: scale(0.8);
  box-shadow: -2px -4px #f57c00, 2px 4px #ffc107;
}

.coin__back {
  position: absolute;
  top: 0;
  transform: translateZ(-12px) rotateX(180deg);
}

.coin__front-backface,
.coin__back-backface {
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: #f57c00;
}

.coin__front-backface {
  transform: translateZ(-1px);
}

.coin__back-backface {
  transform: translateZ(-11px);
}

@keyframes flip-heads {
  0% {
    transform: rotateX(0deg);
    top: 0px;
  }

  12.5% {
    transform: rotateX(45deg);
    top: -37.5px;
  }

  25% {
    transform: rotateX(90deg);
    top: -75px;
  }

  37.5% {
    transform: rotateX(135deg);
    top: -112.5px;
  }

  50% {
    transform: rotateX(180deg);
    top: -150px;
  }

  62.5% {
    transform: rotateX(225deg);
    top: -112.5px;
  }

  75% {
    transform: rotateX(270deg);
    top: -75px;
  }

  87.5% {
    transform: rotateX(315deg);
    top: -37.5px;
  }

  100% {
    transform: rotateX(360deg);
    top: 0px;
  }
}

@keyframes flip-tails {
  0% {
    transform: rotateX(0deg);
    top: 0px;
  }

  8.33% {
    transform: rotateX(45deg);
    top: -25px;
  }

  16.67% {
    transform: rotateX(90deg);
    top: -50px;
  }

  25% {
    transform: rotateX(135deg);
    top: -75px;
  }

  33.33% {
    transform: rotateX(180deg);
    top: -100px;
  }

  41.67% {
    transform: rotateX(225deg);
    top: -125px;
  }

  50% {
    transform: rotateX(270deg);
    top: -150px;
  }

  58.33% {
    transform: rotateX(315deg);
    top: -125px;
  }

  66.67% {
    transform: rotateX(360deg);
    top: -100px;
  }

  75% {
    transform: rotateX(405deg);
    top: -75px;
  }

  83.33% {
    transform: rotateX(450deg);
    top: -50px;
  }

  91.67% {
    transform: rotateX(495deg);
    top: -25px;
  }

  100% {
    transform: rotateX(540deg);
    top: 0px;
  }
}

/* body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
  font-family: "Roboto", sans-serif;
} */

.coin-button {
  /* display: inline-block; */
  padding: 8px 20px;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  border: 0px solid #000;
  border-radius: 5px;
  background-color: #0099ff;
  color: #000033;
  cursor: pointer;
  margin: 0px;
}