/* Mobile First View */
 header {
    background-color: rgb(255, 253, 250);
    overflow: hidden;
 }

 header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 100;
   background-color: rgb(255, 253, 250);
 }
 

    h1 {
        color: #990000;
        float: left;
        padding: 0 40px;
        text-align: left;
        width: 100%;
        font-size: 250%;
    }

header:hover {
    background-color: rgb(255, 253, 250);
    color: rgb(255, 253, 250);
    }

 #hamburger_checkbox {
    display: none;
 }
 #hamburger_image {
    background-color: rgb(255, 253, 250);
    display: block;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    width: 10%;

 }


 header {
   position: relative; /* allows positioning of elements inside */
 }
 
 #heart2 {
   width: 50%;           /* makes it 50% smaller — relative to its original or container size */
   max-width: 25px;     /* optional: cap the max size if needed */
   position: absolute;   /* lets you move it freely inside the header */
   top: 15px;     /* adds 5px space from the top */
  right: 15px;   /* adds 5px space from the right */
}

/* divider css instead of <hr> */
 .divider {
   height: 1px;
   background-color: #ccc;
   margin: 100px 5px;
   width: calc(100% - 10px);
   display: block;
 }
 


 /* Show or hide the menu */
 #hamburger_checkbox:not(:checked) + nav {
    display: none;
 }

 nav a {
    color: #990000;
    font-weight: bold;
    float: left;
    font-size: 10px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    padding: 35px 20px 10px 20px;
    text-align: center;
    text-decoration: none;
    width: 100%;

 }

 /* invert colours on mouse hover */
 nav a:hover {
    background-color:  #990000;
    color: #FEF1DC;
 }

  /* invert colours on tab key focus */
 nav a:focus {
    background-color:  #990000;
    color: #FEF1DC;
    outline: none;
 }
   /* make the current link highlight in contrast color */
 .active_nav {
    background-color:  #990000
    
 }

 /* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
   /* hide the hamburger icon */
    #hamburger_image{
        display: none;
    }
    /* always show the nav links */
    #hamburger_checkbox:not(:checked) + nav {
        display: block;
    }
    h1{
        text-align: left;
        width: 390px;
    }
    nav {
        float: right;
    }
    nav a { width: auto;
    }
}