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

@layer base {
  html {
    scroll-behavior: smooth;
  }

  /* body {
    font-family: 'Poppins', sans-serif;
  } */
}

@layer components {
  .container {
    @apply max-w-[1280px] w-[calc(100%-3rem)] ml-[1.5rem] mr-[1.5rem] lg:m-auto;
  }

  .item-copy {
    @apply absolute bg-[#0077ff33] rounded-[8px] p-[6px] bottom-[8px] left-[8px] cursor-pointer transition-opacity text-[12px] text-[#0077ff];
  }

  .scroll_top {
    @apply fixed flex items-center right-[1.5rem] bottom-[-20%] bg-white p-[1rem] rounded-[8px] transition-[.6s] duration-[.6s] z-[50] cursor-pointer shadow-[0_1px_2px_rgba(0,0,0,0.2)] dark:bg-[#18191A];
  }

  .selector {
    @apply relative h-[196px] flex flex-col gap-[.8rem] cursor-pointer justify-center items-center shadow-[0_1px_2px_rgba(0,0,0,0.2)] bg-white p-[2rem] rounded-[8px] dark:bg-[#18191A];
  }
}

.selector {
  --first-color: #5ddcff;
  --second-color: #3c67e3;
  --third-color: #4e00c2;
}
@property --rotate {
  syntax: '<angle>';
  initial-value: 132deg;
  inherits: false;
}
.selector::before,
.selector::after {
  opacity: 0;
  content: '';
  transition: all 0.5s ease-in-out;
}
.selector:hover::before,
.selector:hover::after {
  position: absolute;
  z-index: -1;
  background-image: linear-gradient(
    var(--rotate),
    var(--first-color),
    var(--second-color) 43%,
    var(--third-color)
  );
  animation: spin 2.5s linear infinite;
  opacity: 1;
}
.selector:hover::before {
  width: 104%;
  height: 104%;
  border-radius: 8px;
  top: -2%;
  left: -2%;
}
.selector:hover::after {
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  transform: scale(0.9);
  filter: blur(70px);
}
@keyframes spin {
  0% {
    --rotate: 0deg;
  }
  100% {
    --rotate: 360deg;
  }
}
