@import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');

body {
font-family: 'Lora', serif;
margin: 0;
padding: 0;
background-color: #333;
height: fit-content; /* Altezza del 100% della viewport height */
display: flex;
flex-direction: column;
width: 100%;
height: 100%;  
}

a{
color:#fff;
text-decoration:none;
   
}
.a1 {

    color:#fff;
    text-decoration:underline; 
    font-size: 1rem;
    background-color: #7c5f00; /* Colore di sfondo */
    padding: 0.18em 0.25rem; /* Spaziatura interna (alto/basso, sinistra/destra) */
    text-decoration: none; /* Nessuna decorazione del testo */
    border-radius: 0.3rem; /* Arrotonda gli angoli */
    } 
.a2 {
        
    color:#fff;
    text-decoration:none; 
} 


p{

margin:0 auto;
margin-top: 3.5vh;
}

header {

background-color: #333;
color: #fff;
text-align: center;
height: 20vh; /* Altezza del 10% della viewport height */
}

.h1{

font-size: 4rem;
}
/* logo e posizionamento*/
.logo {
    
width: 10vh;
height:10vh;
z-index: 1;
position: inherit;
justify-content: center;
vertical-align: middle;
}

.container1 {
pointer-events: none;
display: grid;
grid-template-columns: 25% 50% 25% ;
position: relative;
margin-top: 5vh;  
}

.left-element {
pointer-events: none;
position: inherit;
justify-content: center;
vertical-align: middle;  
}

.centered-element {

justify-content: center;
vertical-align: middle;
position: inherit;
}

.right-element {

position: inherit;
}
/*barra di navigazione*/    
.menu-toggle {

display: block;
color: #fff;
text-align: center;
padding: 10px;
cursor: pointer;
}
    
.menu-toggle i {

font-size: 3.5rem;
}
    
nav {
    
background-color: #333;
color: #fff;
text-align: center;
overflow: hidden;
transition: max-height 0.9s ease;
max-height: 0;
}
    
nav ul {

list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
    
nav ul li {

display: block;
margin-left: 0px;
margin-right: 0px;
}
    
nav ul li a {

color: #fff;
text-decoration: none;
font-weight: bold;
display: block;
padding: 10px 0;
font-size: 1.8rem;
}
    
nav ul li a:hover {

background-color: #7c5f00;
}
    
.active {

max-height: 400px;
}
.block-container {

background-size: cover;
background-position: center;
background-image: url('immagini/home.webp');
height: 65vh;
display: flex; 
position: relative;
color: #fff;
box-sizing: border-box;
justify-content: center;
}   
 
.overlay {

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Imposta il colore di sfondo con un'opacità del 50% */
}

.li_{

position: inherit;
text-align: center;
list-style-type: square;
list-style-position: inside;
margin-bottom: 1vh;
font-size: 2.8rem;
}

.li_clean{

position: inherit;
text-align: center;
list-style-type: none;
list-style-position: inside;
margin-bottom: 2vh;
font-size: 2.2rem;
font-style: italic;
}

.titolo {

color: #fff;
opacity: 0; /* Initially hidden */
animation: slideIn 1.5s forwards; /* Animation to slide in */
position: relative;
text-align: center;
justify-content: center;
padding-left: 0;
}

@keyframes slideIn {

from {

opacity: 0;
transform: translateX(100%);
}
to {

opacity: 1;
transform: translateX(0);
}
}    

.footer {

background-color: #333;
color: #fff;
text-align: center;
height: 10vh; /* Altezza del 5% della viewport height */
font-size: 2rem;
}
/*regole di visualizzazione per dispositivi mobili*/
@media only screen and (max-width: 1030px) {

p{

margin-top: 2vh;
}

.h1{

font-size: 5vh;
}

/*barra di navigazione*/    
.menu-toggle {

display: block;
color: #fff;
text-align: center;
padding: 10px;
cursor: pointer;
}
            
.menu-toggle i {

font-size: 7vh;
}     
           
nav ul li a {

color: #fff;
text-decoration: none;
font-weight: bold;
display: block;
padding: 10px 0;
font-size: 3vh;
}
  
.li_{

position: inherit;
text-align: center;
list-style-type: square;
list-style-position: inside;
margin-bottom: 1vh;
font-size: 2rem;
}

.li_clean{

position: inherit;
text-align: center;
list-style-type: none;
list-style-position: inside;
margin-bottom: 2vh;
font-size: 1.5rem;
font-style: italic; 
}
             
.footer {

background-color: #333;
color: #fff;
text-align: center;
height: 10vh; /* Altezza del 5% della viewport height */
font-size: 1.5rem;
}
.a1 {

 
    font-size: 0.8rem;
   
    } 

}

/* Stili per smartphone con larghezza massima di 480px */
@media only screen and (max-width: 480px) {
  
p{

margin-top: 2vh;
}   
             
.h1{

font-size: 4vh;
}        
/*barra di navigazione*/    
                  
.menu-toggle i {

font-size: 7vh;
}
                       
nav ul li a {

color: #fff;
text-decoration: none;
font-weight: bold;
display: block;
padding: 10px 0;
font-size: 3vh;
}
             
   
.li_{

position: inherit;
text-align: center;
list-style-type: square;
list-style-position: inside;
margin-bottom: 1vh;
font-size: 1.5rem;
}

.li_clean{

position: inherit;
text-align: center;
list-style-type: none;
list-style-position: inside;
margin-bottom: 2vh;
font-size: 1.3rem;
font-style: italic;
}
.block-container {

  
    background-image: url('immagini/home-480.webp');
  
}
.footer {

background-color: #333;
color: #fff;
text-align: center;
height: 10vh; /* Altezza del 5% della viewport height */
font-size: 1rem;
}
.a1 {

    font-size: 0.5rem;
   
    } 
}