* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Bitcount Prop Single", sans-serif;
  height: 100vh;
  overflow: hidden;
  position: relative;
  background: #0a0a0a;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.background-animation {
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200vmax;
  height: 200vmax;
  background: linear-gradient(
    45deg,
    #1a1a2e,
    #16213e,
    #0f3460,
    #533483,
    #7209b7
  );
  transform-origin: center center;
  animation: gradientShift 45s ease-in-out infinite,
    rotate360 60s linear infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes rotate360 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  position: relative;
  z-index: 1;
}

.main-text {
  font-size: clamp(8rem, 20vw, 20rem);
  font-weight: 100;
  color: rgba(255, 255, 255, 0.1);
  user-select: none;
}