body{

    margin: 0;

    font-family: "Playfair Display", serif;

}

/*Sezione Header*/

header{

    position: sticky;

    top: 0;

    display: flex;

    justify-content: center;

    z-index: 2;

}

header ul{

    margin: 0;

    display: flex;

    justify-content: center;

    list-style: none;

    align-items: center;

    flex-wrap: wrap;

}

header nav li a{

    color: white;

    text-decoration: none;

    transition: background-color 0.3s ease;

    padding: 20px;

}

header nav li{

    padding: 20px 0 20px 0;

}

#nodec :hover{

    background-color: #753C3B;

}

#gradiente{

    background: linear-gradient(to right, #5C0F16, #D68D93);

}



/*Sezione Benvenuti*/

#home{

    height: 81vh;

    display: flex;

    justify-content: center;

    align-items: center;

}

#prenota{

    display: flex;

    justify-content: space-evenly;

}

#prenota a{

    font-weight: 600;

    text-decoration: none;

    display: flex;

    justify-content: center;

    align-items: center;

    height: 50px;

    width: 120px;

    color:white;

    background-color: #5C0F16;

    transition: background-color 0.3s ease;

    border-radius: 50%;

}

#home a:hover{

    background-color: #af7877;

}

/*Sezione Impasti*/

#impasti{

    margin-bottom: 30px;

}

.bred{

    display: flex;

    flex-direction: column;

    justify-content: center;

    margin: 10px;

    border: solid 1px #5C0F16;

    padding-top: 10px;

    padding-bottom: 20px;

}

h2{

    text-align: center;

    color: #5C0F16;

}

.testo{

    width: 500px;

    color: #5C0F16;

    text-align: left;

    margin-left: 30px;

    margin-right: 30px;

    

}

.testoimpasti{

    margin: 40px 150px 40px 150px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    border: solid 3px #5C0F16;

}

/*Impasto napoletano*/

#imgpizzanapoli{

    background-image: url(../img/napoletana.png);

    width: 50%;

    height: 400px;

    background-position: center;

    background-size: contain;

    background-repeat: no-repeat;

}

/*Impasto romano*/

#imgpizzaroma{

    background-image: url(../img/romana.png);

    width: 50%;

    height: 400px;

    background-position: center;

    background-size: contain;

    background-repeat: no-repeat;

}

/*Impasto milanese*/

#imgpizzamilano{

    background-image: url(../img/meneghina.png);

    width: 50%;

    height: 400px;

    background-position: center;

    background-size: contain;

    background-repeat: no-repeat;

}

/*Sezione contatti e mappa*/

#mappa{

    margin: 60px 0 60px 0;

}

.twocolumn{

    display: flex;

    justify-content: space-evenly;

    color: #5C0F16;

    align-items: center;

    flex-wrap: wrap;

}

/*Sezione footer*/

footer span{

    font-weight: bold;

}

footer{

    border-top: #5C0F16 solid 1px ;

    display: flex;

    justify-content: center;

    color: #5C0F16;

}

#copy{

    text-align: center;

    color: #5C0F16;

    margin: 0;

    padding: 15px;

}

footer a{

    padding: 5px 20px 5px 20px;

}



/*Seconda pagina del menú*/



.twocolumn div{

    width: 500px;

}

.twocolumn{

    display: flex;

    justify-content: space-evenly;

    color: #5C0F16;

    align-items: center;

    flex-wrap: wrap;

}

/*Seconda pagina del menú tasto per quandoo prenota tavolo*/

.quandoo-widget-builder{

    display: flex;

    justify-content: space-evenly;

}



/*RESPONSIVE per immagine sezione benvenuti (Logo)*/

@media(max-width:600px){

    #home img{

        width: 100%;

        height: auto;

    }

}

@media(max-width:600px){

    #imgpizzanapoli{

        background-image: none;

    }

}

@media(max-width:600px){

    #imgpizzaroma{

        background-image: none;

    }

}

@media(max-width:600px){

    #imgpizzamilano{

        background-image: none;

    }

}



/*FARE GALLERIA IMMAGINI */



/*Galleria a griglia*/



.gallery {

    display: flex;

    flex-wrap: wrap;

    justify-content: center; 

    gap: 10px;

    margin-top: 10px;

}



.gallery img {

    border-radius: 5px;

    width: 350px;

    height: 300px;

    object-fit: cover; /* Mantiene le proporzioni dell'immagine */

}

.scale{

    transition: transform 0.3s ease-out;

}

.scale:hover { 

    transform: scale(1.3); /*Tag dato anche al footer, per elevae il tasto */

}



/*Pulsante wapp*/

#wapp{

  position: fixed;

  bottom: 20px;

  right: 20px;

  border-radius: 50px;

  box-shadow: 0 0 10px rgba(0,0,0,0.2);

  z-index: 1;

}



/*Carosello per promo*/

#domenica{

    text-align: center;

    top: 10px;

    padding-top: 10px;

    height: 40px;

    width: 50px;

    text-decoration: none;

    position: absolute;

    color: #5C0F16;

    z-index: 1;

}



#slider{

    width: 50vw;

    overflow: hidden;

}

#slides{

    display: flex;

    animation: carosello 60s infinite ease-in-out;

}

#slides p{

    width: 50vw;

    object-fit: cover;

}



/*Carosello promozioni*/

@keyframes carosello {

  from { transform: translateX(0); }

  to   { transform: translateX(-400vw); } /* muovi la larghezza delle prime 8 immagini */

}