* {
  box-sizing: border-box;  
  margin: 0;            
  padding: 0;             
}

body {
  min-height: 100vh;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background-image: url("images/bg.jpg");
  background-position: center;
  background-color: rgba(0, 0, 0, 0.80); 
  backdrop-filter: blur(0.85px);
  -webkit-backdrop-filter: blur(0.85px);
  color: #e5e7eb;    
  display: flex;
  flex-direction: column; 
  align-items: center;   
}

.top-image-wrapper {
  margin-top: 80px;   
  text-align: center;
}

.top-image {
  width: 100px;  
  height: auto; 
}
.top-image:hover {
  transform: scale(1.1);          
  transition: transform 0.5s ease;
  transform: rotate(360deg);
}
#countdown-text {
  text-align: center;     
  margin-top: 12px;      
  font-size: 18px;        
  letter-spacing: 2px;     
  text-transform: uppercase; 
}

main {
  width: 100%;           
  flex: 1;                
  display: flex;         
  flex-direction: column;
  align-items: center;   
}

#countdown-container {
  text-align: center; 
  margin-top: 40px; 
}

.counter {
  display: inline-block;
  width: 72px;          
  margin: 0 8px;       
  text-align: center;   
}

.number {
  font-size: 40px;          
  margin-bottom: 10px;      
  padding: 10px 0;     
  font-weight: 700;      
  border-radius: 10px;      
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.6);
}

.label {
  font-size: 12px;     
  color: #a1a1aa;  
  letter-spacing: 1px;
}

.counter:hover .number {
  transform: translateY(-2px);                 
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.8); 
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.footer {
  width: 100%;       
  text-align: center;  
  margin-bottom: 20px; 
  font-size: 14px;      
  color: #a1a1aa;    
}

.social-links {
  margin-bottom: 20px;  
}

.social-links a {
  text-decoration: none;
  margin: 0 12px;
}

.icon {
  width: 26px;                
  height: 26px;
  filter: invert(1) opacity(0.85);
}

.icon:hover {
  filter: invert(1) brightness(1.4);
  width: 30px;
  height: 30px;
  transition-duration: 0.15s;
}

.credit {
  font-size: 13px; 
  color: #a1a1aa;
  opacity: 0.9;  
  margin-bottom: 20px;
}

#snow-container {
  position: fixed;
  inset: 0;              /* top:0; right:0; bottom:0; left:0; same */
  pointer-events: none;  /* clicks neeche ke elements pe jayenge */
  overflow: hidden;      
  z-index: 10;         
}

/* individual snowflake */
.snowflake {
  position: absolute;
  top: -10px;           
  color: #ffffff;       
  opacity: 0.9;
  font-size: 12px;    
  animation-name: fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
  transform: translateZ(0); 
  pointer-events: none;
}

@keyframes fall {
  to {
    transform: translateY(110vh);  
  }
}

#timezone-text {
  margin-top: 4px;
  font-size: 12px;
  color: #a1a1aa;
}

#timezone-select {
  margin-left: 5px;
  padding: 0 2px;                 
  font-size: 12px;
  background-color: transparent; 
  color: #a1a1aa;                 
  border: none;
  border-bottom: 1px solid #3f3f46;
}

#timezone-select:hover,
#timezone-select:focus,
#timezone-select:active {
  border-bottom-color: #9ca3af9d;   
  background-color: #09090b;    
}


@keyframes padoruDance {
  0%, 100% { 
    transform: rotate(0deg) scale(1) translateY(0);
    filter: brightness(1) drop-shadow(0 0 5px rgba(255,255,255,0.3));
  }
  15% { 
    transform: rotate(-12deg) scale(1.15) translateY(-8px);
    filter: brightness(1.2) drop-shadow(0 0 12px rgba(255,255,255,0.5));
  }
  35% { 
    transform: rotate(15deg) scale(1.25) translateX(4px);
    filter: brightness(1.3) drop-shadow(0 4px 16px rgba(255,255,255,0.4));
  }
  55% { 
    transform: rotate(0deg) scale(1.35) translateY(-15px);
    filter: brightness(1.4) drop-shadow(0 -4px 20px rgba(255,255,255,0.6));
  }
  75% { 
    transform: rotate(-15deg) scale(1.2) translateX(-4px);
    filter: brightness(1.2) drop-shadow(0 0 16px rgba(255,255,255,0.5));
  }
}