/*   How To Make a Responsive Hamburger Menu [CSS] by Warren Davies  https://alvarotrigo.com/blog/hamburger-menu-css-responsive/   */
/*  cabin font style  */
  /*   @import url('https://fonts.googleapis.com/css2?family=Cabin&display=swap');   */

body {
  padding: 0px;
  margin: 0px;
  font-size: 16px;
  min-height: 200vh;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

/*   hamburger bars icon   */
.overlay{
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s, visibility .35s, height .35s;
    overflow: hidden;
    background: black;
    z-index: -1;
}

#main-menu {
  display: block;
  height: 100px;
  width: 100%;
  background: #36454F;   /* blue-magenta (purple)  #3D0E61; */
  margin: 0px;
  z-index: 5;
}

#main-menu ul {
  max-width: 800px;
  width: 100%;
  height: 100%;
  margin: 0px auto;
  padding: 0px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  z-index: 5;
}

#main-menu li {
  list-style-type: none;
  font-size: 100%;  /* ~180% 1.8rem */
}

#main-menu a {
  color: #000000;   /* black */  /* light cyan #B9FAF8*/
  font-size: 100%;  /* ~150% 1.5rem */
  text-decoration: none;
}

#main-menu a:hover {
  color: #FF6700;  /* #FF6700 neon orange */  /*  #EB7600;  darkish golden brown  */
	/* text-decoration: none; */
  text-decoration: underline;
}

#hamburger-input{
  display: none;
}

#hamburger-menu {
    position: fixed;
    top: 15px;
    right: 15px;
    width: 35px;
    height: 35px;
    display: none;
    border: none;
    padding: 0px;
    margin: 0px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    background: linear-gradient(
      to bottom,
      #3D0E61, #3D0E61 20%,
      white 20%, white 40%,
      #3D0E61 40%, #3D0E61 60%,
      white 60%, white 80%,
      #3D0E61 80%, #3D0E61 100%
    );
}

/*  sets sidebar menu position to off screen by -250px (size = 200px), visibilty to hidden  */
#hamburger-menu #sidebar-menu {
    visibilty: hidden;
    position: fixed;
    top: 0;
    right: -250px;
    width: 200px;
    height: 100%;
    background-color: #DCDCDC;   /* Gainsboro pale med grey */  /* blue-magenta (purple)  #3D0E61;  */
    transition: 0.3s;
    padding: 10px 10px 10px 10px;
    box-sizing: border-box;
}

#hamburger-menu h3 {
  color: #000000;    /* black */  /*  lighter cyan  #E1FFFF  */   /* color: #B9FAF8;  light cyan */
  font-size: 180%;  /* ~180% 1.8rem */
}

#hamburger-menu ul {
  padding-left: 0px;
}

#hamburger-menu li {
  list-style-type: none;
  line-height: 160%;  /* ~200% 2.2rem */
  color: #000000;    /* black */  /*  lighter cyan */
  font-size: 100%;  /* ~120% 1.2rem */
  font-weight: bold;
  text-decoration: none;
}

#hamburger-menu a {
  color: #0000cd;    /* medium blue */  /* light cyan #B9FAF8 */
  font-size: 100%;  /* ~120% 1.2rem */
  text-decoration: none;
}

#hamburger-menu a:hover {
  color: #FF6700;  /* #FF6700 neon orange */  /*  #EB7600;  darkish golden brown  */
	/* text-decoration: none; */
  text-decoration: underline;
}

#hamburger-input:checked + #hamburger-menu #sidebar-menu {
    visibility: visible;
    right: 0;
}
#hamburger-input:checked ~ .overlay{
   visibility: visible;
  opacity: 0.4;
}

/*  Display up to 750 px width screens as hamburger menu then across top for 750+ px screens   */

/*  @media screen and (max-width: 750px) {
  #main-menu {
    display: none;
  }
  #hamburger-menu {
    display: inline;
  }
}    */

@media screen {
  #main-menu {
    display: none;
  }
  #hamburger-menu {
    display: inline;
  }
}


/*  Adding Functionality to the Hamburger Menu with CSS
So, how do you make the responsive hamburger menu actually work, without using JavaScript? How do we get a real Hamburger Menu CSS-styled?

We will use a hidden checkbox together with the :checked pseudo-class. It's a small hack to make sure our checkbox not only works on desktop computers but also on touch screen devices, where focusing elements is not a thing.

But... how do make a checkbox change its :checked status whene it's not visible? By using a label element for that checkbox and showing that label element instead.

We will style the label in a way that it looks like a burger menu, so when someone clicks on it, the hidden checkbox status will also change.

This way, we are able to conditioanlly trigger CSS changes in other elements by using the :checked pseudo-class.


Two things to note here:
Notice how we are using the combinator + symbol in our CSS. This is a combinator symbol that allows us to select inmediate siblings to the first element.
We are also using the ~ symbol. This allows us to select non inmediate siblings. And we need to use it because .overlay is not inmediately after #hamburger-input.

Notice the styles we've applied. We set visibility to visible (always a good idea if you want people to see things!), and set the left property to 0 - this will bring it into view (remember it was -250px previously).

Using Transition to Slide the Menu into View
As it stands, this would make the CSS Hamburger menu appear instantly on the screen. But it's much cooler to have it slide in from the left. To do that, we apply a transition to the #sidebar-menu element:

transition: 0.3s;    This means it'll take 0.3 seconds to slide in - you can change this to fit your preferences.

If the user wants to close the menu, they just need to click or tap on anything outside the menu itself - a common and intuitive way to do it.


Responsive CSS hamburger menu

If the visitor has a wide enough screen, we'll show them a full-width nav bar.
If they have a smaller screen, we'll show them the CSS hamburger menu.

Because the hamburger icon is a block element, this navbar will push it out of position - so let's make sure it stays in the top left of the screen by adding the following code to #hamburger-menu: position: fixed;
top: 20px;
left: 20px;

Making the Hamburger Menu Responsive with CSS
We'll use a media query for this.

We need to choose a breakpoint - a screen width that will cause the display to switch between the full-width menu and the responsive CSS hamburger menu.

The width you choose will be unique to you - if you have lots of menu items, it'll need to be wider. For this example, I'll go with 750px:
@media screen and (max-width: 750px) {
  #main-menu {
    display: none;
  }
  #hamburger-menu {
    display: inline;
  }
}

When the screen is smaller than 750px, these styles will be applied.
Need to hide the responsive hamburger menu (CSS) when the screen is wider than 750px. To do that, we just change display: block; to display: none in #hamburger-menu`. So it will be hidden by default.
Display moves to horizonal across the top of the screen.

*/