Scripted/WEB/View/src/CSS/Main.css

@import url("https://fonts.googleapis.com/css2?family=Orbitron&display=swap");

/*Default CSS*/
body {
  min-height: 100vh;
  font-family: "Orbitron", sans-serif;
  color: white;
  background-image: url(../../assets/img/BackgroundMain.jpg);
  scroll-behavior: smooth;
  height: 100vh;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #464646;
}

p,
a,
li,
button,
ul {
  margin: 0;
  padding: 0;
  line-height: normal;
  text-decoration: none !important;
}

/* Animation CSS */

@keyframes blink {
  0%,
  22%,
  36%,
  75% {
    color: #ffe6ff;
    text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #dd07bf,
      -0.2rem 0.1rem 1rem #dd07bf, 0.2rem 0.1rem 1rem #dd07bf,
      0 -0.5rem 2rem #841174, 0 0.5rem 3rem #841174;
  }
  28%,
  33% {
    color: #dd07bf;
    text-shadow: none;
  }
  82%,
  97% {
    color: #991888;
    text-shadow: none;
  }
}

@keyframes flicker {
  from {
    opacity: 1;
  }

  4% {
    opacity: 0.9;
  }

  6% {
    opacity: 0.85;
  }

  8% {
    opacity: 0.95;
  }

  10% {
    opacity: 0.9;
  }

  11% {
    opacity: 0.922;
  }

  12% {
    opacity: 0.9;
  }

  14% {
    opacity: 0.95;
  }

  16% {
    opacity: 0.98;
  }

  17% {
    opacity: 0.9;
  }

  19% {
    opacity: 0.93;
  }

  20% {
    opacity: 0.99;
  }

  24% {
    opacity: 1;
  }

  26% {
    opacity: 0.94;
  }

  28% {
    opacity: 0.98;
  }

  37% {
    opacity: 0.93;
  }

  38% {
    opacity: 0.5;
  }

  39% {
    opacity: 0.96;
  }

  42% {
    opacity: 1;
  }

  44% {
    opacity: 0.97;
  }

  46% {
    opacity: 0.94;
  }

  56% {
    opacity: 0.9;
  }

  58% {
    opacity: 0.9;
  }

  60% {
    opacity: 0.99;
  }

  68% {
    opacity: 1;
  }

  70% {
    opacity: 0.9;
  }

  72% {
    opacity: 0.95;
  }

  93% {
    opacity: 0.93;
  }

  95% {
    opacity: 0.95;
  }

  97% {
    opacity: 0.93;
  }

  to {
    opacity: 1;
  }
}

@keyframes animate1 {
  0% {
    left: -100%;
  }
  50%,
  100% {
    left: 100%;
  }
}

@keyframes animate2 {
  0% {
    top: -100%;
  }
  50%,
  100% {
    top: 100%;
  }
}

@keyframes animate3 {
  0% {
    right: -100%;
  }
  50%,
  100% {
    right: 100%;
  }
}

@keyframes animate4 {
  0% {
    bottom: -100%;
  }
  50%,
  100% {
    bottom: 100%;
  }
}

.flicker {
  animation: shine 2s forwards, blink 3s 2s infinite;
}

.fast-flicker {
  animation: shine 2s forwards, blink 10s 1s infinite;
}

/* COntainer CSS */

h1 {
  letter-spacing: 0.5rem;
  color: #ffe6ff;
  text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #dd07bf,
    -0.2rem 0.1rem 1rem #dd07bf, 0.2rem 0.1rem 1rem #dd07bf,
    0 -0.5rem 2rem #841174, 0 0.5rem 3rem #841174;
  animation: shine 2s forwards, flicker 3s infinite;
}

a {
  letter-spacing: 0.2rem;
  font-weight: 400;
  border-radius: 10px;
  font-size: 22px;
  cursor: pointer;
  transition: 0.5s;
}

a span {
  position: absolute;
  display: block;
}

#enigme {
  color: #ff86ff;
}

#enigme:hover {
  background: #ff86ff;
  color: #000000;
  box-shadow: 0 0 5px #ff86ff, 0 0 25px #ff86ff, 0 0 50px #ff86ff,
    0 0 100px #ff86ff;
  -webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
}

/* #enigme span:nth-child(1) {
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ff86ff);
  animation: animate1 1s linear infinite;
} */




#multi {
  color: #56fcfc;
}

#multi:hover {
  background: #56fcfc;
  color: #000000 !important;
  box-shadow: 0 0 5px #56fcfc, 0 0 25px #56fcfc, 0 0 50px #56fcfc,
    0 0 100px #56fcfc;
  -webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
}