/* mobile */
header{
    background-color:#260801 /* Color Theme Swatches in Hex */
/* .Fashion-1-hex { color: #D99E6A; }
.Fashion-2-hex { color: #401F0C; }
.Fashion-3-hex { color: #A66641; }
.Fashion-4-hex { color: #F2BEA0; }
.Fashion-5-hex { color: #260801; } */


;
   overflow: hidden;
   border-radius: 5px;
}
h1{
    color: #F2BEA0;
    float: left;
    padding: 0px 20px;
    float: left;
    text-align: center;
    width: 100%;
}
#hamburger_checkbox{
    display: none;
}
#hamburger_image{
    background-color: #F2BEA0;
    display: block;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    height: 40px;
    width: 40px;
}
/* show or hide the menu */
#hamburger_checkbox:not(:checked) + nav{
    display: none;
}

/* nav a:not(:active):hover,
nav a:focus,
nav a:active {
  background-color: #1A1F24;
  outline: none;
}

nav a::before {
  content: "";
  position: absolute;
  top: 5px;
  left: -10px;
  width: 5px;
  height: 80%;
  background-color: #2F81F7;
  border-radius: 5px;
  opacity: 0;
}

nav a:focus::before,
nav a:active::before {
  opacity: 1;
} */
 nav a{
    color: #F2BEA0;
    float: left;
    font-size: 17px;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    width: 100%;
}
nav a:hover{
    background-color: #D99E6A;
    color: #260801;
    
}

nav a:focus {
    background-color: #ddd;
    color: black;
    outline: none;
}
.active_nav{
    background-color: #401F0C;
    color: white;
} 
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    #hamburger_image{
        display: none;
    }
    #hamburger_checkbox:not(:checked) + nav{
        display: block;
    }
    h1{
        text-align: left;
        width: 390px;
    }
    nav{
        float: right;
    }
    nav a{
        width: auto;
    }
}