body {
  background: #e3f2fd;
}

.text-svg,
.text-svg-error {
  font-weight: bold;
  position: absolute;
  width: 100%;
  height: 100%;
}

.text-svg text,
.text-svg-error text {
  text-transform: uppercase;
  stroke-width: 2;
  stroke: #fff;
}

.text-svg-error text {
  font-family: "Reddit Sans", sans-serif;
  font-size: 120px;
}

.text-svg text {
  font-family: "Russo One", sans-serif;
  animation: stroke 5s infinite alternate;
  font-size: 140px;
}

#icon svg {
    width: auto;
    height: auto;
}
@keyframes stroke {
  0% {
    fill: rgba(72, 138, 20, 0);
    stroke: rgba(256, 256, 256, 1);
    stroke-dashoffset: 25%;
    stroke-dasharray: 0 50%;
    stroke-width: 2;
  }
  70% {
    fill: rgba(256, 256, 256, 0);
    stroke: rgba(256, 256, 256, 1);
  }
  80% {
    fill: rgba(256, 256, 256, 0.2);
    stroke: rgba(256, 256, 256, 1);
    stroke-width: 3;
  }
  100% {
    fill: rgba(256, 256, 256, 1);
    stroke: rgba(256, 256, 256, 0);
    stroke-dashoffset: -25%;
    stroke-dasharray: 50% 0;
    stroke-width: 0;
  }
}

/* CONTACT BUTTONS */
.pulse-circle {
  position: relative;
}

.pulse-circle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: transparent;
  animation: pulse 1.8s infinite;
}

.popping {
  animation: popping 2s linear infinite;
}

.ringing-phone {
  animation: ring-ring 1.5s linear infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(210, 182, 138, 0.5);
  }
  70% {
    box-shadow: 0 0 0 30px rgba(255, 0, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
  }
}

@keyframes popping {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  50% {
    transform: translateY(-15px);
    opacity: 1;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes ring-ring {
  0% {
    transform: rotate(0);
  }
  1.5% {
    transform: rotate(40deg);
  }
  3% {
    transform: rotate(-40deg);
  }
  4.5% {
    transform: rotate(30deg);
  }
  6% {
    transform: rotate(-30deg);
  }
  7.5% {
    transform: rotate(20deg);
  }
  9% {
    transform: rotate(-20deg);
  }
  10.5% {
    transform: rotate(10deg);
  }
  12% {
    transform: rotate(-10deg);
  }
  13.5% {
    transform: rotate(0);
  }
}