/* adapted by Keith from: https://www.w3schools.com/howto/howto_css_navbar_icon.asp */
/* Style the navigation bar */
 .navbar {
     width: 100%;
     background-color: #2B2930; /* dark gray */
     overflow: auto;
}
/* Navbar links */
 .navbar a {
     float: left;
     text-align: center;
     padding: 12px;
     color: #FCFCFC; /* almost white */
     text-decoration: none;
     font-size: 20px;
}

/* First link */
 .navbar a#first {
     margin-left: 10%;
}
/* Navbar logo */
 .navbar #logo {
     text-align: center;
     padding: 12px;
     color: #FCFCFC; /* almost white */
     font-size: 20px;
}
/* Navbar links on mouse-over */
 .navbar a:hover {
     background-color: #0B011C; /* dark purple */
}
/* No highlight for logo link */
 .navbar #logo:hover {
     background-color: #2B2930; /* dark gray */
}
/* Current/active navbar link */
 .navbar a.active {
     background-color: #685C7C; /* lavender */
}
/* Make the leaf icon on explore green when active =D */
 .navbar a.active i#explore{
     color: #ACC18A; /* muted green */
}
/* Add responsiveness - will automatically display the navbar vertically instead of horizontally on screens less than 500 pixels */
 @media screen and (max-width: 720px) {
     .navbar a {
         float: none;
         display: block;
    }
    /* First link */
    .navbar a#first {
         margin-left: 0;
    }
}