<style>
/* (A) ON BIG SCREEN */
/* (A1) HORIZONTAL MENU */
#hamItems { display: flex; }
#hamItems a { width: 100%; }
 
/* (A2) HIDE HAMBURGER ICON */
#hamNav label, #hamburger { display: none; }

/* (B) ON SMALL SCREEN */
@media only screen and (max-width: 768px) {
  /* (B1) SHOW HAMBURGER ICON */
  #hamNav label { display: inline-block; color: white}
 
  /* (B2) BREAK ITEMS INTO SINGLE COLUMN */
  #hamItems { flex-wrap: wrap; }
 
  /* (B3) TOGGLE SHOW/HIDE */
  #hamItems { display: none; }
  #hamNav input:checked ~ #hamItems { display: flex; }
}

/* (X) NOT IMPORTANT - COSMETICS */
#hamNav label { font-size: 1.5em; }
#hamNav { background: blue; }
#hamNav, #hamItems a {
  padding: 10px;
  color: #fff;
  text-decoration: none;
}
#hamItems a:hover { background: red; }

  main {
    background: white;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  menu {
    background: white;
    padding: 0.25rem;
    
    white-space: nowrap;
  }
  span {
    background: #767775;
    color: #ffffff;
    display: inline-block;
    margin: 0.25rem;
    
  }
img {
    max-width: 50%;
  }

body {
  font-family: Arial, Helvetica, sans-serif;
}

/* Dropdown Button */
.dropbtn {
  background-color: blue;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: black;
  min-width: 260px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: yellow;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: red;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: blue;}
</style>
