body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #f8f8ff;
}

.coin-container {
  margin: 0 auto;
  padding-bottom: 16px;
}

.info-container {
  width: 100%;
  height: 100px;
  max-width: 800px;
  padding: 32px;
  margin: 0 auto;
  box-sizing: border-box;
  text-align: center;
  color: #313639;
}

h1 {
  font-size: 24px;
}

p {
  font-size: 20px;
}

@media only screen and (max-width: 800px) {
  h1 {
    font-size: 20px;
  }
  
  p {
    font-size: 16px;
  }
}

@media only screen and (max-width: 600px) {
  h1 {
    font-size: 16px;
  }
  
  p {
    font-size: 14px;
  }
}

.coin {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 50px auto;
  transform-style: preserve-3d;
  animation: rotate3d 8s linear infinite;
  transition: all 0.3s;
}
.coin__front, .coin__back {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #e1c86a;
}
.coin__front:after, .coin__back:after {
  content: "";
  position: absolute;
  left: -150px;
  bottom: 100%;
  display: block;
  height: 200px;
  width: 600px;
  background: #fff;
  opacity: 0.3;
  animation: shine linear 4s infinite;
}
.coin__front {
  background-image: url("./coin.png");
  background-size: cover;
  transform: translateZ(10px);
}
.coin__back {
  background-image: url("./coin.png");
  background-size: cover;
  transform: translateZ(-10px) rotateY(180deg);
}
.coin__edge div:nth-child(1) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #020100;
  transform: translateY(140.58px) translateX(140px) rotateZ(97.2deg) translateX(150px) rotateY(90deg);
}
.coin__edge div:nth-child(2) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #181405;
  transform: translateY(140.58px) translateX(140px) rotateZ(104.4deg) translateX(150px) rotateY(90deg);
}
.coin__edge div:nth-child(3) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #2d2609;
  transform: translateY(140.58px) translateX(140px) rotateZ(111.6deg) translateX(150px) rotateY(90deg);
}
.coin__edge div:nth-child(4) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #42370d;
  transform: translateY(140.58px) translateX(140px) rotateZ(118.8deg) translateX(150px) rotateY(90deg);
}
.coin__edge div:nth-child(5) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #554711;
  transform: translateY(140.58px) translateX(140px) rotateZ(126deg) translateX(150px) rotateY(90deg);
}
.coin__edge div:nth-child(6) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #685615;
  transform: translateY(140.58px) translateX(140px) rotateZ(133.2deg) translateX(150px) rotateY(90deg);
}
.coin__edge div:nth-child(7) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #796518;
  transform: translateY(140.58px) translateX(140px) rotateZ(140.4deg) translateX(150px) rotateY(90deg);
}
.coin__edge div:nth-child(8) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #8a731c;
  transform: translateY(140.58px) translateX(140px) rotateZ(147.6deg) translateX(150px) rotateY(90deg);
}
.coin__edge div:nth-child(9) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #9a801f;
  transform: translateY(140.58px) translateX(140px) rotateZ(154.8deg) translateX(150px) rotateY(90deg);
}
.coin__edge div:nth-child(10) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #a98c22;
  transform: translateY(140.58px) translateX(140px) rotateZ(162deg) translateX(150px) rotateY(90deg);
}
.coin__edge div:nth-child(11) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #b69825;
  transform: translateY(140.58px) translateX(140px) rotateZ(169.2deg) translateX(150px) rotateY(90deg);
}
.coin__edge div:nth-child(12) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #c3a227;
  transform: translateY(140.58px) translateX(140px) rotateZ(176.4deg) translateX(150px) rotateY(90deg);
}
.coin__edge div:nth-child(13) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #cfac2a;
  transform: translateY(140.58px) translateX(140px) rotateZ(183.6deg) translateX(150px) rotateY(90deg);
}
.coin__edge div:nth-child(14) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #d5b330;
  transform: translateY(140.58px) translateX(140px) rotateZ(190.8deg) translateX(150px) rotateY(90deg);
}
.coin__edge div:nth-child(15) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #d7b63a;
  transform: translateY(140.58px) translateX(140px) rotateZ(198deg) translateX(150px) rotateY(90deg);
}
.coin__edge div:nth-child(16) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #d9ba43;
  transform: translateY(140.58px) translateX(140px) rotateZ(205.2deg) translateX(150px) rotateY(90deg);
}
.coin__edge div:nth-child(17) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #dbbd4c;
  transform: translateY(140.58px) translateX(140px) rotateZ(212.4deg) translateX(150px) rotateY(90deg);
}
.coin__edge div:nth-child(18) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #dcbf53;
  transform: translateY(140.58px) translateX(140px) rotateZ(219.6deg) translateX(150px) rotateY(90deg);
}
.coin__edge div:nth-child(19) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #dec259;
  transform: translateY(140.58px) translateX(140px) rotateZ(226.8deg) translateX(150px) rotateY(90deg);
}
.coin__edge div:nth-child(20) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #dfc45e;
  transform: translateY(140.58px) translateX(140px) rotateZ(234deg) translateX(150px) rotateY(90deg);
}
.coin__edge div:nth-child(21) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #dfc562;
  transform: translateY(140.58px) translateX(140px) rotateZ(241.2deg) translateX(150px) rotateY(90deg);
}
.coin__edge div:nth-child(22) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #e0c666;
  transform: translateY(140.58px) translateX(140px) rotateZ(248.4deg) translateX(150px) rotateY(90deg);
}
.coin__edge div:nth-child(23) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #e1c768;
  transform: translateY(140.58px) translateX(140px) rotateZ(255.6deg) translateX(150px) rotateY(90deg);
}
.coin__edge div:nth-child(24) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #e1c86a;
  transform: translateY(140.58px) translateX(140px) rotateZ(262.8deg) translateX(150px) rotateY(90deg);
}
.coin__edge div:nth-child(25) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #e1c86a;
  transform: translateY(140.58px) translateX(140px) rotateZ(270deg) translateX(150px) rotateY(90deg);
}
.coin__edge div:nth-child(26) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #e1c86a;
  transform: translateY(140.58px) translateX(140px) rotateZ(277.2deg) translateX(150px) rotateY(90deg);
}
.coin__edge div:nth-child(27) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #e1c768;
  transform: translateY(140.58px) translateX(140px) rotateZ(284.4deg) translateX(150px) rotateY(90deg);
}
.coin__edge div:nth-child(28) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #e0c666;
  transform: translateY(140.58px) translateX(140px) rotateZ(291.6deg) translateX(150px) rotateY(90deg);
}
.coin__edge div:nth-child(29) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #dfc562;
  transform: translateY(140.58px) translateX(140px) rotateZ(298.8deg) translateX(150px) rotateY(90deg);
}
.coin__edge div:nth-child(30) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #dfc45e;
  transform: translateY(140.58px) translateX(140px) rotateZ(306deg) translateX(150px) rotateY(90deg);
}
.coin__edge div:nth-child(31) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #dec259;
  transform: translateY(140.58px) translateX(140px) rotateZ(313.2deg) translateX(150px) rotateY(90deg);
}
.coin__edge div:nth-child(32) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #dcbf53;
  transform: translateY(140.58px) translateX(140px) rotateZ(320.4deg) translateX(150px) rotateY(90deg);
}
.coin__edge div:nth-child(33) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #dbbd4c;
  transform: translateY(140.58px) translateX(140px) rotateZ(327.6deg) translateX(150px) rotateY(90deg);
}
.coin__edge div:nth-child(34) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #d9ba43;
  transform: translateY(140.58px) translateX(140px) rotateZ(334.8deg) translateX(150px) rotateY(90deg);
}
.coin__edge div:nth-child(35) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #d7b63a;
  transform: translateY(140.58px) translateX(140px) rotateZ(342deg) translateX(150px) rotateY(90deg);
}
.coin__edge div:nth-child(36) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #d5b330;
  transform: translateY(140.58px) translateX(140px) rotateZ(349.2deg) translateX(150px) rotateY(90deg);
}
.coin__edge div:nth-child(37) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #cfac2a;
  transform: translateY(140.58px) translateX(140px) rotateZ(356.4deg) translateX(150px) rotateY(90deg);
}
.coin__edge div:nth-child(38) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #c3a227;
  transform: translateY(140.58px) translateX(140px) rotateZ(363.6deg) translateX(150px) rotateY(90deg);
}
.coin__edge div:nth-child(39) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #b69825;
  transform: translateY(140.58px) translateX(140px) rotateZ(370.8deg) translateX(150px) rotateY(90deg);
}
.coin__edge div:nth-child(40) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #a98c22;
  transform: translateY(140.58px) translateX(140px) rotateZ(378deg) translateX(150px) rotateY(90deg);
}
.coin__edge div:nth-child(41) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #9a801f;
  transform: translateY(140.58px) translateX(140px) rotateZ(385.2deg) translateX(150px) rotateY(90deg);
}
.coin__edge div:nth-child(42) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #8a731c;
  transform: translateY(140.58px) translateX(140px) rotateZ(392.4deg) translateX(150px) rotateY(90deg);
}
.coin__edge div:nth-child(43) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #796518;
  transform: translateY(140.58px) translateX(140px) rotateZ(399.6deg) translateX(150px) rotateY(90deg);
}
.coin__edge div:nth-child(44) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #685615;
  transform: translateY(140.58px) translateX(140px) rotateZ(406.8deg) translateX(150px) rotateY(90deg);
}
.coin__edge div:nth-child(45) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #554711;
  transform: translateY(140.58px) translateX(140px) rotateZ(414deg) translateX(150px) rotateY(90deg);
}
.coin__edge div:nth-child(46) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #42370d;
  transform: translateY(140.58px) translateX(140px) rotateZ(421.2deg) translateX(150px) rotateY(90deg);
}
.coin__edge div:nth-child(47) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #2d2609;
  transform: translateY(140.58px) translateX(140px) rotateZ(428.4deg) translateX(150px) rotateY(90deg);
}
.coin__edge div:nth-child(48) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #181405;
  transform: translateY(140.58px) translateX(140px) rotateZ(435.6deg) translateX(150px) rotateY(90deg);
}
.coin__edge div:nth-child(49) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #020100;
  transform: translateY(140.58px) translateX(140px) rotateZ(442.8deg) translateX(150px) rotateY(90deg);
}
.coin__edge div:nth-child(50) {
  position: absolute;
  height: 18.84px;
  width: 20px;
  background: #000;
  transform: translateY(140.58px) translateX(140px) rotateZ(450deg) translateX(150px) rotateY(90deg);
}
.coin__shadow {
  position: absolute;
  width: 300px;
  height: 20px;
  border-radius: 50%;
  background: #000;
  box-shadow: 0 0 100px 100px #000;
  opacity: 0.125;
  transform: rotateX(90deg) translateZ(-330px) scale(0.5);
}
@keyframes rotate3d {
  0% {
    transform: perspective(1000px) rotateY(0deg);
 }
  100% {
    transform: perspective(1000px) rotateY(360deg);
 }
}
@keyframes shine {
  0%, 15% {
    transform: translateY(600px) rotate(-40deg);
 }
  50% {
    transform: translateY(-300px) rotate(-40deg);
 }
}