@charset "UTF-8";
/* CSS Document */
/*
  1. Utilizza box-sizing: border-box in modo globale per un layout più semplice.
  2. Rimuovi i margini e il padding predefiniti da tutti gli elementi.
*/
*,
*::before,
*::after {
  box-sizing: border-box; /* [1] */
  margin: 0;             /* [2] */
  padding: 0;            /* [2] */
}

/*
  3. Rimuovi lo stile elenco (punti) predefinito da ul, ol.
*/
ul,
ol {
  list-style: none;
}

/*
  4. Imposta le dimensioni dei media (immagini, video) in modo che siano reattive per impostazione predefinita.
*/
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto; /* Mantieni le proporzioni */
}

/*
  5. Rimuovi margini e padding predefiniti dal body.
  6. Migliora il rendering del testo con l'anti-aliasing.
  7. Assicurati che il body abbia un'altezza minima per layout a pagina intera.
*/
body {
  min-height: 100vh; /* [7] Altezza minima per la pagina intera */
  text-rendering: optimizeSpeed; /* [6] Migliora le prestazioni di rendering del testo */
  line-height: 1.5; /* Line-height di base per una migliore leggibilità */
}

/*
  8. Rimuovi le animazioni/transizioni per gli utenti che le hanno disabilitate tramite le impostazioni del sistema operativo.
*/
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/*
  9. Assicurati che i form field ereditino lo stile del font.
*/
input,
button,
textarea,
select {
  font: inherit;
}

/*
  10. Impedisci che il testo troncato dai tag h1-h6, p, figure, blockquote causi overflow.
*/
p,
h1,
h2,
h3,
h4,
h5,
h6,
blockquote {
  overflow-wrap: break-word;
}