@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  * {
    @apply touch-manipulation;
  }
  body {
    @apply relative antialiased bg-black overflow-x-hidden text-white;
    font-family: "Roboto", sans-serif;
  }
}

.text-shadow {
  text-shadow: 0px 4px 100px #000, 0px 4px 41.8px #000;
}

.text-gradient {
  background: #fff;
  background-clip: text;
  color: transparent;
}

.modal-body {
  border-radius: 30px 30px 0px 0px;
  background: linear-gradient(
      180deg,
      rgba(234, 0, 0, 0.09) 0%,
      rgba(234, 0, 0, 0) 17%
    ),
    rgba(0, 0, 0, 0.8);
  box-shadow: 0px 0px 82px 0px purple,
    0px 1px 0px 0px purple inset,
    0px 2px 2px 0px purple inset;
  backdrop-filter: blur(6px);
}

.popup-body {
  border-radius: 30px;
  background: linear-gradient(
      180deg,
      rgba(234, 0, 0, 0.09) 0%,
      rgba(234, 0, 0, 0) 17%
    ),
    rgba(0, 0, 0, 0.8);
  box-shadow: 0px 0px 82px 0px rgba(255, 171, 93, 0.3);
  backdrop-filter: blur(6px);
  border: transparent;
  border-top: 2px solid #ffab5d;
}

.user-tap-animate {
  z-index: 50;
}

.user-tap-animate > div {
  color: #fff;
  font-size: 32px;
  font-weight: 700;
  left: 0;
  position: absolute;
  top: 0;
  pointer-events: none;
  text-align: center;
  user-select: none;
  z-index: 60;
  animation: user-tap-animate 1s ease 0s 1;
}

@keyframes user-tap-animate {
  0% {
    opacity: 1;
    transform: translate(-50%, -100%);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -300%);
  }
}
