/* body {
  background:
  linear-gradient(-45deg, #ffffff10, #ffffff00, #ffffff10, #ffffff00, #ffffff10);
  background-size: 500% 500%;
  animation: gradient 48s ease-in-out infinite;
  height: 100vh;
} */

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

* {
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  letter-spacing: .75px;
  user-select: none;
}

p, .lead{font-weight: 200}

h1, h2, h3, h4, h5, h6{font-weight: 200}

.btn{border-radius:3rem}

/* Spin Coin Animation */
.coin, .coin *, .coin *::before, .coin *::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.coin {
  --face: #c0c9d2;
  --sign: #e9eff5;
  --circle: #d6dee4;
  --side: #f8f9fa;
  --slide: #c0c9d2;
}

.coin-container {
  width: 3rem;
  height: 3rem;
  position: relative;
  perspective: 300px;
  transform: translateZ(-0.4em);
}

.coin {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  animation: spinCoin 20s -1s linear infinite;
}

.face {
  border-radius: 5em;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  background: rgb(248,249,250);
  background: radial-gradient(circle, rgba(248,249,250,1) 0%, rgba(136,136,136,1) 49%, rgba(248,249,250,1) 75%, rgba(153,153,153,1) 100%);
}

.front {
  transform: translate3d(0, 0, 0.125em) rotateY(0);
}

.back {
  transform: rotateY(180deg) translate3d(0, 0, 0.125em);
}

.symbol {
  position: absolute;
  color: var(--sign);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 5em;
}

.circle
{
    position: absolute;
    top: 50%;
    left: 50%;

    width: 3rem;
    height: 3rem;

    transform: translate(-50%, -50%);
    animation: gradient 3s ease infinite;

    border: .2em inset #f8f9fa80;
    border-radius: 5em;
    background: linear-gradient(-85deg, rgba(255,255,255,.5) 0%, rgba(102,102,102,.5) 25%, rgba(153,153,153,.5) 50%, rgba(102,102,102,.5) 75%, rgba(255,255,255,.5) 100%);
    background-size: 400% 400%;

    backdrop-filter: saturate(1);
}

@keyframes gradient
{
    0%
    {
        background-position: 0 50%;
    }
    50%
    {
        background-position: 100% 50%;
    }
    100%
    {
        background-position: 0 50%;
    }
}


.side {
  width: .3em;
  height: .39em;
  background: var(--side);
  position: absolute;
  left: 50%;
  top: 50%;
  backface-visibility: hidden;
}

.coin figure:nth-of-type(1) {
  transform: translate3d(-50%, -50%, 0) rotateY(90deg) rotateX(0deg) translateZ(1.2em);
}

.coin figure:nth-of-type(2) {
  transform: translate3d(-50%, -50%, 0) rotateY(90deg) rotateX(18deg) translateZ(1.2em);
}

.coin figure:nth-of-type(3) {
  transform: translate3d(-50%, -50%, 0) rotateY(90deg) rotateX(36deg) translateZ(1.2em);
}

.coin figure:nth-of-type(4) {
  transform: translate3d(-50%, -50%, 0) rotateY(90deg) rotateX(54deg) translateZ(1.2em);
}

.coin figure:nth-of-type(5) {
  transform: translate3d(-50%, -50%, 0) rotateY(90deg) rotateX(72deg) translateZ(1.2em);
}

.coin figure:nth-of-type(6) {
  transform: translate3d(-50%, -50%, 0) rotateY(90deg) rotateX(90deg) translateZ(1.2em);
}

.coin figure:nth-of-type(7) {
  transform: translate3d(-50%, -50%, 0) rotateY(90deg) rotateX(108deg) translateZ(1.2em);
}

.coin figure:nth-of-type(8) {
  transform: translate3d(-50%, -50%, 0) rotateY(90deg) rotateX(126deg) translateZ(1.2em);
}

.coin figure:nth-of-type(9) {
  transform: translate3d(-50%, -50%, 0) rotateY(90deg) rotateX(144deg) translateZ(1.2em);
}

.coin figure:nth-of-type(10) {
  transform: translate3d(-50%, -50%, 0) rotateY(90deg) rotateX(162deg) translateZ(1.2em);
}

.coin figure:nth-of-type(11) {
  transform: translate3d(-50%, -50%, 0) rotateY(90deg) rotateX(180deg) translateZ(1.2em);
}

.coin figure:nth-of-type(12) {
  transform: translate3d(-50%, -50%, 0) rotateY(90deg) rotateX(198deg) translateZ(1.2em);
}

.coin figure:nth-of-type(13) {
  transform: translate3d(-50%, -50%, 0) rotateY(90deg) rotateX(216deg) translateZ(1.2em);
}

.coin figure:nth-of-type(14) {
  transform: translate3d(-50%, -50%, 0) rotateY(90deg) rotateX(234deg) translateZ(1.2em);
}

.coin figure:nth-of-type(15) {
  transform: translate3d(-50%, -50%, 0) rotateY(90deg) rotateX(252deg) translateZ(1.2em);
}

.coin figure:nth-of-type(16) {
  transform: translate3d(-50%, -50%, 0) rotateY(90deg) rotateX(270deg) translateZ(1.2em);
}

.coin figure:nth-of-type(17) {
  transform: translate3d(-50%, -50%, 0) rotateY(90deg) rotateX(288deg) translateZ(1.2em);
}

.coin figure:nth-of-type(18) {
  transform: translate3d(-50%, -50%, 0) rotateY(90deg) rotateX(306deg) translateZ(1.2em);
}

.coin figure:nth-of-type(19) {
  transform: translate3d(-50%, -50%, 0) rotateY(90deg) rotateX(324deg) translateZ(1.2em);
}

.coin figure:nth-of-type(20) {
  transform: translate3d(-50%, -50%, 0) rotateY(90deg) rotateX(342deg) translateZ(1.2em);
}

@keyframes spinCoin {
  0%, 100% {
    transform: rotateX(0deg) rotateY(3600deg) rotateZ(0deg);
  }
  50% {
    transform: rotateX(0deg) rotateY(1800deg) rotateZ(0deg);
  }
}