body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: #0F0F0F; 
  color: #fff;
  font-family: 'Be Vietnam Pro', sans-serif;
}

#loader {
  position: fixed; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #111111; 
  z-index: 9999;
  transition: opacity 0.5s ease-out; 
}

#loader div {
  background-color: rgba(201, 49, 49, 0.5); 
  height: 20px; 
  width: 20px; 
  border-radius: 1px;
  margin: 0 4px; 
  transition: transform 0.2s ease, background-color 0.2s ease;
}

@keyframes loaderAnimation {
  0%, 100% {
    transform: scale(1); 
    background-color: rgba(201, 49, 49, 0.5);
  }
  50% {
    transform: scale(1.1); 
    background-color: #C93131; 
  }
}

#loader .rect1 {
  animation: loaderAnimation 1.2s infinite 0s; 
}
#loader .rect2 {
  animation: loaderAnimation 1.2s infinite 0.2s;
}
#loader .rect3 {
  animation: loaderAnimation 1.2s infinite 0.4s; 
}
#loader .rect4 {
  animation: loaderAnimation 1.2s infinite 0.6s; 
}
#loader .rect5 {
  animation: loaderAnimation 1.2s infinite 0.8s; 
}

#content {
  display: none;
}

.fade-out {
  opacity: 0; 
  pointer-events: none; 
}

#random-text {
  position: fixed;
  bottom: 39%; 
  transform: translateX(-50%); 
  width: auto; 
  text-align: center; 
  color: #d6d2d2;
  font-size: 16px;
  font-weight: bold; 
  opacity: 0; 
  animation: fadeInSlideUp 1s forwards; 
}

@keyframes fadeInSlideUp {
  0% {
    opacity: 0; 
    transform: translateY(10px); 
  }
  100% {
    opacity: 1; 
    transform: translateY(0); 
  }
}