/* Imposta lo sfondo della pagina a nero */
body, html {
  height: 100%;                  /* Occupa tutta la pagina */
  margin: 0;                     /* Rimuovi i margini */
  display: flex;                 /* Usa flexbox per centrare */
  justify-content: center;       /* Centra orizzontalmente */
  align-items: center;           /* Centra verticalmente */
  background-color: black;       /* Colore di sfondo per la pagina */
}

/* Stili per l'orologio */
.clock {
  position: relative;
  width: 600px;                 /* Larghezza dell'orologio */
  height: 600px;                /* Altezza dell'orologio */
  border-radius: 50%;           /* Rendi l'orologio rotondo */
  border: 5px solid black;      /* Bordo dell'orologio */
  background: url('quadrante.png') no-repeat center center;
  background-size: cover;       /* L'immagine di sfondo si adatta al quadrante */
  display: flex;
  justify-content: center;      /* Centra le lancette dentro l'orologio */
  align-items: center;          /* Centra le lancette dentro l'orologio */
}

/* Lancetta che si muove in base alla fase lunare */
/* Lancetta che si muove in base alla fase lunare */
.phase-hand {
  width: 40%;                    /* Lunghezza della lancetta */
  height: 4px;                   /* Spessore della lancetta */
  background-color: #fff;        /* Colore della lancetta */
  position: absolute;
  top: 50%;                      /* Posiziona al centro verticale */
  left: 50%;                     /* Posiziona al centro orizzontale */
  transform-origin: 0% 50%;      /* Origine della rotazione all'estremità sinistra */
  transition: transform 3.5s ease-in-out; /* Animazione fluida */
}


/* Centro dell'orologio (piccolo cerchio al centro) */
.clock::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background-color: black;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}