/* light/dark mode preferences */
:root {
  --logo-bg: #cbffff;
  --navigation-bg: #91d5f0;
  --text-color: #000;
}

.dark-mode {
  --logo-bg: #2f5f5f;
  --navigation-bg: #1e3d49;
  --text-color: #fff;
  #darkmode_image, #darkmode_image_mobile, #navigation_mobile_icon {
    filter:invert(1);
  }

}

/* main components */
.headbar, .headbar_mobile {
    background-color: var(--logo-bg);
    margin: 0;
}
.headbar_mobile {
  display: block;
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 999;
}
.headbar {
  display: none;
}
.headbar h1, .headbar_mobile h1 {
    padding: 8px 0;
    margin: 0;
}
.headbar h1 a, .headbar_mobile h1 a
{
  transition: filter 350ms;
}
.headbar h1 a:hover, .headbar_mobile h1 a:hover {
  filter:contrast(0.8);
}
.headbar h1 a:active, .headbar_mobile h1 a:active {
  filter:contrast(0.5);
}
.headbar .navigation {
    overflow: hidden;
    background-color: var(--navigation-bg);
    width: 100%;
}
.headbar .navigation a, .headbar .navigation p {
    float: left;
    display: block;
    background-color: var(--navigation-bg);
    color: var(--text-color);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    margin: 0;
}

/* navigation (desktop) */
.navlogo:link, .navlogo:visited, .navlogo:hover, .navlogo:focus, .navlogo:active {
  color: inherit;
  text-decoration: none;
}

/* dropdown */
.navigation_dropdown {
  float: left;
  overflow: hidden;
}
.navigation_dropdown_content {
  display: none;
  position: absolute;
  margin-top: 48px;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.navigation_dropdown_content a {
    float: none !important;
    display: block;
    background-color: var(--navigation-bg);
    color: var(--text-color);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}
.navigation_dropdown .navigation_dropbtn:hover, .navigation_dropdown .navigation_dropdown_content a:hover, .headbar .navigation a:hover {
  transition: background-color 350ms, color 350ms;
}

/* navigation (mobile) */
.headbar_mobile_top {
  display: grid;
  grid-template-columns: 1fr auto auto;
}
.headbar_mobile_top .logo_mobile {
  font-size: 24px;
  padding-left: 8px;
  text-align: left;
}
.navigation_mobile {
  grid-column: 1 / 4;
  display: none;
}
.navigation_mobile_dropdown_button {
  align-self: center;
  padding: 3.75px 5.5px;
}
.navigation_mobile_dropdown_button:hover {
  background-color: var(--logo-bg);
  transition: background-color 350ms;
}
.navigation_mobile_dropdown_button:hover #navigation_mobile_icon {
  filter: invert(1);
  transition: filter 350ms;
}
.navigation_mobile_dropdown_button:active {
  background-color: #050044;
  transition: background-color 350ms;
}
.headbar_mobile_top .navigation_mobile a, .headbar_mobile_top .navigation_mobile p {
    display: block;
    background-color: var(--navigation-bg);
    color: var(--text-color);
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    margin: 0;
    transition: background-color 350ms, color 350ms;
}

/* hover events */
.headbar .navigation a:hover, .navigation_dropdown:hover .navigation_dropbtn, .navigation_dropdown .navigation_dropdown_content a:hover, .navigation_mobile a:hover {
  background-color: #003ec5;
  color: white;
}
.headbar .navigation a:active, .navigation_dropdown:active .navigation_dropbtn, .navigation_dropdown .navigation_dropdown_content a:active, .navigation_mobile a:active {
  background-color: #050044;
  color: white;
}

/* dark mode button */
.navigation_darkmode {
  display:flex;
  justify-content: flex-end;
}
#darkmode_button, #darkmode_button_mobile {
  background-color: transparent;
  transition: background-color 350ms;
  border: none;
  overflow: hidden;
  width: 48px;
  height: 48px;
}
#darkmode_button_mobile {
  width: 51px;
  height: 51px;
}
#darkmode_button:hover, #darkmode_button_mobile:hover {
  background-color: #003ec5;
  cursor: pointer;
  #darkmode_image, #darkmode_image_mobile {
    filter: invert(1);
  }
}
#darkmode_button:active, #darkmode_button_mobile:active {
  background-color: #050044;
}

/* show the dropdown menu when the user moves the mouse over the dropdown button */
.navigation_dropdown:hover .navigation_dropdown_content {
  display: block;
}

/* switch from desktop/mobile */
@media screen and (min-width: 1024px) {
    .headbar {
      display:block;
    }
    .headbar_mobile {
      display:none;
    }
}