body{

    font-family: verdana;

    background-color:rgb(250, 242, 232);

    margin:0;

    overflow-x: hidden;

    max-width: 100vw;

    box-sizing: border-box;

}

html{

    width: 100%;

    max-width: 100vw;

    overflow-x: hidden;

    box-sizing: border-box;

}

header{

    padding: 0

}



*, *::before, *::after {

    box-sizing: inherit;

}



@media (max-width: 600px) {

    .strisciaCitta, #altraSezione {

        width: 100%;

        min-width: 0;

        margin: 0;

        padding-left: 0;

        padding-right: 0;

        box-sizing: border-box;

    }

    .storia-container {

        display: flex !important;

        flex-direction: column !important;

        align-items: stretch !important;

    }

    #storia, #negozio {

        width: 100% !important;

        max-width: 100% !important;

        padding: 10px !important;

        margin: 0 !important;

        display: block !important;

    }

    .rowProdotti {

        flex-direction: column;

        gap: 10px;

        width: 100%;

        margin: 0;

        box-sizing: border-box;

    }

    .boxProdotti {

        margin: 20px auto;

        width: 90vw;

        max-width: 300px;

        min-width: 0;

        box-sizing: border-box;

    }

    #emanuela {

        width: 95% !important;

        height: auto !important;

        margin: 10px 2vw 10px 2vw !important;

        position: static !important;

        right: auto !important;

        box-sizing: border-box;

        font-size: 16px !important;

        padding: 10px !important;

    }

}



#navbar{

    padding:10px;

    width: 100%;

    height: 80px;

    color:rgb(0, 0, 0);

    background-image:linear-gradient(to bottom right, rgb(43, 42, 42), rgb(32, 32, 32));

    position: fixed;

    border-bottom: 3px solid rgb(167, 0, 0);

    z-index: 10;

}

#empty{

    background-color:rgb(249, 229, 203,0.1);

    padding:10px;

    height: 80px;

    width: 100vw;

}



#logo{

    width: 70px;

    height: 70px;

    padding: 5px;

}



#titolo{

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    display: inline;

    position:absolute;

    top:-10px;

    font-size: 40px;

    color:rgb(149, 44, 44);

}



.bottoniMenu{

    width: 60px;

    height: 60px;

    cursor: pointer;

    position: fixed;

    right: 0;

    top:6px;

    margin: 10px;

    margin-right: 20px;

    display: inline;

    font-size: 40px;

}



#closeMenu{

    display: none;

}



#menu{

    padding:20px;

    color:rgb(62, 55, 55);

    position: absolute;

    right:100px;

    top: 28px;

    transform: translateX(800px);

    display: inline;

    transition: transform 2s;

}

#menu.apri{

    transform: translateX(0px);

}

#menu.chiudi{

    transform: translateX(800px);

}



.link{

    color:white;

    text-decoration: none;

    font-family:sans-serif;

    font-size: 20px;

    padding-right: 10px;

    border-right: 3px solid rgb(62, 55, 55);

}

.link:hover{

    transition: color 0.5s;

    color:rgb(119, 119, 119)

}



#storia{

    margin:10px;

    padding:60px;

    width:600px

}



#negozio{

    width: 650px;

    margin:30px;

}



.titolo{

    color:rgb(77, 76, 73);

    font-size: 60px;

    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    padding: 25px;

    height: 100px;

    width: 100%;

    text-align: center;

    text-shadow:-2px -2px 3px bisque,

                 2px -2px 3px bisque,

                -2px  2px 3px bisque,

                 2px  2px 3px bisque;

}

.strisciaCitta{

    background-image: url(mantova.png);

    background-repeat: no-repeat;

    background-position: center;

    background-size: cover;

    box-sizing: border-box;

    align-items: center;

    height: 130px;

    width: 100%;

}



#altraSezione{

    color:rgb(77, 76, 73);

    font-size: 60px;

    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    padding: 25px;

    padding-bottom: 10px;

    height: 100px;

    color: bisque;

    margin-top:10px;

    width: 100%;

    text-align: center;

}



#tuttiProdotti{

    background-image:linear-gradient(to bottom right, rgb(77, 76, 73), rgb(71, 70, 70));

    width: 100%;

    display: block;

    padding:10px;

}



.rowProdotti{

    text-align: center;

    gap:80px;

    display: flex;

    width: 100%;

    justify-content: center;

}



.boxProdotti{

    background-image:linear-gradient(to bottom right, rgb(250, 242, 232),rgb(234, 205, 173));

    width:250px;

    height: 300px;

    display: flex;

    flex-direction: column;

    margin: 60px;

    padding:20px;

    border-radius: 10px;

    box-shadow: -10px 10px 25px rgb(34, 34, 33);

    transition: all 1s;

}



.boxProdotti:hover{

    transition:  scale 1s, color 0.5s;

    color:brown;

    scale:1.2;

}



#nomeProdotto{

    margin-top: 10px;

    font-weight: bold;

}



footer{


    background-color: rgb(0, 0, 0,0.8);

    color:rgb(150, 150, 150);

    padding:50px;

    width: 100%;

    display: inline-flex;

}



#info{

    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

    display: inline;

    line-height: 25px;

    padding:10px

}

span{

    font-size: 25px;

    color: white;

}



#orari{

    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

    display: inline;

    line-height: 25px;

    padding:10px;

    margin-top: 45px;

}



iframe{

    border-radius: 10px;

    width: 600px;

    height: 300px;

    margin-left:100px;

}



.persona{

    font-size: 40px;

    color: rgb(131, 0, 55);

    padding-left: 100px;

    padding-top: 40px;

}

#nicola{

    width: 800px;

    height: 300px;

    margin:20px;

}

#fotoNicola{

    width: 200px;

    border-radius: 5px;

    box-shadow: 10px 20px 20px rgb(61, 61, 61);

    margin-top: 20px;

    margin-bottom: 40px;

    margin-left: 100px; 

    margin-right: 100px; 

}

#emanuela{

    width: 800px;

    margin:20px;

    right: 60px;

}

#fotoEmanuela{

    width: 200px;

    border-radius: 5px;

    box-shadow: 10px 20px 20px rgb(61, 61, 61);

    margin-top: 20px;

    margin-bottom: 40px;

    margin-left: 250px;

    margin-right: 100px;

}



.par{

    font-size: 19px;

    color: rgb(77, 76, 73);

    padding:60px;

    padding-top: 0px;

    line-height: 35px;

}



.linkFooter{

    color:blueviolet;

    text-decoration: none;

}

.linkFooter:hover{

    color:rgb(77, 76, 73);

}



input{

    height:30px;

    width: 200px;

    border:2px solid rgb(77, 76, 73);

    border-radius: 10px;

}



label{

    margin:20px

}



#mex{

    width:550px;

    height:200px;

}



#sendMail{

    width: 150px;

    height: 50px;

    margin:70px;

    background-color:brown;

    border-radius: 10px;

    border: none;

    color:white;

    font-size: 30px;

    cursor: pointer;

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    transition: all 0.3s;

}

#sendMail:hover{

    background-color:rgb(131, 51, 51);

    color:rgb(162, 162, 162);

}



.labelInput{

    display: flex;

    flex-direction: column;

}

.contenitoreRow{

    padding:40px;

    padding-bottom:0px;

    margin:0;

    display: inline-flex;

    justify-content: center;

    gap:100px;

}

form{

    padding-left: 30px;

    justify-items: start;

}



#privacy{

    margin: 30px;

    width:800px;

}