body{background:#E8E8E8;background-attachment:fixed;font-size:18px;font-family:Georgia,"Times New Roman",Times,serif;margin:0;padding:0;color:#191970} /* sfondo intorno */
.corpo{display:flex;align-items:stretch;justify-content:space-around;width:60%;margin-left:auto;margin-right:auto;background-color:#E8F3FF}
.corpo a:visited{color:purple}
.corpo a:hover{color:#444}
.corpo a:link{color:#00F}
.skip_main{width:60%;background-color:#FFF;color:#FFF;margin-left:auto;margin-right:auto}
.skip_main a:link{color:#FFF}
.skip_main a:focus{background-color:#990000;color:#FFF!important}
.skip_main a:visited{color:#FFF}
.main{background-color:#FFF;font-size:1em;margin-left:auto;margin-right:auto}
.main a:visited{color:purple}
#climate{border:1px solid #009;margin:2px;padding:2px;}
figure{margin:5px;padding:1px;}
figcaption{font-size:.9em;font-style:italic;text-align:left;color:#000}
.LegendaTabelle{font-size:.9em;color:#888;font-style:italic}
.ElencoCittà{line-height:1.5em}
.ElencoCittà a:hover{color:#444}
h1,h2,h4,h5,h6{font-size:1.4em;color:#900;font-variant:small-caps;text-transform:none;font-weight:400;margin-bottom:0}
h1{font-size:1.8rem;padding-bottom:0;margin-bottom:0}
h2{font-size:1.5rem;font-weight:700;text-align:left;color:#191970;margin-top:2.5rem;margin-bottom:1rem;letter-spacing:0.2px;border-bottom:1px solid #e0e0e0;}
h3{font-size:1.2rem;font-weight:bold;text-decoration:none;border-bottom:1px solid #bdbdc9;padding-bottom:8px;margin-bottom:5px;margin-top:15px;}
.scroll-div {position: fixed;bottom: 20px;right: 20px;padding: 10px 20px;font-size: 16px;background-color: #ffffff;color: white;border:1px solid #F2F2F2;border-radius: 5px;cursor: pointer;text-align: center;display: none; /* Non visibile fino a quando l'utente non scorre */ opacity: 0.7;transition: opacity 0.3s;}
.scroll-div:hover {opacity: 1;}
img{max-width:100%;padding:0;margin:0;height:auto}
.city-box {
    /* Grigio molto chiaro per lo sfondo (richiama le tue colonne laterali) */
    background-color: #f4f4f4; 
    /* Il tuo blu scuro per il testo */
    color: #000044; 
    /* Bordo rosso scuro a sinistra (il tuo #990000) */
    border-left: 6px solid #990000; 
    /* Bordi sottili grigi per gli altri 3 lati */
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    /* Spaziatura interna: allontana il testo dai bordi del box */
    padding: 20px;
    /* Margine esterno: crea spazio sopra e sotto il box rispetto ai paragrafi */
    margin: 30px 0;
    /* Arrotondamento solo degli angoli di destra per un look moderno */
    border-radius: 0 4px 4px 0;
    /* Ombra leggerissima per dare profondità sul fondo bianco */
    box-shadow: 2px 2px 8px rgba(0,0,0,0.05);
}
/* --- TITOLO CITTA' DENTRO IL BOX --- */
.city-box h3 {
    /* Rimuove il margine superiore standard per allinearlo al box */
    margin-top: 0;
    /* Rosso scuro come i tuoi H2 */
    color: #191970; 
    /* Dimensione carattere leggermente superiore al testo normale */
    font-size: 1.3rem;
    /* Linea sottile sotto il titolo per separarlo dal testo della città */
    border-bottom: 1px solid #ccc;
    padding-bottom: 8px;
    margin-bottom: 15px;
     /* Grassetto deciso */
    font-weight: bold;
}
summary h2::before {
    content: "▶"; /* Una freccia più visibile */
    display: inline-block;
    margin-right: 10px;
    font-size: 0.8em;
    transition: transform 0.3s;
}
details[open] summary h2::before {
    transform: rotate(90deg); /* La freccia punta in basso quando è aperto */
}
/* Rende l'intera area del titolo cliccabile e cambia il cursore */
summary {
    cursor: pointer;
    list-style: none; /* Rimuove il triangolino standard su alcuni browser */
}
/* Aggiunge un effetto hover per far capire che è un link */
summary:hover h2 {
    color: #cc0000; /* Il rosso che usi per le linee */
    text-decoration: underline;
}
/* Rimuove il triangolino di default di Chrome/Safari */
summary::-webkit-details-marker {
    display: none;
}/* Nascondi la checkbox */
.accordion-toggle {display: none;}
/* Style per il contenitore dei bottoni */
.accordion-button {display: block;cursor: pointer;}
/* Style per i bottoni */
.accordion-button label {background-color: #E8E8E8;color:#191970;padding:10px 0px 10px 0px;text-align: left;border:1px solid #900;font-size:.9em;display:block;width:100%;}
/* Nascondi il contenuto per default */
.accordion-content {display: none;padding: 10px;background-color: #f9f9f9;border-top: 1px solid #ccc;transition: all 0.3s ease-in-out;}
/* Quando la checkbox è selezionata, mostra il contenuto */
.accordion-toggle:checked + .accordion-button + .accordion-content {display: block;
}
/* Nascondi il bottone "Vedi meno" quando la checkbox non è selezionata */
.accordion-toggle:not(:checked) + .accordion-button .collapse-btn {display: none;}
/* Nascondi il bottone "Espandi" quando la checkbox è selezionata */
.accordion-toggle:checked + .accordion-button .expand-btn {display: none;}
/* Mostra il bottone "Vedi meno" quando la checkbox è selezionata */
.accordion-toggle:checked + .accordion-button .collapse-btn {display: inline-block;}
.ImmagineNonCliccabile{display:none}
.ImmagineCliccabile{color:#900;font-size:.9em;text-align:left}
.LinkContinenti{font-size:.9em;color:#00F;text-decoration:none}
.LinkContinenti a:link{color:#000;text-decoration:underline}
.LinkContinenti a:visited{color:purple;text-decoration:none}
.LinkContinenti a:hover{color:#CBA;text-decoration:none}
.ElencoPaesi{color:#000;font-size:1em;text-align:left}
.ElencoPaesi a:link{color:#009;text-decoration:none}
.ElencoPaesi a:visited{color:purple;text-decoration:none}
.ElencoPaesi a:hover{color:red;font-variant:normal;text-decoration:none}
.TitoliPaesi{font-size:1em;color:#900;padding-bottom:0;margin-bottom:0;font-variant:small-caps}
.TitoliPaesi a:visited{color:#903;text-decoration:none}
#US{text-align:left;color:blue;display:none} 
#IT{text-align:left;color:blue;display:none} 
.hide-dom {display: none}
.hr_int{border-top: 1px solid #555}
.hr_h2{border-top: 1px solid #191970}
.copyright{font-size:.8em;text-align:left}
.button{text-decoration:none;display:inline-block;text-align:center;padding:.25rem.5rem;font-size:1rem;font-weight:300;  border-radius:.2rem;color:black;background-color:white;margin:15px 5px 15px 5px}
.button-facebook{background-color:#4267b2;color:white!important}
.button-twitter{background-color:#000000;color:white!important}
.button-whatsapp{background-color:#25D366;color:white!important}
.button-linkedin{background-color:#0e76a8;color:white!important}
.button-mail{background-color:#777777;color:white!important}
.title{width:60%;background-color:#FFF;font-weight:400;margin:0;margin-left:auto;margin-right:auto;color:#000;border:none;font-size:1em;text-decoration:none;text-align:left;font-variant:small-caps;vertical-align:top}
.title span{color:#000;margin:0;padding:0}
.title a:link,a:visited{font-size:2em;color:#900;text-decoration:none}
.title a:hover{color:red;text-decoration:none}
.title span:hover{color:red}
.dropdown{position:relative;display:inline-block;}
.dropdown-content{display:none;position:absolute;line-height:1.5em;background-color:#f9f9f9;min-width:160px;box-shadow:0px 8px 16px 0px rgba(0, 0, 0, 0.2);padding:12px 16px;z-index:1;padding:7px}
.dropdown:hover 
.dropdown-content{display:block;z-index: 1001; /* Valore alto per essere sopra la mappa */}
.header{clear:both;width:60%;background-color:#900;height:74px;border:0px solid#900;padding:0;display:block;text-decoration:none;white-space:nowrap;margin:0 auto}
.header a:link{color:#009;text-decoration:none;padding:18px 30px 0 10px}
.header a:visited{color:purple;text-align:center;text-decoration:none}
.header a:hover{color:#FA8072;text-align:center;text-decoration:none}
.headerscroll{position:-webkit-sticky;position:sticky;top:0;z-index:100;display:none;width:100%;color:#FFF;background-color:#900;border:0px solid#900;padding:7px 0px 7px 0px;text-decoration:none;white-space:nowrap;margin:0 auto}
.headerscroll a:link{color:#009;text-decoration:none;padding:18px 30px 0 10px}
.headerscroll a:visited{color:purple;text-align:center;text-decoration:none}
.headerscroll a:hover{color:#FA8072;text-align:center;text-decoration:none}
.footer{clear:both;width:60%;height:100px;background-color:#900;border:0 solid #900;padding:0;display:block;text-decoration:none;white-space:nowrap;margin:0 auto}
.footer a:link{color:#FFF;text-decoration:none;padding:1px 30px 0 10px}
.footer a:visited{color:#FFF;text-align:center;text-decoration:none}
.footer a:hover{color:#FA8072;text-align:center;text-decoration:none}
.footer2{clear:both;line-height:1.6em;font-size:1.2em;width:60%;background-color:#900;border:0 solid #900;padding:1px;display:block;text-decoration:none;white-space:nowrap;margin:0 auto;display:none}
.footer2 a:link{color:#FFF;text-decoration:none;padding:18px 30px 0 10px}
.footer2 a:visited{color:#FFF;text-align:center;text-decoration:none}
.footer2 a:hover{color:#FA8072;text-align:center;text-decoration:none}
#centro-home{padding:0 1%;float:left;width:98%;background-color:#FFF}
#centro{padding:0 1%;float:left;min-height:100%;width:68%;background-color:#FFF} /* era F5F5F5 */
#destra{float:left;min-height:100%;width:40%;border-width:0;border-color:#900;border-style:solid;padding:5px 0 2px;background-color:#FFF}
.carta{width:60%}
.tabellalarga{color:#000;width:100%}
.tabellalarga{overflow-x:auto}
.tuttoHeader{font-weight:normal;}
.div-tabella{color:#000;width:80%}
.div-tabella{overflow-x:auto}
.città{border-width:1px;border-color:#903;border-style:solid}
.città td{background-color:#E8E8E8;text-align:center}
.città th{background-color:#E8E8E8}
.città td.mese{background-color:#E8E8E8;color:#903}
.Bloccatitolo{float:left;width:232px;border-width:0;border-color:#444;border-style:solid;padding:0;background-color:#900}
.Bloccatitolod{float:left;height:300px;width:232px;border-width:0;border-color:#444;border-style:solid;padding:5px;background-color:#E8E8E8;margin-top:140px}
.cities{width:100%;border-collapse:collapse;border-width:1px;border-color:#009;border-style:solid;text-align:center;margin:3px 0px 3px 0px}
.cities th{border-width:1px;border-color:#333;border-style:solid;font-weight:bold;padding:2px;margin:0}
.cities td{border-width:1px;border-color:#666;border-style:solid}
.cities tr:nth-child(even){background-color:#edf2f4}
.cities tr:nth-child(odd){background-color:#ccd5e5}
.mese-container{display:none;width:100%}
.title-table-new{background-color:#ccd5e5} 
.celsius{}
.fahrenheit{font-style:italic}
.title-table-cell{display:none}
.precipit{width:100%;background-color:#c9e4ca;border-collapse:collapse;border-width:1px;border-color:#080;border-style:solid;text-align:center;margin:3px 0px 3px 0px}
.precipit th{border-width:1px;border-color:#333;border-style:solid;font-weight:bold;padding:2px;margin:0}
.precipit td{border-width:1px;border-color:#666;border-style:solid}
.precipit tr:nth-child(even){background-color:#edf2f4}
.precipit tr:nth-child(odd){background-color:#ccd5e5}
.mare{width:100%;border-collapse:collapse;background-color:#d7d9f2;border-width:1px;border-color:#009;border-style:solid;text-align:center;margin:3px 0px 3px 0px}
.mare th{border-width:1px;border-color:#333;border-style:solid;font-weight:bold;padding:2px;margin:0}
.mare td{border-width:1px;border-color:#666;border-style:solid}
.mare tr:nth-child(even){background-color:#edf2f4}
.mare tr:nth-child(odd){background-color:#ccd5e5}
.sole{width:100%;background-color:#ffe8d4;border-collapse:collapse;border-width:1px;border-color:#009;border-style:solid;text-align:center;margin:3px 0px 3px 0px}
.sole th{border-width:1px;border-color:#333;border-style:solid;font-weight:bold;padding:2px;margin:0}
.sole td{border-width:1px;border-color:#333;border-style:solid}
.sole tr:nth-child(even){background-color:#edf2f4}
.sole tr:nth-child(odd){background-color:#ccd5e5}
.città-table{background-color:#F5CAC3}
.città-table2{background-color:#fefae0}
.vuota-table{display:none;padding:0;margin:0}
.min-table{color:#009}
.max-table{color:#900}
.med-table{color:#555}
.prec-table{color:#31572C}
.rainHeader{color:#31572C}
.giorni-table{color:#31572C}
.rainfall_months{color:#31572C}
.temperaturemin{color:#009}
.temperaturemax{color:#900}
.sole-table{color:#F2542D}
.cities caption{text-align:left;font-size:.9em;font-weight:bold;color:#FFF;background-color:#d90429;padding:0px 0px 1px 0px}
.cities caption a:link{font-weight:300;color:#FFF}
.cities caption a:visited{font-weight:300;color:#FFF}
.precipit caption{text-align:left;font-size:.9em;font-weight:bold;color:#FFF;background-color:#40916c;padding:0px 0px 1px 0px} 
.precipit caption a:link{font-weight:300;color:#FFF}
.precipit caption a:visited{font-weight:300;color:#FFF}
.mare caption{text-align:left;font-size:.9em;font-weight:bold;color:#FFF;background-color:#0466c8;padding:0px 0px 1px 0px}
.mare caption a:link{font-weight:300;color:#FFF}
.mare caption a:visited{font-weight:300;color:#FFF}
.sole caption{color:#FFF;background-color:#FF9900;text-align:left;font-size:.9em;font-weight:bold;padding:0px 0px 1px 0px}
.rigavuota{height:3px}
.switch{position: relative;display:inline-block;width:50px;height:24px;}
.switch input{opacity:0;}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#900;-webkit-transition:.4s;transition:.4s;}
.slider:before{position:absolute;content:"";height:16px;width:16px;left:4px;bottom:4px;background-color:white;-webkit-transition:.4s;transition: .4s;}
input:checked+.slider{background-color:#2196F3;}
input:focus+.slider{box-shadow: 0 0 1px #2196F3;}
input:checked+.slider:before{-webkit-transform: translateX(26px);-ms-transform:translateX(26px);transform:translateX(26px);}
/* Rounded sliders */
.slider.round{border-radius:34px;}
.slider.round:before{border-radius:50%;}
@media only screen and (max-width: 1920px) {
}
@media only screen and (max-width: 1680px) {
body{font-size:18px}
.main{font-size:1em}
.ElencoPaesi{font-size:1em}
.title{font-size:1em}
.header{font-size:.8em;width:70%}
.corpo{width:70%}
.skip_main{width:70%}
.title{width:70%}
.footer{width:70%}
.footer2{width:70%}
}
@media only screen and (max-width: 1280px) {
.intestaz{font-size:1em}
.skip_main{width:80%}
.title{width:80%}
.header{width:80%;font-size:.8em}
.footer{width:80%}
.corpo{display:inline;width:80%}
#centro{width:68%}
#destra{width:30%}
}
@media only screen and (max-width: 1152px) {
.title{width:90%}
.skip_main{width:90%}
.header{width:90%;font-size:.8em}
.footer{width:90%}
.corpo{width:90%}
}
@media only screen and (max-width: 1024px) {
.title{width:100%}
.skip_main{width:100%}
.headerscroll{display:inline-block}
.city-box {
        /* Riduciamo leggermente il padding per non sprecare spazio su schermi piccoli */
        padding: 15px;
        /* Riduciamo lo spessore del bordo rosso per non "mangiare" larghezza */
        border-left-width: 4px;
        margin: 20px 0;}
.header{display:none}
/*.indice{display: none;}*/
/* summary,h2{scroll-margin-top:74px; Regola i pixel in base all'altezza del tuo header} */
.footer{width:100%}
.corpo{width:100%}
.title-table-new{}
.title-table-cell{}
}
@media only screen and (max-width: 768px) {
h1{font-size:2rem}
h2{font-size:1.45rem}
h3{font-size:1.2em}
.image-container {
    overflow-x: auto;  /* Abilita lo scroll orizzontale */
    white-space: nowrap;  /* Impedisce che l'immagine vada a capo */
    display: block; /* Impedisce problemi di layout, a volte utile */
    width: 100%;  /* Assicurati che il contenitore prenda tutta la larghezza disponibile */
  }
.mappeclima {
    max-width: none; /* Impedisce che l'immagine venga ridimensionata */
    width: auto;  /* Mantieni la larghezza originale dell'immagine */
    height: auto; /* Mantieni il rapporto di aspetto */
    display: block; /* A volte necessario per evitare problemi con l'inline-block */
  }
   /* Sovrascrivere le regole dell'immagine */
figure {
    display: inline-block;  /* Impedisce che il figure occupi tutta la larghezza */
  }
.carta{width:70%;padding:1px;margin:1px}
.footer{font-size:.9em}
.cities{font-size:1em}
.mare{font-size:1em}
.sole{font-size:1em}
.precipit{font-size:1em}
}
@media only screen and (max-width: 630px) {
.carta{width:85%}
.div-tabella{width:90%}
.footer2{width:100%;display:block;line-height:2em}
.footer{display:none}
#centro{width:98%}
#destra{width:100%}
}
@media only screen and (max-width: 568px) {
}
@media only screen and (max-width: 480px) {
.div-tabella{width:100%}
li{margin:10px 0;}
.ImmagineNonCliccabile{display:inline-table}
.ImmagineCliccabile{display:none}
.ElencoCittà{line-height:2em}
.cities{font-family:Arial Narrow,"Times New Roman",Times,serif;}
.mare{font-family:Arial Narrow,"Times New Roman",Times,serif;}
.sole{font-family:Arial Narrow,"Times New Roman",Times,serif;}
.precipit{font-family:Arial Narrow,"Times New Roman",Times,serif;}
.cities caption{font-size:1em}
.precipit caption{font-size:1em}
.mare caption{font-size:1em}
.sole caption{font-size:1em}
}
@media only screen and (max-width: 360px) {
h1,h2{font-size:1.1em}
}
@media only screen and (max-width: 320px) {
.headerscroll{font-size:0.8em}
}
@media only screen and (max-width: 299px) {
}
@media only screen and (max-width: 239px) {
}
@media only screen and (max-width: 200px) {
.h1,h2{width:100%}
}
@media print {
div#centro{width:100%;margin:0;float:none;font-size:0.8em}
.cities,.precipit,.mare{width:100%;margin:0;float:none;page-break-inside:avoid}
.google,.addthis,.facebook,.header,.footer,.footer2,#destra{display:none}
.TitoliPaesi{page-break-after:avoid}
}