body {
  font-family: "Poppins", sans-serif;
  background: linear-gradient(180deg, #000000 0%, #121212 100%);
  overflow-x: hidden;
  zoom: 86%;
  scrollbar-width: thin;
  scrollbar-color: #ef4444 #1f2937;
}

body::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

body::-webkit-scrollbar-track {
  background: #1f2937;
  border-radius: 10px;
}

body::-webkit-scrollbar-thumb {
  background-color: #ef4444;
  border-radius: 10px;
  border: 2px solid #1f2937;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

.floating {
  animation: float 6s ease-in-out infinite;
  will-change: transform;
}

.floating-delay-1 {
  animation-delay: 0s;
}

.floating-delay-2 {
  animation-delay: 2s;
}

.floating-delay-3 {
  animation-delay: 4s;
}

.floating-delay-4 {
  animation-delay: 1s;
}

.floating-delay-5 {
  animation-delay: 3s;
}

#loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  width: 0%;
  background: linear-gradient(90deg, #ef4444, #f87171, #fca5a5, #fecaca, #fee2e2);
  box-shadow: 0 0 10px #f87171, 0 0 20px #fca5a5;
  z-index: 9999;
  transition: width 0.3s ease;
}

.progress-bar-container {
  background-color: #1f2937;
  border-radius: 9999px;
  overflow: hidden;
  height: 22px;
  width: 100%;
  box-shadow: inset 0 0 5px #000000aa;
  position: relative;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #ef4444, #f87171);
  width: 0%;
  transition: width 1.5s ease-in-out;
  box-shadow: 0 0 8px #f87171;
  border-radius: 9999px 0 0 9999px;
  position: relative;
  z-index: 1;
}

.progress-text {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  font-weight: 600;
  font-size: 0.875rem;
  z-index: 2;
  user-select: none;
  pointer-events: none;
  text-shadow: 0 0 4px #b91c1c;
}

nav a {
  font-size: 0.875rem;
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

nav a:hover,
nav a:focus-visible {
  background-color: rgba(255 255 255 / 0.2);
  outline: none;
  box-shadow: 0 0 12px #ef4444;
}

@media (max-width: 640px) {
  nav {
    width: 95vw !important;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  main h1 {
    font-size: 2.25rem !important;
  }
  main p {
    font-size: 1rem !important;
  }
}