@import "tailwindcss";

.inter > {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.gradient-text {
  background-image: linear-gradient(15deg, #f7e93f, #fb09b4, #9100f8);
  color: transparent;
  background-clip: text;
}

.gradient {
  background-image: linear-gradient(47deg, #f7e93f, #fb09b4, #9100f8);
}

@media screen and (min-width: 992px) {
  .grid-view {
    grid-template-areas:
      "audio mobile mobile"
      "audio globe  globe"
      "zap   zap    resource";
  }

  #audio {
    grid-area: audio;
  }
  #mobile {
    grid-area: mobile;
  }
  #globe {
    grid-area: globe;
  }
  #zap {
    grid-area: zap;
  }
  #resource {
    grid-area: resource;
  }
}

.animate {
  transition: translateY(100%);
  opacity: 0;
  animation: slideup 1s ease-in-out 0.5s forwards;
}

.animate-pulse {
  animation: pulse 2s ease-in-out infinite forwards;
}

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

@keyframes pulse {
  0% {
    transform: translateY(0%);
  }
  5% {
    transform: translateY(-30%);
  }
  10% {
    transform: translateY(0);
  }
  13% {
    transform: translateY(-15%);
  }
  18% {
    transform: translateY(0);
  }
}