html, body {
	margin:0;
	padding:0;
	height:100%;
	width:100%;
	border:0;
	background-attachment: fixed;
	background-image: url(../images/sfondo%20romeo.png);
	background-repeat: repeat;
	background-position: right top;
}
body {
    background-attachment: fixed;
    background-image: url(../images/sfondo%20romeo.png);
    background-repeat: repeat;
    background-position: left center;
}

.borditondi {
		border-radius: 5px;
	-moz-border-radius: 5px; /* firefox */  
	-webkit-border-radius: 5px; /* safari, chrome */
}
/* Immagine responsive con bordo argento brillante */
.responsive {
  max-width: 95%;
  height: auto;
  display: block;
  border: 3px solid silver;   /* bordo argento */
  border-radius: 12px;
  position: relative;         /* per le stelle */
  box-shadow: 0 0 10px rgba(192,192,192,0.7);
  animation: shine-border 3s infinite alternate; /* effetto luce sul bordo */
}

/* Effetto bordo che brilla */
@keyframes shine-border {
  from { box-shadow: 0 0 10px rgba(192,192,192,0.7); }
  to   { box-shadow: 0 0 20px rgba(255,255,255,0.9); }
}

/* Stelle scintillanti */
.responsive::before,
.responsive::after {
  content: "?";
  position: absolute;
  color: white;
  font-size: 14px;
  animation: twinkle 2s infinite;
}

/* Posizione stelle */
.responsive::before {
  top: -8px;
  left: 10%;
}
.responsive::after {
  bottom: -8px;
  right: 15%;
  animation-delay: 1s;
}

/* Animazione stelle */
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); }
  50%      { opacity: 1; transform: scale(1.2) rotate(180deg); }
}
.text-elegant {
  color: #f0f0f0;                /* bianco con leggero tono grigio */
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  text-align: center;            /* centrato (opzionale) */
  line-height: 1.4;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6); /* ombra per leggibilità */
  margin: 20px 0;
  
  /* dimensioni base (mobile first) */
  font-size: 1.4rem;   /* ~22px su smartphone */
  font-weight: 600;    /* semi-bold per visibilità */
}

/* Desktop e tablet: ingrandiamo */
@media (min-width: 768px) {
  .text-elegant {
    font-size: 2rem;   /* ~32px */
  }
}

@media (min-width: 1200px) {
  .text-elegant {
    font-size: 2.5rem; /* ~40px */
  }
}

.text-aidi {
  color: #f0f0f0; /* bianco leggermente grigiastro */
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  text-align: center;
  line-height: 1.2;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
  margin: 16px 0;

  /* dimensione base (mobile first) */
  font-size: 0.85rem; /* ~13.6px su smartphone */
  font-weight: 500;
}

/* Tablet */
@media (min-width: 768px) {
  .text-aidi {
    font-size: 0.95rem; /* ~15.2px */
  }
}

/* Desktop */
@media (min-width: 1200px) {
  .text-aidi {
    font-size: 1.05rem; /* ~16.8px */
  }
}

.video-container {
  width: 95%;              /* occupa tutta la larghezza disponibile */
  max-width: 1616px;        /* non supera la larghezza dell’immagine sopra */
  margin: 20px auto;        /* centra il video */
  border: 3px solid silver;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
  overflow: hidden;
  box-sizing: border-box;
}

.video-container video {
  width: 100%;   /* responsive: si ridimensiona in base al contenitore */
  height: auto;  /* mantiene proporzioni */
  display: block;
}
.text-list {
  list-style: none;           /* niente pallini */
  padding: 0;
  margin: 20px auto;
  max-width: 900px;           /* limite larghezza per desktop */
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  color: #f2f2f2;             /* bianco tendente al grigio */
  line-height: 1.6;
}

/* Stile dei singoli elementi */
.text-list li {
  margin-bottom: 12px;
  font-weight: 400;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6); /* leggibilità su sfondi scuri */
  
  /* base: mobile first */
  font-size: 1.1rem;   /* ~18px su smartphone */
}

/* Tablet */
@media (min-width: 768px) {
  .text-list li {
    font-size: 1.3rem; /* ~21px */
  }
}

/* Desktop grande */
@media (min-width: 1200px) {
  .text-list li {
    font-size: 1.6rem; /* ~25px */
  }
}
.styled-table {
  width: 85%;                 /* desktop: 85% */
  margin: 20px auto;          /* centrata */
  border-collapse: collapse;
  border: 3px solid silver;   /* bordo argento */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
  animation: shine-border 3s infinite alternate; /* effetto brillante */
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  color: turquoise;           /* testo turchese */
  font-size: 1.6rem;          /* ingrandito */
  text-align: left;           /* leggibilità migliore con la spunta */
}

/* Celle */
.styled-table th,
.styled-table td {
  border: 1px solid rgba(255,255,255,0.2);
  padding: 14px 18px;
  position: relative;
}

/* Responsive: diventa 98% su schermi piccoli */
@media (max-width: 1024px) {
  .styled-table {
    width: 98%;
    margin: 15px auto;
  }
}

/* Animazione bordo brillante */
@keyframes shine-border {
  from { box-shadow: 0 0 10px rgba(192,192,192,0.7); }
  to   { box-shadow: 0 0 20px rgba(255,255,255,0.9); }
}