@keyframes slowDrift {
  0% { background-position: center, 0px 0px, 0px 0px; }
  50% { background-position: center, 40px 80px, -20px 40px; }
  100% { background-position: center, 0px 0px, 0px 0px; }
}

.body {     
  margin: 0;     
  min-height: 100vh;
  position: relative;
  background-image: url(../images/back.jpg);     
  background-repeat: no-repeat; 
  background-size: cover;     
  background-position: center; 
  background-attachment: fixed;
}  

.body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  
  background-image: 
    radial-gradient(circle at 50% 40%, rgba(253, 250, 230, 0.15) 0%, rgba(38, 29, 20, 0.4) 60%, rgba(15, 10, 5, 0.85) 100%),
    radial-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 2px),
    radial-gradient(rgba(255, 235, 180, 0.15) 1px, transparent 2px);
    
  background-size: 100% 100%, 60px 60px, 90px 90px;
  background-position: center, 0 0, 30px 45px;
  animation: slowDrift 25s ease-in-out infinite;
  opacity: 0.95;
}


nav {     
  position: relative;
  z-index: 20; 
  background-color: rgba(38, 29, 20, 0.9); 
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px); 
  color: rgb(255, 255, 255);      
  padding: 15px 30px;                     
  display: flex;     
  justify-content: space-between;         
  align-items: center;    
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3); 
}  

.home {     
  font-family: "Unbounded", sans-serif;     
  font-size: 1.5rem; 
  font-optical-sizing: auto;     
  font-weight: 500;     
  font-style: normal;     
  margin: 0;                          
  cursor: pointer;
  transition: text-shadow 0.3s ease;
  list-style: none;    
  text-decoration: none;               
  color: rgba(255, 255, 255, 0.8); 
}

.home:hover {
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}

.nav-links {     
  display: flex;     
  list-style: none;                       
  margin: 0;     
  padding: 0;     
  gap: 30px;                          
}  

.nav-links a {     
  color: rgba(255, 255, 255, 0.8); 
  text-decoration: none;               
  font-family: 'Roboto Condensed', sans-serif;             
  font-size: 14px;     
  font-weight: 500;     
  letter-spacing: 0.5px; 
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.3s ease; 
  display: inline-block; 
}  

.nav-links a:hover {
  color: rgb(255, 255, 255); 
}

.nav-links li:nth-child(odd) a:hover {     
  transform: scale(1.1) rotate(5deg); 
}  

.nav-links li:nth-child(even) a:hover {     
  transform: scale(1.1) rotate(-5deg); 
}