:root {
    --sfondo_principale: #3498db;
    --carattere_logo: normal normal 400 calc(7em + 0.1vw) "Bowlby One SC", sans-serif;
    --carattere_menu: normal normal 300 calc(1em + 0.1vw) "Exo 2", sans-serif;
    --carattere: normal normal 300 calc(0.9em + 0.1vw) "Exo 2", sans-serif;           /* font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit; */
    --carattere_titolo: normal normal 600 calc(1.4em + 0.1vw) "Exo 2", sans-serif;
    --carattere_titolo_news: normal normal 600 calc(1.2em + 0.1vw) "Exo 2", sans-serif;
    --carattere_form: normal normal 300 calc(0.7em + 0.1vw) "Exo 2", sans-serif;
    --carattere_suggest: normal normal 300 calc(0.7em + 0.1vw) "Exo 2", sans-serif;
  }

body {
    margin:0 auto; padding:0;
    scrollbar-face-color:#ffffff;
    scrollbar-arrow-color:#000000;
    scrollbar-track-color:#ffffff;
    scrollbar-shadow-color:#000000;
    scrollbar-highlight-color:#000000;
    scrollbar-3dlight-color:#ffffff;
    scrollbar-darkshadow-Color:#ffffff;
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: calc(0.8em + 0.1vw);
}

.menu {
    box-sizing:border-box;
    max-width:800px; 
    margin:0 auto 0 auto;
    padding:0 1em;
    text-align:center;
}

a {text-decoration:none; color:black;}
a:hover {text-decoration:underline; color: red;}
a:visited {text-decoration:none; color:black;}

.cb {clear:both;}

.content {
    box-sizing:border-box;
    max-width:800px; 
    margin:3em auto 0 auto;
    padding:0 1em;
    text-align:left;
}
.content h1 {font-size:calc(1.4em + 0.1vw); margin-bottom:1em;}
.content p {width:100%; margin:1em auto; text-align:left;}
.content .eng {font-style:italic; font-size:calc(0.8em + 0.1vw); color:gray; text-align:right;}

.mainpage {
    margin: 100px auto 0 auto;
}
.mainpage img {border-radius:1em; transition: transform 0.2s;}
.mainpage img:hover {transform: scale(1.03);}

.gbform {background-color:#E3E0D7; width:100%;}
.gbform100 {width:95% !important; margin:0 auto !important; box-sizing: border-box !important; text-align:left;}
.gbform50 {width:48% !important; margin:0 auto !important; box-sizing: border-box !important; text-align:left; float:left;}
.gbformdiv {width:4% !important; margin:0 auto !important; box-sizing: border-box !important; float:left;}
.gbform .desc {font-size:calc(0.8em + 0.1vw);}
.gbform input, .gbform textarea {width:100%;}

.gbheader {border:1px dotted black; border-radius:0.4em; padding:0.5em; background-color:#ebe9e5;}
.gbmess {margin:1em 0 1em 1em; font-size:calc(0.8em + 0.1vw);}


  /*  ------------------------ gallery ------------------------ */
  .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15%, 1fr));
    gap: calc(0.5em + 0.1vw);
}

.thumbnail {
    width: 100%;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.2s;
    border-radius: 0.5em;
}

.thumbnail:hover {
    transform: scale(1.1);
}

/* Stile Dialog (Lightbox) */
dialog {
    border: none;
    border-radius: 0.5em;
    padding: 1.2em;
    max-width: 90%;
    max-height: 90%;
}

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.8); /* Sfondo oscurato */
}

#dialogImage {
    max-width: 100%;
    max-height: 80vh;
}

#closeDialog {
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    background: white;
    border: none;
    font-size:calc(1em + 0.1vw);
    cursor: pointer;
}