body {
	font-size: 12pt;
	font-family: Arial, sans-serif;
	text-align: justify; /* testo giustificato */
	text-justify: inter-word; /* migliora la distribuzione delle parole */
}

a:link {
	text-decoration: none;
	color: #e74c3c;
}

a:hover {
	text-decoration: underline;
	color: #0056b3;
}

a:visited {
	color: #009900;
	text-decoration: none;
}

header {
	background-color: #f0f0f0; /* Colore sfondo header: grigio molto chiaro */
	color: #1f618d; /* Colore testo blu */
	padding: 20px;
	text-align: left;
	font-family: Arial, sans-serif;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Aggiunge una leggera ombra */
	border-bottom: 1px solid #ccc; /* Aggiunge un bordo inferiore */
   }

h1 {
	font-family: Arial, sans-serif; /* Tipo di carattere */
	font-size: 3em; /* Dimensione */
	padding: 20px; /* Spazio interno */
   border-radius: 8px; /* Angoli arrotondati */
	color: #1f618d; /* Colore testo blu */
	text-align: center; /* Allineamento */
	margin-bottom: 20px; /* Spazio inferiore */
	background-color: #dcdcdc; /*Colore sfondo titoli h1: gainsboro (grigio) */
}

h2 {
	font-family: Arial, sans-serif; /* Tipo di carattere */	
	font-size: 20pt;
	margin-top: 30px;
   margin-bottom: 15px;
	color: #000000;
	text-decoration: underline; /* Sottolinea il testo */
}

h3 {
	font-family: Arial, sans-serif; /* Tipo di carattere */
	font-size: 13pt;
	margin-top: 20px;
   margin-bottom: 10px;
	color: #000000;
}

/*piè di pagina*/
footer {
	font-family: Arial, sans-serif; /* Carattere */
	background-color: #f0f0f0; /*sfondo grigio*/
	color: #333; /*testo scuro*/
	padding: 20px;
	width: 100%;
	text-align: center;
}

footer a {
  color: #e74c3c; /*link rossi*/
  text-decoration: none;
}

footer a:hover {
  color: #0056b3; /*sottolineato in blu al passaggio del mouse*/
  text-decoration: underline;
}

/* Formato delle tabelle*/	
table {
	 font-size: 12pt;
    border-collapse: collapse;
    width: 50%; /* oppure auto o 50%, o 100% secondo le tue preferenze */
    margin-top: 20px;
    border: 1px solid #ccc; /* bordo esterno sottile e grigio */
}

th, td {
    border: 1px solid #ccc; /* bordo interno sottile e grigio */
    padding: 6px 12px;
    text-align: left;
}

caption {
    caption-side: top;
    font-weight: bold;
    font-size: 1.2em;
    margin-bottom: 8px;
}

/* RESPONSIVE DESIGN */

@media screen and (max-width: 768px) {
	body {
		font-size: 11pt;
	}
	
	h1 {
		font-size: 2em; /* Ridotto per mobile */
		padding: 15px;
	}
	
	h2 {
		font-size: 16pt;
	}
	
	table {
		width: 100%;
		font-size: 11pt;
	}
	
	th, td {
		padding: 8px;
	}
}

@media screen and (max-width: 480px) {
	h1 {
		font-size: 1.5em;
	}
	
	/* Stack table su schermi molto piccoli */
	table, thead, tbody, th, td, tr {
		display: block;
	}
	
	thead tr {
		display: none; /* Nascondi le intestazioni */
	}
	
	tr {
		margin-bottom: 15px;
		border: 1px solid #ccc;
	}
	
	td {
		text-align: right;
		padding-left: 50%;
		position: relative;
		border: none;
		border-bottom: 1px solid #eee;
	}
	
	td:before {
		content: attr(data-label);
		position: absolute;
		left: 10px;
		font-weight: bold;
		text-align: left;
	}
}