/*
// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 400

.playwrite-us-modern-<uniquifier> {
  font-family: "Playwrite US Modern", cursive;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
*/

/* text section start */
.parent-text-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Full viewport height */
}

.secondary-text-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem;
}

.header-text,
.paragraph-text {
    font-family: "Playwrite US Modern", cursive;
    color: #ebebeb;

    animation: fadeIn 6s ease-out;
}

/* Keyframes for the fade-in animation */
@keyframes fadeIn {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}


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

/* audio section start */
#audioPlayer {
  display: none; /* Hides the player completely */
}
/* audio section end */

/* background section start */
.background {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: #141414;
  overflow: hidden;
}

.background span {
  width: 17vmin;
  height: 17vmin;
  border-radius: 17vmin;
  backface-visibility: hidden;
  position: absolute;
  animation: move;
  animation-duration: 42;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}


.background span:nth-child(0) {
  color: #bdbdbd;
  top: 84%;
  left: 62%;
  animation-duration: 27s;
  animation-delay: -7s;
  transform-origin: -3vw -6vh;
  box-shadow: -34vmin 0 4.565460394655394vmin currentColor;
}
.background span:nth-child(1) {
  color: #c4c4c4;
  top: 35%;
  left: 2%;
  animation-duration: 18s;
  animation-delay: -71s;
  transform-origin: 7vw -24vh;
  box-shadow: 34vmin 0 5.116994320334986vmin currentColor;
}
.background span:nth-child(2) {
  color: #616161;
  top: 59%;
  left: 20%;
  animation-duration: 78s;
  animation-delay: -31s;
  transform-origin: 22vw -13vh;
  box-shadow: 34vmin 0 4.316376778395943vmin currentColor;
}
.background span:nth-child(3) {
  color: #bdbdbd;
  top: 18%;
  left: 47%;
  animation-duration: 21s;
  animation-delay: -63s;
  transform-origin: -23vw -12vh;
  box-shadow: 34vmin 0 4.941748734979043vmin currentColor;
}
.background span:nth-child(4) {
  color: #bdbdbd;
  top: 88%;
  left: 45%;
  animation-duration: 23s;
  animation-delay: -17s;
  transform-origin: -15vw -10vh;
  box-shadow: 34vmin 0 4.5848221934316395vmin currentColor;
}
.background span:nth-child(5) {
  color: #616161;
  top: 47%;
  left: 4%;
  animation-duration: 10s;
  animation-delay: -55s;
  transform-origin: 2vw 2vh;
  box-shadow: 34vmin 0 4.6992950962204vmin currentColor;
}
.background span:nth-child(6) {
  color: #bdbdbd;
  top: 89%;
  left: 68%;
  animation-duration: 6s;
  animation-delay: -56s;
  transform-origin: -2vw -16vh;
  box-shadow: -34vmin 0 5.2116026483449325vmin currentColor;
}
.background span:nth-child(7) {
  color: #616161;
  top: 79%;
  left: 82%;
  animation-duration: 70s;
  animation-delay: -16s;
  transform-origin: 3vw -7vh;
  box-shadow: -34vmin 0 5.074588050106929vmin currentColor;
}
.background span:nth-child(8) {
  color: #616161;
  top: 57%;
  left: 73%;
  animation-duration: 60s;
  animation-delay: -58s;
  transform-origin: 15vw 1vh;
  box-shadow: -34vmin 0 4.5567083390223235vmin currentColor;
}
.background span:nth-child(9) {
  color: #616161;
  top: 69%;
  left: 29%;
  animation-duration: 7s;
  animation-delay: -66s;
  transform-origin: 23vw -6vh;
  box-shadow: 34vmin 0 4.465692951854319vmin currentColor;
}
.background span:nth-child(10) {
  color: #c4c4c4;
  top: 59%;
  left: 52%;
  animation-duration: 81s;
  animation-delay: -6s;
  transform-origin: 23vw 3vh;
  box-shadow: -34vmin 0 4.841781128428327vmin currentColor;
}
.background span:nth-child(11) {
  color: #c4c4c4;
  top: 30%;
  left: 86%;
  animation-duration: 79s;
  animation-delay: -55s;
  transform-origin: -1vw 6vh;
  box-shadow: -34vmin 0 4.88426342690617vmin currentColor;
}
.background span:nth-child(12) {
  color: #bdbdbd;
  top: 50%;
  left: 29%;
  animation-duration: 66s;
  animation-delay: -77s;
  transform-origin: 10vw -18vh;
  box-shadow: 34vmin 0 5.124916709139127vmin currentColor;
}
.background span:nth-child(13) {
  color: #bdbdbd;
  top: 73%;
  left: 88%;
  animation-duration: 85s;
  animation-delay: -9s;
  transform-origin: -20vw 18vh;
  box-shadow: 34vmin 0 5.211184886598959vmin currentColor;
}
.background span:nth-child(14) {
  color: #c4c4c4;
  top: 26%;
  left: 45%;
  animation-duration: 74s;
  animation-delay: -16s;
  transform-origin: -4vw 24vh;
  box-shadow: -34vmin 0 4.851768736821743vmin currentColor;
}
.background span:nth-child(15) {
  color: #c4c4c4;
  top: 58%;
  left: 99%;
  animation-duration: 73s;
  animation-delay: -14s;
  transform-origin: -23vw -5vh;
  box-shadow: -34vmin 0 5.1631526386710025vmin currentColor;
}
.background span:nth-child(16) {
  color: #bdbdbd;
  top: 60%;
  left: 22%;
  animation-duration: 73s;
  animation-delay: -56s;
  transform-origin: 13vw 17vh;
  box-shadow: -34vmin 0 4.453798787887524vmin currentColor;
}
.background span:nth-child(17) {
  color: #bdbdbd;
  top: 53%;
  left: 47%;
  animation-duration: 53s;
  animation-delay: -20s;
  transform-origin: 20vw 24vh;
  box-shadow: -34vmin 0 4.568100125918162vmin currentColor;
}
.background span:nth-child(18) {
  color: #bdbdbd;
  top: 80%;
  left: 28%;
  animation-duration: 22s;
  animation-delay: -45s;
  transform-origin: -12vw 24vh;
  box-shadow: -34vmin 0 4.952432332187621vmin currentColor;
}
.background span:nth-child(19) {
  color: #c4c4c4;
  top: 62%;
  left: 76%;
  animation-duration: 39s;
  animation-delay: -4s;
  transform-origin: -5vw -15vh;
  box-shadow: -34vmin 0 4.513754614493646vmin currentColor;
}
/* background section end */