/* Add animation to the h1 tag */
h1 {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 5rem;
  text-shadow: 0 5px 20px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.5), 0 0 70px rgba(255, 255, 255, 0.5), 0 0 120px rgba(255, 255, 255, 0.5), 0 0 100px rgba(255, 255, 255, 0.5);
  animation: rainbow 18s ease-in-out infinite;
  transition: color 1s;
  width: max-content;
  height: max-content;
  font-family: "Poppins", sans-serif;
  font-weight: 666;
  letter-spacing: 0.1rem;
  text-transform: lowercase;
  text-align: center;
}

h2 {
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 1.1rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  width: max-content;
  height: max-content;
  font-family: 'Wix Madefor Text', sans-serif;
  font-weight: 666;
  letter-spacing: 0.1rem;
  text-transform: lowercase;
  text-align: center;
  opacity: 0.5;
}



.mobileBackground {
  position: fixed;
  top: 0;
  left: 0;
  width: 1000vw;
  height: 1000vh;
  z-index: -3;
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

#videoContainer {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  overflow: hidden;
}

#myVideo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
#videoOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Adjust the overlay color and opacity */
  z-index: 1;
}







/* Define the rainbow animation */
@keyframes rainbow {
  0% {
    color: rgb(255, 0, 72);
  }
  16.67% {
    color: rgb(255, 0, 187);
  }
  33.33% {
    color: rgb(144, 0, 255);
  }
  50% {
    color: rgb(0, 251, 192);
  }
  66.67% {
    color: rgb(146, 60, 232);
  }
  83.33% {
    color: violet;
  }
  100% {
    color: red;
  }
}


/* Define the rainbow animation */
@keyframes rainbow2 {
  0% {
    color: rgb(255, 166, 0);
  }
  16.67% {
    color: rgb(159, 206, 83);
  }
  33.33% {
    color: rgb(51, 164, 13);
  }
  50% {
    color: rgb(0, 213, 255);
  }
  66.67% {
    color: rgb(72, 0, 255);
  }
  83.33% {
    color: rgb(255, 0, 170);
  }
  100% {
    color: rgb(251, 0, 0);
  }
}

.social-icons {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
}

.social-icons a {
  margin-left: 10px;
  color: white;
  font-size: 2rem;
}