html{
    font-size: 1em;
}
body{
    background-color: #202612;
    font-family: 'Jomolhari', serif;
    color: #E1DFDE;
}


/* Nav-bar */
nav{
    width: 100vw;
    z-index: 90;
    position: fixed;
    /* position: absolute; */
    top:0;
    
}
nav button{
    border: 0;
    background-color: #202612c9;
    margin-top: 1rem;
    margin-left: 1.5rem;
    position: fixed;
    z-index: 91;
}
nav button span{
    height: 3px;
    width: 2.5rem;
    margin: 6px;
    background-color:#EA444C ;
    display: block;
    position: relative;
    transition: transform  0.2s;
}
nav ul{
    list-style-type: none;
    margin: 0 0rem;
    padding: 0;
    display: flex;
    justify-content:space-evenly;
}

.velinaDiSfondo{
    background-color: #202612c9;
}
li{
    margin: 0.6rem 0 ; 
}
nav ul li a{
    font-weight: 600;
    font-size: 1.5rem;
    font-family: 'Inter', sans-serif;
    color: #FFFFFF;
}

/* section footer */


footer{
    margin-bottom: 0;
    padding: 2.5rem 4.5rem;
    display: flex;
    justify-content:space-between;
    background-color:#181C0D ;
}
.boxLinkFooter{
    display: flex;
    height: 2.5rem;
}
footer h3{
    font-size: 1.2rem;
}
#iubenda {
    height: 10px;
}
.boxLinkFooter a{
    color: #E1DFDE;
    margin: auto 0.5rem auto 0;
    font-size: 1.1rem;
}
.lineaFooter{
    height: 1px;
    width: 0.625rem;
    margin: auto 0.5rem auto 0;
    background-color: #E1DFDE;
}
#footerAlloggi{
    width: 13.5rem;
}

#info{
    width: 12.5rem;
}
#social {
    width: 31.25rem;
    text-align: center;
    margin:auto 0;
}
#social h2{
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}
#social h4{
    margin: 0.1rem;
    font-weight: normal;
}
#social p{
    font-size: 0.9rem;
}
#boxSocial a img{
    margin: 1rem 1.5rem;
    width:2.5rem ;
}

/* Freccia top */
#frecciaTop{
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 5;
}
#frecciaTop img{
    width: 4rem;
}
#frecciaTop .nascondi{
    opacity: 0;
}

/* copiato anche in index.css fare il refactoring */
@media (max-width: 1300px) {
    html{
        font-size: 0.9em;
    }
}
@media (max-width: 1170px) {
    html{
        font-size: 0.8em;
    }
}
@media (max-width: 1040px) {
    html{
        font-size: 0.7em;
    }
}
/* -------------------------- */
@media (min-width:599px) {
    nav button{
        display: none;
    }
    #sfondoMenuMobile{
        display: none;
    }
}
@media (max-width: 599px) {
    nav ul{
        transform: translate(-110%);
        position:Absolute ;
        height: 50vh;
        width:100%;
        text-align: center;
        flex-direction: column;
        background-color: #2026129c;
        box-shadow: 0px 5px 10px 0px #000000;
        transition: transform  0.5s;
    }
    /* visibile classe per far vedere il menù mobile */
    .showMenu{
        width:100%;
        /* display: flex; */
        transform: translate(0);
    }
    .showMenuSfondo{
        height: 100vh;
        width: 100vw;
    }
    button.open span:nth-child(1){
        top:9px;
        transform: rotate(45deg);
    }
    button.open span:nth-child(2){
       opacity: 0;
    }
    button.open span:nth-child(3){
        top:-9px;
        transform: rotate(-45deg);
    }
    button.open{
        background-color: #181c0d00;
    }

    /* --------parte per visualizzare menu mobile con JS------- */
    li{
        margin: 1rem 0 ; 
    }

   footer{
        flex-wrap: wrap;
        justify-content:space-around;
        text-align: center;   
    }
   #info{
        width:50%;
    }
    #footerAlloggi{
        width:50%;
        text-align: left;
    }
    #footerAlloggi h3{
        text-align: center;
    }
    .boxLinkFooter{
        height: 3.5rem;
    }
    #social {
        width: 100%;
        margin-top: 3rem;
    }
}