html {
    scroll-behavior: smooth;
}
:root {
    background-image : url('muro-mattoni-rosso-164223936.png');
}
a {
    text-decoration : none;
    font-size : 24px;
    color : black;
}
body header {
    background-image : url('marble-2362249_1280.jpg');
    background-size : cover;
    background-repeat : no-repeat;
    background-position : center;
    border : 8px solid black;
    width : auto;
}
body header h1 {
    font-size : 56px;
    text-align : center;
}
header .links {
    display : flex;
    flex-direction: row;
    justify-content : space-between;
    align-items : center;
}
header .links .varilink {
    display : flex;
    flex-direction: row;
    justify-content : space-between;
    align-items : center;
    gap : 20px;
    font-weight : 800;
}
header .links .varilink h3{
   font-size: 24px;
}
header .links .riservata button {
    background-color : yellow;
    font-size : 24px;
    padding : 8px;
    border-radius : 8px;
}
header nav {
    display : flex;
    flex-direction: row;
    justify-content : flex-start;
    gap : 8px;
}
header nav a form button {
   border-style : none;
   background-color : transparent;
}
main {
    display : flex;
    flex-direction: column;
    justify-content : center;
    align-items : center;
}
main .inserimento {
    display : flex;
    flex-direction: column;
    justify-content : center;
    align-items : center;
    padding-top : 80px;
    padding-bottom : 80px;
}
main .inserimento .titolosalvamenu {
    display : flex;
    flex-direction: row;
    justify-content : center;
    align-items : center;
    background-color : purple;
    border-radius : 48px;
    border : 5px solid rgb(109, 8, 8);
}
main .inserimento .titolosalvamenu img {
    width : 108px;
}
main .inserimento .salvamenu {
    background-image: url('pizza-4812083_1280.jpg');
    background-size : 100% 100%;
    background-repeat : no-repeat;
    max-width: fit-content;
}
main .inserimento .salvamenu form {
    position : relative;
    display : flex;
    flex-direction: column;
    justify-content : center;
    align-items : flex-end;
    gap : 12px;
    padding : 12px;
    color : white;
    width : 320px;
}
main .visualizzazione {
    background-image: url("chalkboard-6782643_1920.jpg");
    background-size : 100% 100%;
    background-repeat : no-repeat;
    background-position: fixed;
    box-sizing: border-box;
    border : 1px solid black;
    width : 940px; 
}
main .visualizzazione .lista iframe{
    padding-top : 240px;
    padding-bottom : 60px;
    width : 600px;
}
main .visualizzazione form {
    display : flex;
    flex-direction: column;
    justify-content : center;
    align-items : center;
    gap : 20px;
}
main .informazioni #siamonoi,
main .informazioni #nostrastoria {
    display : flex;
    flex-direction: column;
    justify-content : center;
    align-items : center;
    padding : 20px;
}
main .informazioni #siamonoi h3,
main .informazioni #nostrastoria h3 {
    background-color : beige;
    border : 6px solid rgb(109, 8, 8);
    border-radius : 180px;
    text-align : center;
    padding : 20px;
    font-size : 28px;
}
main .informazioni #siamonoi p,
main .informazioni #nostrastoria p {
    background-color : rgb(158, 158, 143);
    border : 6px solid rgb(64, 7, 102);
    border-radius : 20px;
    text-align : center;
    padding : 20px;
    font-size : 20px;
    width : 50%;
}
footer {
    padding-top: 120px;
}
footer .contatti nav a img{
    max-width : 48px;
}
footer .contatti {
    display : flex;
    flex-direction: row;
    justify-content : space-between;
    align-items : center;
}
footer .contatti .spiegazioni{
    display : flex;
    flex-direction: column;
    justify-content : space-around;
    align-items : center;
}
footer .contatti .ritorno .ritorna {
    position: fixed;
    background-color : yellow;
    padding : 8px;
    border-radius : 8px;
    cursor: pointer;
    bottom: 20px;
    right: 20px;
    display : none;
}