/* Global Styles */
:root {
  /* Define the gradient rotation start */
  --grad-from: 180deg;
  
  /* Define all the angle stops as variables */
  --stop-1: 0deg;
  --stop-2: 75.26deg;
  --stop-3: 83.85deg;
  --stop-4: 92.40deg;
  --stop-5: 99.44deg;
  --stop-6: 180deg;
  --stop-7: 266.90deg;
  --stop-8: 273.94deg;
  --stop-9: 282.50deg;
  --stop-10: 291.07deg;
  --stop-11: 360deg;
}

body {
/*height: 100vh;																									*/
  
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: black;
  color: white;
  font-family: Arial, sans-serif;
  text-align: center;
}

background-image: url('../img/twilightzone_mmm@2x.png');
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  background-image: url('../img/twilightzone_mmm@2x.png');
}

/* Responsive Adjustments for Smaller Screens */
@media (max-width: 768px) {
  #timerstats {
    font-size: 14pt;
    line-height: 24px;
  }
}


/* Clock Styling */
.clock {
  position: relative;
  width: 640px;
  height: 640px;
  background-image: url('../img/timelapse2-min.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  transition: background 1.68s ease-in-out;
}

.day {
  background-image: url('../img/new_sunmask_640.png');
}

.night {
  background-image: url('../img/new_moonmask_640.png');
}

#clockgradient {
  background: conic-gradient(
    transparent 0.00deg, 
    transparent 87.99deg, 
    rgba(255, 255, 255, 0.4) 88.00deg, 
    rgba(255, 255, 0, 0.4) 95.00deg, 
    rgba(255, 165, 0, 0.4) 104.00deg, 
    rgba(255, 0, 0, 0.4) 112.00deg, 
    transparent 112.01deg, 
    transparent 180.00deg, 
    transparent 251.99deg,
    rgba(255, 0, 0, 0.4) 252.00deg, 
    rgba(255, 165, 0, 0.4) 265.00deg, 
    rgba(255, 255, 0, 0.4) 272.00deg, 
    rgba(255, 255, 255, 0.4) 277.00deg, 
    transparent 275.99deg,
    transparent 360.00deg
  );  
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: 15;
}

/* Clock Hands */
.moon-hand,
.newmoon-hand,
.second-hand,
.sunrise-hand,
.sunset-hand,
.civil-sunrise-hand,
.civil-sunset-hand,
.nautical-sunrise-hand,
.nautical-sunset-hand,
.astronomical-sunrise-hand,
.astronomical-sunset-hand {
  position: absolute;
  width: 50%; 
  height: 1px;
  left: 50%;
  transform-origin: left center;
  transition: transform 0.5s ease-out;
}

.moon-hand { background: #fffffe; top: 318px; }
.newmoon-hand { background: #ff00ff; top: 298px; }
.second-hand { background: #ffffaa; top: 318px; }
.sunrise-hand, .sunset-hand { background: #ff0000a0; top: 318px; }
.civil-sunrise-hand, .civil-sunset-hand { background: #FF9900c0; top: 318px; }
.nautical-sunrise-hand, .nautical-sunset-hand { background: #FFCC00a0; top: 318px; }
.astronomical-sunrise-hand, .astronomical-sunset-hand { background: #FFFF00a0; top: 318px; }

/* Ensure Clock Face and Numbers Exist */
#clock-face {
  position: relative;
  width: 100%;
  height: 100%;
}

#numbers {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* Debug & Info Text */
#moon-info {
   text-align: center;
  font-size: 1.2em;
  margin-top: 20px;
}

#astrostats,
#astrostats_civil,
#astrostats_nautical,
#astrostats_astronomical {
  top: 360px;
  left: 230px;
  width: 170px;
  color: #fffffe;    
  position: relative	;
  background-color: transparent;
  text-decoration: none;
  text-shadow: 1px 1px 1px #000077;
}

#timerstats,
#timer,
#timerdate {
  top: 150px;
  color: #ffffcc;    
  position: relative;
  font-size: 20pt;
  font-family: "Gadugi", Arial, sans-serif; 
  background-color: transparent;
  text-decoration: none;
  text-shadow: 2px 2px 2px #000077;
}
#timerstats{
top: 156px;
}

/* Div markers */
.marker,
.quarter-hour,
.half-hour,
.minutes {
  position: absolute;
  width: 1px;
  background: #fffffe80;
  transform-origin: 50% 140px;
  top: 178px;
}

.quarter-hour { height: 24px; background: #ff0000a0; }
.half-hour { height: 30px; }
.minutes { height: 30px; }

/* Number Positions */
.number {
  position: absolute;
  font-size: 18px;
  font-weight: bold;
  color: white;
  text-shadow: 2px 2px 2px #000;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
}

/* Number Positions */
.number_ampm {
  position: absolute;
  font-size: 18px;
  font-weight: bold;
  color: white;
  text-shadow: 2px 2px 2px #000;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
}

/* Vertical Line in Center */
.line-segment1 {
  position: absolute;
  width: 1px;
  height: 640px;
  background: #ffffff60;
  top: 0px;
  left: 320px;
}

/* Debug Elements */
#debug {
  position: relative;
  text-align: center;
  text-shadow: 2px 2px 2px #000000;
  top: 168px;
}

#debug1,
#debug2 {
  /* display: none;  */
  /* Hide these completely instead of using invisible text */
}

/* Text elements */
#sunrise-text,
#sunset-text,
#latitude-text,
#longitude-text {
  color: #fffffe;    
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-color: transparent;
  font: normal 16px "Gadugi", Arial, sans-serif;
  text-decoration: none;
  text-shadow: 2px 2px 2px #000000;
}

#sunrise-text { 
  top: 360px; 
}

#sunset-text { 
  top: 380px; 
}

#latitude-text { 
  top: 400px; 
}

#longitude-text { 
  top: 420px; 
}



#moonhand {
    position: absolute;
    width: 20px;
    height: 320px;
    left: 50%;   /* ✅ Center horizontally */
    top: 50%;    /* ✅ Adjust to clock center */
    transform-origin: 50% 85%;  /* ✅ Move pivot up slightly */
    transform: translate(-50%, -100%); /* ✅ Adjust position to align with clock */
}