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

      .menu {
        overflow: hidden;
        background-color: #333;
      }

      .menu a {
        float: left;
        display: block;
        color: #f2f2f2;
        text-align: center;
        padding: 10px 16px;
        text-decoration: none;
        font-size: 17px;
        border-radius: 20px
      }

      .menu a:hover {
        background-color: #deeb6a;
         color: black;
      }

      .menu a.active {
        background-color: #04AA6D;
        color: white;
      }

      .menu .icon {
        display: none;
      }
      img {
          max-width: 100%; /* La imagen no superará el ancho de su contenedor */
          height: auto;    /* Mantiene la proporción de la imagen */
      }

      @media screen and (max-width: 600px) {
        .menu a:not(:first-child) {display: none;}
        .menu a.icon {
          float: right;
          display: block;
        }
      }

      @media screen and (max-width: 600px) {
        .menu.responsive {position: relative;}
        .menu.responsive .icon {
          position: absolute;
          right: 0;
          top: 0;
        }
        
        .menu.responsive a {
          float: none;
          display: block;
          text-align: left;
          
        }
      }