/*importo il font della pagina web scelto*/
@import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');
/*caratteristiche del body*/  
body {

font-family: 'Lora', serif;
margin: 0;
padding: 0;
background-color: #333;
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
/*caratteristiche header*/
header {
background-color: #333;
color: #fff;
text-align: center;
justify-items: center;
height: 20vh; /* Altezza del 15% della viewport height */
} 
/*caratteristiche commenti ipertestuali*/
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; 
}

/*caratteristiche paragrafi*/
p{

margin:0 auto;
margin-top: 3.5vh;
}
/*caratteristica titolo "langoterm"*/
.h1{

font-size: 4rem;
}
/*caratteristica logo e posizionamento*/    
.logo {

width: 10vh;
height:10vh;
z-index: 1;
position: inherit;
justify-content: center;
vertical-align: middle;
}
/*container del logo dove vengono diviso in 3 colonne*/
.container1 {
pointer-events: none;
display: grid;
grid-template-columns: 25% 50% 25% ;
position: relative;
margin-top: 5vh;
}
/*colonna sinistra dove viene posizionato il logo*/
.left-element {
pointer-events: none;
position: inherit;
justify-content: center;
vertical-align: middle;
}
/*colonna centrale dove viene posizionato il titolo "langoterm"*/    
.centered-element {

justify-content: center;
vertical-align: middle;
position: inherit;
}
/*colonna destra vuota necessaria per posizionare centralmente le altre colonne*/
.right-element {

position: inherit;
}
/*elemento per interagire con l'utente menu' a tendina*/
.menu-toggle {

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

font-size: 3.5rem;
}
/*altezza menu' a tendina quando attivo*/        
.active {

max-height: 400px;
}
/*elementi che compongono il menu' a tendina*/        
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;
}
/*contenitore della parte centrale del sito dove sono presenti i contenuti*/

.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;
vertical-align: middle;
}  
/*posizionamento e caratteristiche dello sfondo del contenitore dove sono presenti i contenuti*/
.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% */
}
/*elenco puntato ul*/
.ul_titolo {
margin-top: 10vh;
color: #fff;
opacity: 0; /* Initially hidden */
animation: slideIn 1.5s forwards; /* Animation to slide in */
position: inherit;
text-align: center;
justify-content: center;
padding-left: 0;
vertical-align: middle;
}
/*elenco puntato li*/
.li_{
position: relative;
text-align: center;
list-style-type: square;
list-style-position: inside;
margin-bottom: 5%;
font-size: 2.8rem;  
 
}  
/*caratteristiche del footer*/      
.footer {

background-color: #333;
color: #fff;
text-align: center;
height: 10vh; /* Altezza del 5% della viewport height */
font-size: 2rem;
} 
/* caratteristiche di ingresso slide in destra verso sinistra */
@keyframes slideIn {

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

} 
/*regole di visualizzazione per dispositivi mobili*/
@media only screen and (max-width: 1030px) {

p{
        
margin-top: 2vh;
}

.h1{
        
font-size: 5vh;
}
             
.menu-toggle i {

font-size: 7vh;
}
                
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: 3vh;
}
.ul_titolo{

margin-top: 10vh;
}   

.li_{

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

.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;
}
      
.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;
}
.ul_titolo{

margin-top: 10vh;
}
.li_{

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

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

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

    font-size: 0.5rem;
   
    } 

}