/* coins.css - Decorative coins and the arc under the hero. */

.coins {
  position: relative;
  height: 18.5rem;
  margin-top: 1.25rem;
}

.coin {
  position: absolute;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 600;
  color: #eef9f3;
  background: radial-gradient(circle at 30% 25%,#cdeedd,#4fb58f 45%,#0b3a2e);
  border: 3px solid rgba(255,255,255,.35);
  box-shadow: 0 0 40px rgba(92,196,155,.5),inset 0 -10px 20px rgba(0,0,0,.4);
  animation: fl 7s ease-in-out infinite;
}

.c1 {
  width: 9.4rem;
  height: 9.4rem;
  left: 2%;
  bottom: 30px;
  font-size: 2.4rem;
}

.c2 {
  width: 13rem;
  height: 13rem;
  left: 30%;
  bottom: 50px;
  font-size: 3.5rem;
  animation-delay: -2s;
  background: radial-gradient(circle at 30% 25%,#d8f3e8,#5cc49b 45%,#14604b);
}

.c3 {
  width: 6.9rem;
  height: 6.9rem;
  left: 62%;
  bottom: 0;
  font-size: 1.75rem;
  animation-delay: -4s;
}

@keyframes fl {
  50% {
    transform: translateY(-14px) rotate(4deg);
  }
}

.arc {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -260px;
  height: 300px;
  border-radius: 50%;
  background: linear-gradient(#d8f3e8,#5cc49b 30%,#0b3a2e);
  box-shadow: 0 -4px 40px rgba(92,196,155,.5);
}