* { 
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  }
  body {
  background-image: url(img/siena.jpg);
  background-repeat: no-repeat;
  background-size: cover; 
  min-height: 100vh;
  }
    .piedi {
    color: white;
    font-style: italic;
    text-align: left;
    margin: 0px 15px 15px 15px;
    }
    footer a {
    color: white;
    }
    footer a:hover {
    color: white;
    }
    main {
    flex: 1;
    }
      .flexit {
      min-height: 100vh;
      display: flex;
      flex-direction: column; 
      }     
        .nelmezzo {
        text-align: center; 
        margin: 2em;  
        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-weight: 400; 
        }   
          .sottotitolo { 
          font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
          margin: 10px 15px 0px 15px;
          }   
            .ricette {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;
            padding: 5em;
            }
            .ricetta {
            text-decoration: none;
            height: 40vh; 
            max-height: 21em;
            width: 80vw;
            max-width: 21em;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center ; 
            transition: all 1s ease;
            }
            .ricetta:hover {
            transform: scale(1.15);
            filter: brightness(1.3); 
            }
              span {
              font-size: 100%;
              font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
              text-shadow: 5px 5px 3px gold;
              }
                .logo {
                width: 6em;
                height: auto;
                float: right;
                margin-top: -2.4em;
                margin-right: 0;
                margin-left: auto;
                } 
                  nav {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  padding: 1.2em 1.3em; 
                  }
                  nav ul {
                  display: flex;
                  list-style: none;
                  margin: 0;
                  padding: 0;
                  }
                  nav li {
                  margin: 0;
                  }
                  nav li a {
                  display: block;
                  text-decoration: none;
                  font-size: 1.3em;
                  color: black;
                  padding: 1em 1.2em;
                  }
                  nav li a:hover {
                  background-color: brown;
                  }
                    .box {
                    background-color:rgba(196, 157, 15, 0.781);
                    display: flex;
                    flex-direction: column;
                    margin: 0 20%;
                    padding: 1em 1em; 
                    }
                      section ul, 
                      section ol {
                      padding-left: 1.5em;
                      margin-top: 1em;
                      margin-bottom: 1em;
                      }
                      section {
                      margin: 20%;
                      margin-top: 0;
                      }
                      ol li{
                      margin-bottom:10px;
                      }
                        .contenitore {
                        display: flex;
                        justify-content: space-between;
                        flex-wrap: wrap;
                        }
                        .contenitore1 {
                        height: 20vh; 
                        max-height: 21em;
                        width: 80vw;
                        max-width: 21em;
                        border-radius: 10%;
                        }
                        .contenitore2 {
                        height: 20vh;
                        max-height: 14em;
                        width: 100%;
                        max-width: 18em;
                        margin-right: 5em;
                        margin-top: 10em;
                        border-radius: 10%;
                        margin-left: 1em;
                        }
                          .box2 {
                            display: flex;
                            flex-wrap: wrap;             
                            gap: 2em;                   
                            margin: 0 20%;
                            padding: 1em;
                            background-color: rgba(196, 157, 15, 0.78);
                          }
                          .boximg {
                            flex: 0 1 40%;               
                            order: 2;              
                          }
                          .boximg1 {
                            width: 100%;
                            height: auto;
                            border-radius: 8px;          
                          }
                          .boxtext {
                            flex: 2 1 50%;               
                            line-height: 1.5;
                          }

          @media (max-width: 768px) {
          .logo {
          display: none;
          }
          .sottotitolo{
          font-size: 70%;
          }
          nav {
          padding: 0;
          } 
          .contenitore {
          justify-content: center;
          }
          .contenitore2 {
            margin: 0;
            margin-top: 3em;
          }
          .ricette {
          flex-direction: column;      
          align-items: center; 
          padding: 0;
          }
          .ricetta {
          margin-bottom: 2rem;          
          }
          .box2 .box {
            margin: 0 5%;
          }
          .boximg1{
          width: 25vh;
          }
          }