@import url("https://fonts.googleapis.com/css2?family=Sora:wght@100..800&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
  font-family: "Sora", sans-serif;
  line-height: 1.5;
  font-weight: 400;
  color-scheme: light dark;
  color: #242424;
  background-color: #fff;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.card {
  background: linear-gradient(110deg, #272727 0.06%, #171717);
  box-shadow: inset 0 0 6px hsla(0, 0%, 100%, 0.1);
}
.card .grid-style div {
  height: 1px;
  width: 1px;
  border-radius: 50%;
  background: #888;
  transition: 0.25s;
}
.card:hover .grid-style div[data-index="0"] {
  position: relative;
  background: #888;
  animation: animate 0.25s ease-in-out 0s forwards;
}
.card:hover .grid-style div[data-index="0"]:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  filter: blur(2px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #3291ff;
  opacity: 0;
  border-radius: 50%;
  animation: animate2 0.25s ease-in-out 0s forwards;
}
.card:hover .grid-style div[data-index="4"] {
  position: relative;
  background: #888;
  animation: animate 0.25s ease-in-out 0.1s forwards;
}
.card:hover .grid-style div[data-index="4"]:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  filter: blur(2px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #3291ff;
  opacity: 0;
  border-radius: 50%;
  animation: animate2 0.25s ease-in-out 0.1s forwards;
}
.card:hover .grid-style div[data-index="6"] {
  position: relative;
  background: #888;
  animation: animate 0.25s ease-in-out 0.15s forwards;
}
.card:hover .grid-style div[data-index="6"]:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  filter: blur(2px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #3291ff;
  opacity: 0;
  border-radius: 50%;
  animation: animate2 0.25s ease-in-out 0.15s forwards;
}
.card:hover .grid-style div[data-index="7"] {
  position: relative;
  background: #888;
  animation: animate 0.25s ease-in-out 0.175s forwards;
}
.card:hover .grid-style div[data-index="7"]:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  filter: blur(2px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #3291ff;
  opacity: 0;
  border-radius: 50%;
  animation: animate2 0.25s ease-in-out 0.175s forwards;
}
.card:hover .grid-style div[data-index="8"] {
  position: relative;
  background: #888;
  animation: animate 0.25s ease-in-out 0.2s forwards;
}
.card:hover .grid-style div[data-index="8"]:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  filter: blur(2px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #3291ff;
  opacity: 0;
  border-radius: 50%;
  animation: animate2 0.25s ease-in-out 0.2s forwards;
}
.card:hover .grid-style div[data-index="10"] {
  position: relative;
  background: #888;
  animation: animate 0.25s ease-in-out 0.25s forwards;
}
.card:hover .grid-style div[data-index="10"]:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  filter: blur(2px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #3291ff;
  opacity: 0;
  border-radius: 50%;
  animation: animate2 0.25s ease-in-out 0.25s forwards;
}
.card:hover .grid-style div[data-index="14"] {
  position: relative;
  background: #888;
  animation: animate 0.25s ease-in-out 0.35s forwards;
}
.card:hover .grid-style div[data-index="14"]:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  filter: blur(2px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #3291ff;
  opacity: 0;
  border-radius: 50%;
  animation: animate2 0.25s ease-in-out 0.35s forwards;
}
.card:hover .grid-style div[data-index="16"] {
  position: relative;
  background: #888;
  animation: animate 0.25s ease-in-out 0.4s forwards;
}
.card:hover .grid-style div[data-index="16"]:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  filter: blur(2px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #3291ff;
  opacity: 0;
  border-radius: 50%;
  animation: animate2 0.25s ease-in-out 0.4s forwards;
}
.card:hover .grid-style div[data-index="17"] {
  position: relative;
  background: #888;
  animation: animate 0.25s ease-in-out 0.425s forwards;
}
.card:hover .grid-style div[data-index="17"]:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  filter: blur(2px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #3291ff;
  opacity: 0;
  border-radius: 50%;
  animation: animate2 0.25s ease-in-out 0.425s forwards;
}
.card:hover .grid-style div[data-index="18"] {
  position: relative;
  background: #888;
  animation: animate 0.25s ease-in-out 0.45s forwards;
}
.card:hover .grid-style div[data-index="18"]:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  filter: blur(2px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #3291ff;
  opacity: 0;
  border-radius: 50%;
  animation: animate2 0.25s ease-in-out 0.45s forwards;
}
.card:hover .grid-style div[data-index="19"] {
  position: relative;
  background: #888;
  animation: animate 0.25s ease-in-out 0.475s forwards;
}
.card:hover .grid-style div[data-index="19"]:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  filter: blur(2px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #3291ff;
  opacity: 0;
  border-radius: 50%;
  animation: animate2 0.25s ease-in-out 0.475s forwards;
}
.card:hover .grid-style div[data-index="20"] {
  position: relative;
  background: #888;
  animation: animate 0.25s ease-in-out 0.5s forwards;
}
.card:hover .grid-style div[data-index="20"]:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  filter: blur(2px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #3291ff;
  opacity: 0;
  border-radius: 50%;
  animation: animate2 0.25s ease-in-out 0.5s forwards;
}
.card:hover .grid-style div[data-index="23"] {
  position: relative;
  background: #888;
  animation: animate 0.25s ease-in-out 0.575s forwards;
}
.card:hover .grid-style div[data-index="23"]:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  filter: blur(2px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #3291ff;
  opacity: 0;
  border-radius: 50%;
  animation: animate2 0.25s ease-in-out 0.575s forwards;
}
.card:hover .grid-style div[data-index="25"] {
  position: relative;
  background: #888;
  animation: animate 0.25s ease-in-out 0.625s forwards;
}
.card:hover .grid-style div[data-index="25"]:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  filter: blur(2px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #3291ff;
  opacity: 0;
  border-radius: 50%;
  animation: animate2 0.25s ease-in-out 0.625s forwards;
}
.card:hover .grid-style div[data-index="30"] {
  position: relative;
  background: #888;
  animation: animate 0.25s ease-in-out 0.75s forwards;
}
.card:hover .grid-style div[data-index="30"]:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  filter: blur(2px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #3291ff;
  opacity: 0;
  border-radius: 50%;
  animation: animate2 0.25s ease-in-out 0.75s forwards;
}
.card:hover .grid-style div[data-index="32"] {
  position: relative;
  background: #888;
  animation: animate 0.25s ease-in-out 0.8s forwards;
}
.card:hover .grid-style div[data-index="32"]:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  filter: blur(2px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #3291ff;
  opacity: 0;
  border-radius: 50%;
  animation: animate2 0.25s ease-in-out 0.8s forwards;
}
.card:hover .grid-style div[data-index="36"] {
  position: relative;
  background: #888;
  animation: animate 0.25s ease-in-out 0.9s forwards;
}
.card:hover .grid-style div[data-index="36"]:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  filter: blur(2px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #3291ff;
  opacity: 0;
  border-radius: 50%;
  animation: animate2 0.25s ease-in-out 0.9s forwards;
}
.card:hover .grid-style div[data-index="38"] {
  position: relative;
  background: #888;
  animation: animate 0.25s ease-in-out 0.95s forwards;
}
.card:hover .grid-style div[data-index="38"]:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  filter: blur(2px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #3291ff;
  opacity: 0;
  border-radius: 50%;
  animation: animate2 0.25s ease-in-out 0.95s forwards;
}
.card:hover .grid-style div[data-index="40"] {
  position: relative;
  background: #888;
  animation: animate 0.25s ease-in-out 1s forwards;
}
.card:hover .grid-style div[data-index="40"]:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  filter: blur(2px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #3291ff;
  opacity: 0;
  border-radius: 50%;
  animation: animate2 0.25s ease-in-out 1s forwards;
}
.card:hover .grid-style div[data-index="42"] {
  position: relative;
  background: #888;
  animation: animate 0.25s ease-in-out 1.05s forwards;
}
.card:hover .grid-style div[data-index="42"]:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  filter: blur(2px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #3291ff;
  opacity: 0;
  border-radius: 50%;
  animation: animate2 0.25s ease-in-out 1.05s forwards;
}
.card:hover .grid-style div[data-index="44"] {
  position: relative;
  background: #888;
  animation: animate 0.25s ease-in-out 1.1s forwards;
}
.card:hover .grid-style div[data-index="44"]:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  filter: blur(2px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #3291ff;
  opacity: 0;
  border-radius: 50%;
  animation: animate2 0.25s ease-in-out 1.1s forwards;
}
.card:hover .grid-style div[data-index="45"] {
  position: relative;
  background: #888;
  animation: animate 0.25s ease-in-out 1.125s forwards;
}
.card:hover .grid-style div[data-index="45"]:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  filter: blur(2px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #3291ff;
  opacity: 0;
  border-radius: 50%;
  animation: animate2 0.25s ease-in-out 1.125s forwards;
}
.card:hover .grid-style div[data-index="46"] {
  position: relative;
  background: #888;
  animation: animate 0.25s ease-in-out 1.15s forwards;
}
.card:hover .grid-style div[data-index="46"]:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  filter: blur(2px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #3291ff;
  opacity: 0;
  border-radius: 50%;
  animation: animate2 0.25s ease-in-out 1.15s forwards;
}
.card:hover .grid-style div[data-index="50"] {
  position: relative;
  background: #888;
  animation: animate 0.25s ease-in-out 1.25s forwards;
}
.card:hover .grid-style div[data-index="50"]:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  filter: blur(2px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #3291ff;
  opacity: 0;
  border-radius: 50%;
  animation: animate2 0.25s ease-in-out 1.25s forwards;
}
.card:hover .grid-style div[data-index="55"] {
  position: relative;
  background: #888;
  animation: animate 0.25s ease-in-out 1.375s forwards;
}
.card:hover .grid-style div[data-index="55"]:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  filter: blur(2px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #3291ff;
  opacity: 0;
  border-radius: 50%;
  animation: animate2 0.25s ease-in-out 1.375s forwards;
}
.card:hover .grid-style div[data-index="57"] {
  position: relative;
  background: #888;
  animation: animate 0.25s ease-in-out 1.425s forwards;
}
.card:hover .grid-style div[data-index="57"]:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  filter: blur(2px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #3291ff;
  opacity: 0;
  border-radius: 50%;
  animation: animate2 0.25s ease-in-out 1.425s forwards;
}
.card:hover .grid-style div[data-index="60"] {
  position: relative;
  background: #888;
  animation: animate 0.25s ease-in-out 1.5s forwards;
}
.card:hover .grid-style div[data-index="60"]:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  filter: blur(2px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #3291ff;
  opacity: 0;
  border-radius: 50%;
  animation: animate2 0.25s ease-in-out 1.5s forwards;
}
.card:hover .grid-style div[data-index="61"] {
  position: relative;
  background: #888;
  animation: animate 0.25s ease-in-out 1.525s forwards;
}
.card:hover .grid-style div[data-index="61"]:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  filter: blur(2px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #3291ff;
  opacity: 0;
  border-radius: 50%;
  animation: animate2 0.25s ease-in-out 1.525s forwards;
}
.card:hover .grid-style div[data-index="63"] {
  position: relative;
  background: #888;
  animation: animate 0.25s ease-in-out 1.575s forwards;
}
.card:hover .grid-style div[data-index="63"]:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  filter: blur(2px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #3291ff;
  opacity: 0;
  border-radius: 50%;
  animation: animate2 0.25s ease-in-out 1.575s forwards;
}
.card:hover .grid-style div[data-index="68"] {
  position: relative;
  background: #888;
  animation: animate 0.25s ease-in-out 1.7s forwards;
}
.card:hover .grid-style div[data-index="68"]:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  filter: blur(2px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #3291ff;
  opacity: 0;
  border-radius: 50%;
  animation: animate2 0.25s ease-in-out 1.7s forwards;
}
.card:hover .grid-style div[data-index="70"] {
  position: relative;
  background: #888;
  animation: animate 0.25s ease-in-out 1.75s forwards;
}
.card:hover .grid-style div[data-index="70"]:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  filter: blur(2px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #3291ff;
  opacity: 0;
  border-radius: 50%;
  animation: animate2 0.25s ease-in-out 1.75s forwards;
}
.card:hover .grid-style div[data-index="74"] {
  position: relative;
  background: #888;
  animation: animate 0.25s ease-in-out 1.85s forwards;
}
.card:hover .grid-style div[data-index="74"]:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  filter: blur(2px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #3291ff;
  opacity: 0;
  border-radius: 50%;
  animation: animate2 0.25s ease-in-out 1.85s forwards;
}
.card:hover .grid-style div[data-index="76"] {
  position: relative;
  background: #888;
  animation: animate 0.25s ease-in-out 1.9s forwards;
}
.card:hover .grid-style div[data-index="76"]:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  filter: blur(2px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #3291ff;
  opacity: 0;
  border-radius: 50%;
  animation: animate2 0.25s ease-in-out 1.9s forwards;
}
.card:hover .grid-style div[data-index="80"] {
  position: relative;
  background: #888;
  animation: animate 0.25s ease-in-out 2s forwards;
}
.card:hover .grid-style div[data-index="80"]:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  filter: blur(2px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #3291ff;
  opacity: 0;
  border-radius: 50%;
  animation: animate2 0.25s ease-in-out 2s forwards;
}
.card:hover .grid-style div[data-index="82"] {
  position: relative;
  background: #888;
  animation: animate 0.25s ease-in-out 2.05s forwards;
}
.card:hover .grid-style div[data-index="82"]:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  filter: blur(2px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #3291ff;
  opacity: 0;
  border-radius: 50%;
  animation: animate2 0.25s ease-in-out 2.05s forwards;
}
.card:hover .grid-style div[data-index="83"] {
  position: relative;
  background: #888;
  animation: animate 0.25s ease-in-out 2.075s forwards;
}
.card:hover .grid-style div[data-index="83"]:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  filter: blur(2px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #3291ff;
  opacity: 0;
  border-radius: 50%;
  animation: animate2 0.25s ease-in-out 2.075s forwards;
}
.card:hover .grid-style div[data-index="84"] {
  position: relative;
  background: #888;
  animation: animate 0.25s ease-in-out 2.1s forwards;
}
.card:hover .grid-style div[data-index="84"]:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  filter: blur(2px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #3291ff;
  opacity: 0;
  border-radius: 50%;
  animation: animate2 0.25s ease-in-out 2.1s forwards;
}
.card:hover .grid-style div[data-index="86"] {
  position: relative;
  background: #888;
  animation: animate 0.25s ease-in-out 2.15s forwards;
}
.card:hover .grid-style div[data-index="86"]:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  filter: blur(2px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #3291ff;
  opacity: 0;
  border-radius: 50%;
  animation: animate2 0.25s ease-in-out 2.15s forwards;
}
.card:hover .grid-style div[data-index="90"] {
  position: relative;
  background: #888;
  animation: animate 0.25s ease-in-out 2.25s forwards;
}
.card:hover .grid-style div[data-index="90"]:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  filter: blur(2px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #3291ff;
  opacity: 0;
  border-radius: 50%;
  animation: animate2 0.25s ease-in-out 2.25s forwards;
}
.card:hover .grid-style div[data-index="93"] {
  position: relative;
  background: #888;
  animation: animate 0.25s ease-in-out 2.325s forwards;
}
.card:hover .grid-style div[data-index="93"]:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  filter: blur(2px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #3291ff;
  opacity: 0;
  border-radius: 50%;
  animation: animate2 0.25s ease-in-out 2.325s forwards;
}

@keyframes animate {
  0% {
    background: #888;
  }
  100% {
    background: #0070f3;
  }
}
@keyframes animate2 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.5;
  }
}
.grid-style {
  width: 100%;
  height: 100%;
  display: grid;
  gap: 19px;
  grid-template-columns: repeat(var(--columns), 1fr);
}