/* add to html and modify as needed
  <header class="scrollable">
    <button class="dropbtn lil" onclick="toggleDropdown('div_id')">menu button</button>
  </header>
  <div class="dropmenus">
    <div id = 'div_id' class="dropmenu">
      <div class='lil'>
        <button class='lil'><img></button>
        <button class='lil'><img></button>
      </div>
      <button>menu option</button>
    </div>
  </div>
*/

 /* main containers */
  header, .dropmenus {
    display: block;
    position: sticky;
    top: 0px;
    background-color: #fdfdfd;
    filter:drop-shadow(7px 7px 6px rgba(0, 0, 0, 0.2));
  } .scrollable {text-wrap: nowrap; overflow-x: scroll;}

  /* my profile button */
  .myaccount {
    padding: 16px;
    border: none;
    border-radius: 20px;
  }
  .myaccount img {
    width: 30px;
    float: right;
  }

  /* button that toggles the dropdown */
  .dropbtn {
    background-color: rgb(32, 97, 103);
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
  } .lil {padding: 8px; margin: 2px;}
  
  .dropmenus {top: 45px;} /*container of dropdown menus*/

  /* dropdown menu (hidden by default) */
  .dropmenu {
    display: none;
    background-color: white;
    width: 240px;
    position: absolute;
    z-index: 1;
  }
  
  /* buttons and images inside */
  .dropmenu button {
    background-color: inherit;
    width: 95%;
    padding: 10px;
    transition: background-color ease-in 0.3s, opacity 0.6s ease 0.7s;
  }
  .dropmenu button.special {
    background-color: rgb(32, 97, 103);
    color: white;
  }
  .dropmenu>div.lil {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
  }
  .dropmenu>div.lil>button.lil {
    width: 48%;
  }
  .dropmenu>div.lil>button.lil>img {
    max-width: 99%;
  }

  .dropmenu button:hover {background-color: rgba(40, 90, 154, 0.1);}

  /* Show the dropdown menu when the button is clicked */
  .show {
    display: block;
  }

  /* Logo */
  img#StabenaLogo {
    float: left;
    width: 30%;
    margin: 2vh;
    border-radius: 15px;
    background-color: rgba(0, 0, 0, 0);
    transition: opacity 2s;
  }

  @media only screen and (min-width: 600px) and (max-width: 1000px) {
    img#StabenaLogo {
      width: 15%;
    }
  }
  
  @media only screen and (min-width: 1000px) {
      img#StabenaLogo {
          width: 11%;
      }
  }