@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');

:root {
  --color-primary: #a21caf;
  --color-secondary: #6d28d9;
  --color-tertiary: #2563eb;
}

html,
body {
  overflow-x: hidden;
}

* {
  font-family: 'Inter', sans-serif !important;
}

[v-cloak] {
  display: none;
}

.z-negative {
  z-index: -1;
}

.fancy-font {
  font-family: 'Satisfy', 'Inter', sans-serif !important;
}

.white-text-glow {
  text-shadow: 0 0 8px #ffffff;
}

.violet-text-glow {
  text-shadow: 0 0 10px #51028d;
}

.glow-box {
  box-shadow: 0 0 15px #0ea5e9, 0 0 10px #0ea5e9 !important;
  border-radius: 80px;
  border: 2px solid #0ea5e9;
}

.skewed-bg {
  position: absolute;
  width: 100%;
  height: 60%;
  transform: skewX(-20deg);
  rotate: -5deg;
  z-index: 0;
}

/* Background */

@keyframes move {
  100% {
    transform: translate3d(0, 0, 1px) rotate(360deg);
  }
}

.background {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: -1;
}

.background span {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  backface-visibility: hidden;
  position: absolute;
  animation: move;
  animation-duration: 25s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.background span:nth-child(0) {
  color: var(--color-tertiary);
  top: 18%;
  left: 98%;
  animation-duration: 25s;
  animation-delay: -59s;
  transform-origin: -11vw 10vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
}
.background span:nth-child(1) {
  color: var(--color-secondary);
  top: 76%;
  left: 58%;
  animation-duration: 25s;
  animation-delay: -112s;
  transform-origin: 25vw 23vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
  border-style: dashed;
}
.background span:nth-child(2) {
  color: var(--color-secondary);
  top: 78%;
  left: 76%;
  animation-duration: 25s;
  animation-delay: -165s;
  transform-origin: -1vw -21vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
  border-style: dashed;
}
.background span:nth-child(3) {
  color: var(--color-tertiary);
  top: 80%;
  left: 7%;
  animation-duration: 25s;
  animation-delay: -24s;
  transform-origin: -22vw 12vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
}
.background span:nth-child(4) {
  color: var(--color-primary);
  top: 48%;
  left: 49%;
  animation-duration: 25s;
  animation-delay: -15s;
  transform-origin: -18vw 12vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
}
.background span:nth-child(5) {
  color: var(--color-secondary);
  top: 69%;
  left: 30%;
  animation-duration: 25s;
  animation-delay: -58s;
  transform-origin: -15vw -24vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
  border-style: dashed;
}
.background span:nth-child(6) {
  color: var(--color-tertiary);
  top: 9%;
  left: 94%;
  animation-duration: 25s;
  animation-delay: -8s;
  transform-origin: -11vw -12vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
}
.background span:nth-child(7) {
  color: var(--color-primary);
  top: 67%;
  left: 47%;
  animation-duration: 25s;
  animation-delay: -169s;
  transform-origin: 15vw -14vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
}
.background span:nth-child(8) {
  color: var(--color-tertiary);
  top: 39%;
  left: 81%;
  animation-duration: 25s;
  animation-delay: -67s;
  transform-origin: -8vw -6vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
}
.background span:nth-child(9) {
  color: var(--color-tertiary);
  top: 62%;
  left: 48%;
  animation-duration: 25s;
  animation-delay: -1s;
  transform-origin: 20vw 10vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
}
.background span:nth-child(10) {
  color: var(--color-secondary);
  top: 48%;
  left: 68%;
  animation-duration: 25s;
  animation-delay: -58s;
  transform-origin: 11vw -21vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
  border-style: dashed;
}
.background span:nth-child(11) {
  color: var(--color-tertiary);
  top: 66%;
  left: 39%;
  animation-duration: 25s;
  animation-delay: -6s;
  transform-origin: -2vw 20vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
}
.background span:nth-child(12) {
  color: var(--color-secondary);
  top: 9%;
  left: 61%;
  animation-duration: 25s;
  animation-delay: -83s;
  transform-origin: -13vw 11vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
  border-style: dashed;
}
.background span:nth-child(13) {
  color: var(--color-tertiary);
  top: 100%;
  left: 6%;
  animation-duration: 25s;
  animation-delay: -92s;
  transform-origin: -4vw -20vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
}
.background span:nth-child(14) {
  color: var(--color-primary);
  top: 46%;
  left: 42%;
  animation-duration: 25s;
  animation-delay: -3s;
  transform-origin: 15vw 4vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
}
.background span:nth-child(15) {
  color: var(--color-tertiary);
  top: 63%;
  left: 80%;
  animation-duration: 25s;
  animation-delay: -90s;
  transform-origin: -22vw -14vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
}
.background span:nth-child(16) {
  color: var(--color-primary);
  top: 99%;
  left: 3%;
  animation-duration: 25s;
  animation-delay: -80s;
  transform-origin: -11vw -11vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
}
.background span:nth-child(17) {
  color: var(--color-secondary);
  top: 25%;
  left: 94%;
  animation-duration: 25s;
  animation-delay: -174s;
  transform-origin: -21vw 13vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
  border-style: dashed;
}
.background span:nth-child(18) {
  color: var(--color-secondary);
  top: 59%;
  left: 11%;
  animation-duration: 25s;
  animation-delay: -14s;
  transform-origin: -9vw -4vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
  border-style: dashed;
}
.background span:nth-child(19) {
  color: var(--color-tertiary);
  top: 62%;
  left: 17%;
  animation-duration: 25s;
  animation-delay: -7s;
  transform-origin: 6vw 15vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
}
.background span:nth-child(20) {
  color: var(--color-tertiary);
  top: 59%;
  left: 93%;
  animation-duration: 25s;
  animation-delay: -128s;
  transform-origin: 8vw -12vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
}
.background span:nth-child(21) {
  color: var(--color-primary);
  top: 93%;
  left: 33%;
  animation-duration: 25s;
  animation-delay: -159s;
  transform-origin: 4vw 22vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
}
.background span:nth-child(22) {
  color: var(--color-primary);
  top: 7%;
  left: 92%;
  animation-duration: 25s;
  animation-delay: -166s;
  transform-origin: -9vw 11vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
}
.background span:nth-child(23) {
  color: var(--color-tertiary);
  top: 26%;
  left: 81%;
  animation-duration: 25s;
  animation-delay: -132s;
  transform-origin: -16vw 10vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
}
.background span:nth-child(24) {
  color: var(--color-secondary);
  top: 11%;
  left: 69%;
  animation-duration: 25s;
  animation-delay: -9s;
  transform-origin: -20vw 7vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
  border-style: dashed;
}
.background span:nth-child(25) {
  color: var(--color-tertiary);
  top: 15%;
  left: 38%;
  animation-duration: 25s;
  animation-delay: -123s;
  transform-origin: 0vw 9vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
}
.background span:nth-child(26) {
  color: var(--color-secondary);
  top: 58%;
  left: 1%;
  animation-duration: 25s;
  animation-delay: -62s;
  transform-origin: -10vw -1vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
  border-style: dashed;
}
.background span:nth-child(27) {
  color: var(--color-primary);
  top: 89%;
  left: 35%;
  animation-duration: 25s;
  animation-delay: -43s;
  transform-origin: -3vw 10vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
}
.background span:nth-child(28) {
  color: var(--color-tertiary);
  top: 9%;
  left: 84%;
  animation-duration: 25s;
  animation-delay: -83s;
  transform-origin: 9vw 19vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
}
.background span:nth-child(29) {
  color: var(--color-secondary);
  top: 45%;
  left: 9%;
  animation-duration: 25s;
  animation-delay: -107s;
  transform-origin: 6vw -4vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
  border-style: dashed;
}
.background span:nth-child(30) {
  color: var(--color-secondary);
  top: 35%;
  left: 9%;
  animation-duration: 25s;
  animation-delay: -17s;
  transform-origin: -2vw -6vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
  border-style: dashed;
}
.background span:nth-child(31) {
  color: var(--color-tertiary);
  top: 99%;
  left: 34%;
  animation-duration: 25s;
  animation-delay: -16s;
  transform-origin: 24vw -23vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
}
.background span:nth-child(32) {
  color: var(--color-secondary);
  top: 75%;
  left: 63%;
  animation-duration: 25s;
  animation-delay: -164s;
  transform-origin: 14vw -21vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
  border-style: dashed;
}
.background span:nth-child(33) {
  color: var(--color-secondary);
  top: 22%;
  left: 15%;
  animation-duration: 25s;
  animation-delay: -124s;
  transform-origin: 10vw -4vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
  border-style: dashed;
}
.background span:nth-child(34) {
  color: var(--color-primary);
  top: 90%;
  left: 99%;
  animation-duration: 25s;
  animation-delay: -105s;
  transform-origin: 6vw -22vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
}
.background span:nth-child(35) {
  color: var(--color-tertiary);
  top: 18%;
  left: 79%;
  animation-duration: 25s;
  animation-delay: -172s;
  transform-origin: 23vw 25vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
}
.background span:nth-child(36) {
  color: var(--color-primary);
  top: 86%;
  left: 88%;
  animation-duration: 25s;
  animation-delay: -168s;
  transform-origin: -13vw 21vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
}
.background span:nth-child(37) {
  color: var(--color-primary);
  top: 71%;
  left: 89%;
  animation-duration: 25s;
  animation-delay: -33s;
  transform-origin: 0vw 12vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
}
.background span:nth-child(38) {
  color: var(--color-primary);
  top: 7%;
  left: 7%;
  animation-duration: 25s;
  animation-delay: -152s;
  transform-origin: 5vw -17vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
}
.background span:nth-child(39) {
  color: var(--color-tertiary);
  top: 45%;
  left: 71%;
  animation-duration: 25s;
  animation-delay: -130s;
  transform-origin: -18vw -20vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
}
.background span:nth-child(40) {
  color: var(--color-primary);
  top: 67%;
  left: 36%;
  animation-duration: 25s;
  animation-delay: -36s;
  transform-origin: 9vw -7vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
}
.background span:nth-child(41) {
  color: var(--color-primary);
  top: 88%;
  left: 71%;
  animation-duration: 25s;
  animation-delay: -67s;
  transform-origin: 16vw -21vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
}
.background span:nth-child(42) {
  color: var(--color-secondary);
  top: 48%;
  left: 35%;
  animation-duration: 25s;
  animation-delay: -12s;
  transform-origin: 25vw 21vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
  border-style: dashed;
}
.background span:nth-child(43) {
  color: var(--color-primary);
  top: 4%;
  left: 36%;
  animation-duration: 25s;
  animation-delay: -28s;
  transform-origin: 19vw 10vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
}
.background span:nth-child(44) {
  color: var(--color-secondary);
  top: 85%;
  left: 40%;
  animation-duration: 25s;
  animation-delay: -23s;
  transform-origin: 22vw -9vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
  border-style: dashed;
}
.background span:nth-child(45) {
  color: var(--color-tertiary);
  top: 71%;
  left: 25%;
  animation-duration: 25s;
  animation-delay: -141s;
  transform-origin: -17vw 21vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
}
.background span:nth-child(46) {
  color: var(--color-secondary);
  top: 10%;
  left: 20%;
  animation-duration: 25s;
  animation-delay: -143s;
  transform-origin: -5vw 7vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
  border-style: dashed;
}
.background span:nth-child(47) {
  color: var(--color-secondary);
  top: 21%;
  left: 3%;
  animation-duration: 25s;
  animation-delay: -48s;
  transform-origin: -23vw 7vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
  border-style: dashed;
}
.background span:nth-child(48) {
  color: var(--color-secondary);
  top: 81%;
  left: 22%;
  animation-duration: 25s;
  animation-delay: -78s;
  transform-origin: 24vw 5vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
  border-style: dashed;
}
.background span:nth-child(49) {
  color: var(--color-tertiary);
  top: 29%;
  left: 56%;
  animation-duration: 25s;
  animation-delay: -103s;
  transform-origin: -4vw -22vh;
  border: solid currentColor 1px;
  background: currentColor;
  opacity: 0.4;
  filter: blur(8px);
}