* {
	box-sizing: border-box;
}

body {
	background: #A7C1A8;
	font-family: 'Trebuchet MS', Helvetica, sans-serif;
	margin: 0;
}

/* Mobile First View: */

/* Style the header which contains the navigation links */
header {
    background-color: #819A91;
    overflow: hidden;
    font-family: 'Trebuchet MS', Helvetica, sans-serif;
  }
  
  /* Hide the checkbox which we use for the hamburger menu functionality */
  #hamburger_checkbox {
    display: none;
  }
  
  /* Style the image we use as a label for the hamburger menu checkbox */
  #hamburger_image {
    background-color: white;
    display: block;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    width: 10%;
  }
  
  
  /* Show or hide the navigation links depending on whether the hamburger menu checkbox is checked or not */
  input[id="hamburger_checkbox"]:not(:checked) + nav {
    display: none;
  }
  
  /* Style the heading */
  h1 {
    color: #eeefe0;
    float: left;
    padding: 0 20px;
    width: 100%;
  }
  
  
  /* Style the links inside the navigation bar */
  nav a {
    color: #E3DFDE;							
    float: left;
    font-size: 17px;
    padding: 30px 20px;
    text-align: center;
    text-decoration: none;
    width: 100%;
  }
  
  
  /* Change the color of links on hover using mouse */
  nav a:hover {
    background-color: #A7C1A8;
    color: #eeefe0;
  }
  
  /* Change the color of links on focus using tab key */
  nav a:focus {
    background-color: white;
    color: black;
    outline: none;
  }
  
  /* Change the color of the active/current link */
  .active_nav {
    background-color: #A7C1A8;
    color: white;
  }

  
footer {
	background: #819A91;
  color: #E3DFDE;
	padding: 32px;
	text-align: center;
	width: 100%;
  font-family: 'Trebuchet MS', Helvetica, sans-serif;
}
  
   /* For desktop: */
  @media only screen and (min-width: 768px) {
  
        /* Hide the hamburger menu image we use as a label for the hamburger menu checkbox */
        #hamburger_image {
          display: none;
        }
  
        /* Show the navigation links... even if the hamburger menu checkbox is not selected (menu open) */
        input[id="hamburger_checkbox"]:not(:checked) + nav {
          display:block
        }
  
        /* Style the Knitters heading */
        h1 {
          text-align: left;
          width: 390px;
        }
  
        /* Style the navigation bar */
        nav {
          float: right;
        }
  
        /* Style the links inside the navigation bar */
        nav a {
          width: auto;
        }
  }