:root {

  --accent: #333;

  --text-color: #333;

  --subtext-color: #666;

}



body {

  font-family: Consolas, "Courier New", monospace;

  line-height: 1.6;

  color: #111;

  background: #f8f8f8;

  margin: 0;

  padding: 0;

}



h3 {

	margin-bottom: 0.4rem;

}



h4 {

	font-size: 1.2rem;

	margin-top: 0;

	margin-bottom: 0.3rem;

}



h5 {

	font-size: 1.1rem;

	margin-bottom: 0.2rem;

	margin-top: 0;

	font-style: italic;

}



header {

  text-align: center;

  padding: 2rem 1rem 1rem;

  border-bottom: 1px solid #ddd;

}



header h1 {

  background-image: url("../img/1718618087726.jpeg");

  background-size: cover;

  background-position: center;  

  background-repeat: no-repeat; 

  margin-bottom: 0;

  }



header h1 a {

  text-decoration: none;

  color: #fff;

  font-weight: 600;

  letter-spacing: 1px;

}



nav {

  background-color: var(--accent);

}



nav a {

  text-decoration: none;

  color: #fff;

  margin: 0 0.5rem;

}



nav a.active,

nav a:hover {

  color: #999;

  border-bottom: 1px solid #999;

}



nav span{

  color: #fff;

}



main {

  max-width: 85%;

  margin: 3rem auto;

  padding: 0 1rem;

  background: #fff;

}

main .nav{

	text-Align: center;

}

li {

	margin-bottom: 2rem;

}



.Bibliografia li {

	margin-bottom:0.1rem;

}



.intro {

  text-align: center;

  padding: 2rem;

}



.intro h2 {

  font-size: 1.8rem;

  font-weight: 500;

  margin-bottom: 1rem;

}



.intro .circle {

  float: right;

  width: 250px;          /* larghezza del cerchio */

  height: 250px;         /* altezza del cerchio */

  border-radius: 50%;    /* trasforma il div in cerchio */

  overflow: hidden;      /* taglia tutto ciò che esce dal cerchio */

  display: flex;

  justify-content: center;

  align-items: center;

}



.intro .circle img {

  width: 100%;           /* scala l’immagine per riempire il cerchio */

  height: 100%;

  object-fit: cover;     /* mantiene proporzioni e ritaglia eventuale eccedenza */

}



.highlight{

  margin: 1rem;

  width: 100%;

  text-align: center;

}



.highlight p{

  padding: 0.4em 1em 0.4em 1em;

  /* border: 2px solid var(--accent);

  cursor: pointer;

  font-weight: 500;

  color: var(--accent);

  transition: background-color 0.2s ease, color 0.2s ease;

  */

}



.highlight ul {

  list-style: none;

  padding-left: 0;

}



.highlight li {

  margin-bottom: 0.8rem;

}



.highlight a{

  text-decoration: none;

  padding: 0.4em 1em 0.4em 1em;

  margin: 1rem;

  border: 2px solid var(--accent);

  cursor: pointer;

  font-weight: 500;

  color: var(--accent);

  transition: background-color 0.2s ease, color 0.2s ease;

}



.cfr {

  font-size: 0.8rem;

  font-style: italic;

}



.mappa {

  margin-top: 1.5rem;

  border-radius: 8px;

  overflow: hidden;

  box-shadow: 0 2px 6px rgba(0,0,0,0.15);	

}



footer {

  text-align: center;

  font-size: 0.9rem;

  color: #777;

  padding: 2rem 1rem;

  border-top: 1px solid #ddd;

  background: #f8f8f8;

}



.testo-collassabile {

  position: relative;

  line-height: 1.6;

}



/* Nascondi il checkbox */

.testo-collassabile input {

  display: none;

}



/* Testo clampato */

.testo-collassabile p {

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;       /* numero di righe visibili */

  overflow: hidden;

  text-overflow: ellipsis;     /* forza i “...” */

  transition: all 0.3s ease;

  margin-bottom:0;

}



/* Quando aperto: mostra tutto */

.testo-collassabile input:checked ~ p {

  -webkit-line-clamp: unset;

  overflow: visible;

  text-overflow: unset;

}



/* Etichetta “Leggi tutto / meno” */

.leggi-tutto {

  display: inline-block;

  margin-top: 0;

  color: #b75c3d;

  font-weight: 600;

  cursor: pointer;

  font-size: 0.75rem;

}



.leggi-tutto::after {

  content: "Leggi tutto...";

}



.testo-collassabile input:checked + p + .leggi-tutto::after {

  content: "Leggi meno";

}