body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}

.header h1 {
  font-size: 2em;
  margin-bottom: 10px;
}

.main {
  padding: 40px;
  text-align: center;
}

.footer {
  background-color: #f1f1f1;
  padding: 10px;
  text-align: center;
}

.container {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.bit, .bitcraft {
  position: absolute;
  font-size: 2rem;
  color: #D3D3D3;
  opacity: 0;
  animation: floatBits 10s linear infinite;
}

/* Generate multiple floating bits at random positions and timings */
.bit:nth-child(1) { animation-delay: 0s; top: 10%; left: 15%; }
.bit:nth-child(2) { animation-delay: 1s; top: 20%; left: 40%; }
.bit:nth-child(3) { animation-delay: 2s; top: 30%; left: 70%; }
.bit:nth-child(4) { animation-delay: 3s; top: 40%; left: 50%; }
.bit:nth-child(5) { animation-delay: 4s; top: 50%; left: 20%; }
.bit:nth-child(6) { animation-delay: 5s; top: 60%; left: 80%; }
.bit:nth-child(7) { animation-delay: 6s; top: 70%; left: 30%; }
.bit:nth-child(8) { animation-delay: 7s; top: 80%; left: 60%; }
.bit:nth-child(9) { animation-delay: 8s; top: 90%; left: 45%; }
.bit:nth-child(10) { animation-delay: 9s; top: 15%; left: 25%; }
.bit:nth-child(11) { animation-delay: 2.5s; top: 5%; left: 65%; }
.bit:nth-child(12) { animation-delay: 6.5s; top: 35%; left: 35%; }

@keyframes floatBits {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    transform: translateY(-200px);
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.bitcraft {
  font-size: 3rem;
  font-weight: bold;
  color: #D3D3D3;
  animation-delay: 0s;
  animation: randomBitcraftMovement 8s ease-in-out infinite;
}

/* Random movement for Bitcraft */
@keyframes randomBitcraftMovement {
  0% {
    top: 50%;
    left: 50%;
    opacity: 0;
    transform: translate(-50%, -50%);
  }
  10% {
    opacity: 1;
  }
  20% {
    top: 20%;
    left: 40%;
    transform: translate(-50%, -50%);
  }
  40% {
    top: 30%;
    left: 80%;
    transform: translate(-50%, -50%);
  }
  60% {
    top: 70%;
    left: 60%;
    transform: translate(-50%, -50%);
  }
  80% {
    top: 40%;
    left: 20%;
    transform: translate(-50%, -50%);
  }
  100% {
    top: 50%;
    left: 50%;
    opacity: 0;
    transform: translate(-50%, -50%);
  }
}