html{
  height: 100%;
}

body{
  margin:0;
  padding:0;
  background-color: rgb(0, 0, 0);
  background-repeat: no-repeat;
  display: flex;
  background-size: cover;
  align-content: center;
  justify-items: center;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  position: fixed;
  overflow: hidden;
}

#loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  flex-direction: column;
}

.loader-content {
  text-align: center;
  color: white;
  font-family: Arial, sans-serif;
}

.loader-title {
  font-size: 2rem;
  margin-bottom: 20px;
}

.progress-bar {
  width: 300px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  overflow: hidden;
  margin: 0 auto;
  margin-bottom: 10px;
}

.progress {
  height: 100%;
  width: 0%;
  background: #00ffff;
  animation: loadProgress 3s linear forwards;
}

.loader-hint {
  font-size: 0.9rem;
  color: #ccc;
}

@keyframes loadProgress {
  0%   { width: 0%; }
  100% { width: 100%; }
}

#loader {
  animation: hideLoader 5s forwards;
}

@keyframes hideLoader {
  0% { opacity: 1; visibility: visible; }
  90% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}