html {
  font-size: 16px;
}

#titolo{
    position:absolute; 
    
}

/* INTESTAZIONE */

#logo{
        position:absolute; 
        top:0rem; 
        width:6.5rem; 
        left:3rem; 
        aspect-ratio: 1/1;

}

h1{
        position:absolute; 
        top:0.5rem; 
        font-size: 3.2rem;
        padding:0rem; 
        margin:0rem; 
        left:15rem; 
        color: rgb(0, 61, 0);
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        text-shadow: 0.2rem white;
    }

#sottotitolo2{
    position:absolute;
    font-size: 2rem;
    top:0.5rem; 
    left:50rem; 
     font-style: italic;
}  

#sottotitolo1{
position:absolute; 
    top:2.3rem; 
    font-size: 1.5rem;
    left:15rem; 
   
}

header{
     position:fixed; 
        width:100%; 
        height:16%; 
        top:0rem; 
        left:0rem; 
        background-color: rgba(30, 143, 255, 0.589);
}




#dettagli_veicolo{
    visibility: hidden;
}



.item img{
    
    width:100%; 
    aspect-ratio: 5 / 3;
   
}

.item{

    /*flex: 1 1 250px;
   max-width: calc(25% - 16px); /* opzionale, vedi sotto */
   aspect-ratio: 4 / 3; /* quadrati */
  /*flex-basis:350px; 
   /*margin:10px; */
    max-height: 400px;
   border:2px solid grey; 
}

.nome{
    width:100%; 
    height:10%; 
    text-align: center;
    vertical-align: center;
    padding-top:0.5rem; 
    font-size: 1rem;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    background-color: rgba(255, 255, 255, 0.575);
}


#contenuto{
    position:fixed; 
    height:75%; 
    width:100%; 
    left:0%; 
   top:25%; 
   
   
   background-color: rgba(0, 127, 253, 0.726);
   
}

#vetrina{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    /*
    repeat serve a creare un certo numero di colonne
    numero di colonne = numero_statico | auto-fit | auto-fill
    minmax: dimnensione minima, occupa fino a 1fr
    fr: una frazione dello spazio disponibile quando sono stati sistemati gli elementi statici
    quando la dimensione scende sotto quella minima, wrap automatico (l'elemento va a capo)
    */
    gap: 16px;
    /*display:flex; */
    height:100%; 
    /*align-content: start;*/

     scroll-behavior: smooth;
     overflow:scroll; 
     justify-items: center;
   
}



    .contatto{
        
        font-size:1.5rem; 
        height: 280px; 
       
        padding:2%; 
        color:rgb(255, 255, 255); 
        font-weight:bolder; 
        text-align: center;
        border:0.2rem solid white; 
        border-radius:1rem; 
        background-color: rgb(0, 160, 99);
    }

    .valore_contatto{
        margin-top:10%; 
    }

nav ul li{
    flex-basis:200px; 
    flex-grow: 1;
    display:inline; 
   
}

ul{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; 
    padding:0px; 
    margin:0px; 
}




nav{
   position: fixed; 
    top:6rem; 
    left:0rem;
    width:100%; 
    border: 4px solid rgb(0, 160, 99);
    padding:0px; 
}



nav ul li button{
    width:100%; 
    height:100%; 
    padding:0.5rem; 
   font-size: 1.5rem;
   color:rgb(0, 160, 99);
     border:none; 
    border-bottom: 4px solid rgb(0, 160, 99);
 
     
}

nav ul li button:hover{
    background-color: rgb(197, 197, 197);
}

.nav_selected{
    font-weight: bolder;
    color:white; 
   background-color: rgb(0, 160, 99);
   
}



body{
    font-family: Arial, Helvetica, sans-serif;
}




.exit{
    position:absolute; 
    border-radius:50%;
    background-color: rgb(160, 0, 0);
    color:white; 
    font-size: 2rem;
    top:0.1rem; 
    right:0.1rem; 
    height:3rem;
    width:3rem;  
    text-align: center;
    border:none; 
    z-index:3; 

}

.selected_image{
    border:4px solid dodgerblue;
    opacity:1; 
}

#img_prec, #img_succ{
    position:absolute; 
    background-color: rgb(0, 160, 99);
    width:10%; 
    height:100%; 
    
    color:white; 
    bottom:0%; 
    font-size: 1em;
    border-radius: 0.5em;

}

#img_prec{
    left:0%; 
}
 #img_succ{
    right:0%; 
}




.icona img,
    #immagine_principale img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }



     #dettagli_veicolo{
        position:fixed; 
        width:100%; 
        height:75%; 
        top:25%; 
        z-index:2; 
        background-color: aliceblue;
    }

    #dettagli{
        position:absolute; 
        bottom:10%;
        padding:2rem;  
        left:3%;
        border: 2px solid dodgerblue; 
        border-radius: 2rem;
        height:60%; 
        width:28%;
        font-size:1.2rem;
        
    }

    #galleria{
        position:absolute; 
        width:55%; 
        height:85%; 
        right:7%; 
        top:6%; 
    }

    #immagine_principale{
        position:absolute; 
        top:0%;
        height:100%; 
        left:15%; 
        aspect-ratio: 4/3;
        border: 2px solid dodgerblue; 
        border-radius: 2rem;
    }

    #immagine_principale img{
        border-radius: 2rem;
    }

    #nome2{
        position:absolute; 
        top:1%; 
        left:3%;
      
        height:5rem; 
        width:30%;
        font-size:2rem; 
        font-weight: bold;
        text-align: center;
        padding-top:0.4em; 
    }