/* 1. Reset globale: impedisce agli elementi di allargarsi oltre il dovuto */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 2. Blocca la larghezza dello schermo dello smartphone */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden; /* Elimina lo scrolling orizzontale */
  font-family: sans-serif;
  font-size: 16px; /* Dimensione ottimale per la lettura su mobile */
  line-height: 1.5;
}

/* 3. Contenitori fluidi (MAI usare width in px come 1200px) */
.content-wrapper {
  width: 100%;
  padding: 15px; /* Crea un margine interno per non far toccare il testo ai bordi */
}

/* 4. Rende tutte le immagini reattive */
img, video {
  max-width: 100%;
  height: auto;
  display: block;
}