html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  background-image: linear-gradient(
    to right,
    rgba(248, 37, 125, 0.423),
    rgba(161, 3, 3, 0.52),
    rgba(25, 25, 244, 0.467),
    rgba(233, 14, 215, 0.411)
  ) !important;
}
nav {
  padding: 5px 0;
  background-color: #35010aa6 !important;
}
#sign-in-modal,
#sign-up-modal{
    z-index:999;
}
.banner {
  background: linear-gradient(rgba(0, 0, 0, 0.753), rgba(0, 0, 0, 0.759)),
    url("images/potion2.jpg");
  height: 70vh;
  background-position: center;
  background-size: cover;
  font-family: Trebuchet MS, sans-serif;
}
#cookie-banner {
  background-color: white !important;
}
#close-sign-up {
  color: black !important;
}
.feature:hover {
  opacity: 1;
  transition: 0.5s ease-in-out;
  cursor: pointer;
}

.third {
  border-color: #3498db;
  box-shadow: 0 0 40px 40px #9b0254 inset, 0 0 0 0 #2b024e;
  -webkit-transition: all 150ms ease-in-out;
  transition: all 150ms ease-in-out;
}
.third:hover {
  box-shadow: 0 0 10px 0 #f65c95 inset, 0 0 10px 4px #d303ad;
  transform: scale(1.1);
}

/* animate */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #0d0d0d;
}

.background-animation {
  position: relative;
  width: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
}

.glow {
  position: absolute;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, rgba(255, 0, 0, 0.8), transparent);
  border-radius: 50%;
  animation: move-glow 8s infinite ease-in-out;
}

.glow:nth-child(1) {
  top: 20%;
  left: 15%;
  animation-delay: 0s;
}

.glow:nth-child(2) {
  top: 70%;
  left: 30%;
  animation-delay: 2s;
}

.glow:nth-child(3) {
  top: 50%;
  right: 10%;
  animation-delay: 4s;
}

@keyframes move-glow {
  0%,
  100% {
    transform: translate(0, 0);
    opacity: 0.7;
  }
  50% {
    transform: translate(50px, -50px);
    opacity: 0.3;
  }
}

/* Katana Animation */
.katana {
  position: absolute;
  width: 4px;
  height: 300px;
  background: linear-gradient(to bottom, #c70039, #a0002b);
  box-shadow: 0 0 20px #c70039, 0 0 40px #a0002b;
  transform: rotate(45deg);
  animation: katana-glow 3s infinite alternate;
}

@keyframes katana-glow {
  0% {
    transform: rotate(45deg) translateY(0px);
    box-shadow: 0 0 20px #c70039, 0 0 40px #a0002b;
  }
  100% {
    transform: rotate(45deg) translateY(-20px);
    box-shadow: 0 0 30px #ff0039, 0 0 60px #ff0039;
  }
}