/* ===== RESET BASICO ===== */

body{
  margin:0;
  padding:0;
  height:100vh;
  overflow:hidden;
  font-family:sans-serif;
}

/*overlay oscuro sobre el video para que el reloj resalte mas*/
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.35);
  z-index:0;
}

/* ===== VIDEO DE FONDO ===== */

#weatherVideo{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-1;
}

/* ===== CONTENEDOR PRINCIPAL ===== */

.container{
  position:relative;
  z-index:2;

  height:100vh;
  width:100%;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  text-align:center;
}

/* ===== RELOJ ===== */

.clock-led{
  font-size:4rem;
  color:#00ff9c;
  background:#000;
  display:inline-block;
  padding:20px 40px;
  border-radius:10px;
  letter-spacing:4px;

  animation:glowPulse 2s infinite alternate;

  box-shadow:
  0 0 10px #00ff9c,
  0 0 20px #00ff9c,
  0 0 40px rgba(0,255,156,0.6);
}

.date-led{
  margin-top:12px;
  font-size:1.4rem;
  color:#00ff9c;
  background:#000;
  display:inline-block;
  padding:10px 20px;
  border-radius:8px;
  letter-spacing:2px;

  box-shadow:0 0 10px rgba(0,255,156,0.6);
}

/* ===== ANIMACION GLOW ===== */

@keyframes glowPulse{

  from{
    box-shadow:
    0 0 10px #00ff9c,
    0 0 20px #00ff9c,
    0 0 40px rgba(0,255,156,0.6);
  }

  to{
    box-shadow:
    0 0 20px #00ff9c,
    0 0 40px #00ff9c,
    0 0 80px rgba(0,255,156,0.8);
  }

}