header nav {
  width: 100%;
  height: 70px;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  position: fixed;

  z-index: 999;

  background: var(--color-bg);

  font-size: 1.2em;
  font-weight: 600;
  text-align: center;
}

header nav + * {
  padding-top: 70px;
}

header nav .nav-icon {
  font-size: 150%;
  padding: 5px 20px;
  display: flex;
  align-items: center;
}

header nav .nav-item {
  height: 60px;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  padding: 5px 20px;

  cursor: pointer;

  position: relative;
}

header nav .nav-item-right {
  margin-left: auto;
}

header nav .nav-group {
  display: flex;
  position: relative;
}

header nav .nav-group-right {
  justify-content: flex-end;
  margin-left: auto;
}

header nav .nav-button {
  width: 40px;
}

header nav .nav-drop-down {
  top: 70px;
  position: absolute;

  background: inherit;
  width: 100%;
  display: none;

  z-index: 1000;

  box-shadow: 0px 7px 10px 1px rgba(0, 0, 0, 0.2);
}

/*
 * Things for on hover sub-menus.
 */
header nav .nav-hover-dropdown {
  margin: 0;
  width: 100%;
  font-size: 90%;
}

header nav .nav-group .nav-hover-dropdown {
  position: absolute;
  top: 70px;

  border: 1px solid rgba(211, 211, 211, 1);
  border-top: 0;
  display: none;
}

header nav .nav-group:hover .nav-hover-dropdown {
  display: block;
}

header nav .nav-hover-dropdown a {
  padding: 10px 20px;
  display: block;
  text-align: left;
}

header nav .nav-drop-down .nav-hover-dropdown a {
  padding-left: 35px;
}

/* --------- smartphone ----------- */
@media (max-width: 1071px) {
  .collapse > :not(.nav-drop-down).nav-group:not(.nav-nohide) {
    display: none;
  }

  .nav-drop-down * {
    align-content: flex-start !important;
    text-align: left !important;
  }

  .nav-drop-down .nav-item {
    justify-content: flex-start;
    height: 50px;
  }

  .nav-drop-down .nav-item > * {
    margin: 0;
  }

  .nav-drop-down.extended {
    display: block;
  }

  .collapse-button {
    display: flex;
    height: 27px !important;
    width: 32px !important;
    margin-top: 24.5px !important;
    margin-bottom: 18.5px !important;
    margin-right: 20px;
    padding: 0px !important;
  }
}

@media (min-width: 1072px) {

  .nav-drop-down {
    display: none;
  }

  .collapse-button {
    display: none !important;
  }
}

footer {
  display: flex;
  flex-direction: column;
  justify-content: center;

  padding-top: 1% !important;

  width: 100%;

  font-size: 0.75em;
  font-weight: 300;
  text-align: center;

  background: #171921;
  color: #ddd;

  box-shadow: 0px -1px 10px 6px #171921;

  position: relative;
  z-index: 1;
}

footer .flex {
  justify-content: center;
}

footer .flex > * {
  margin: 1% 1%;
  min-width: 150px;
  max-width: 30%;
}

footer a.link {
  color: var(--color-link-dark);
}

footer h2 {
  font-size: 1.3em;
}

footer > * {
  margin: 0.4% 1%;
}

footer * {
  font-weight: inherit;
}

@media (max-width: 1071px) {
  footer > * {
    margin: 10px 10px;
  }

  footer .flex {
    flex-direction: column;
    align-items: center;
  }

  footer .flex {
    flex-wrap: wrap;
  }
}

/* ================================
   EZ LIST BRANDING
   ================================ */

.ezl-logo {
    font-family: "Courier New", monospace;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -2px;

    color: #7b2cff !important;
    text-decoration: none !important;

    text-shadow:
        2px 2px 0 #22125a,
        0 0 8px rgba(123, 44, 255, 0.25);
}

.ezl-logo:hover {
    color: #914cff !important;
}


/* =========================================================
   EZ LIST THEME
   ========================================================= */

html[data-ezl-theme="light"] header,
html[data-ezl-theme="light"] header nav,
html[data-ezl-theme="light"] header nav .nav-group,
html[data-ezl-theme="light"] header nav .nav-icon,
html[data-ezl-theme="light"] header nav .nav-item,
html[data-ezl-theme="light"] header nav .nav-drop-down {
    background-color: #ffffff !important;
}

html[data-ezl-theme="dark"] header,
html[data-ezl-theme="dark"] header nav,
html[data-ezl-theme="dark"] header nav .nav-group,
html[data-ezl-theme="dark"] header nav .nav-icon,
html[data-ezl-theme="dark"] header nav .nav-item,
html[data-ezl-theme="dark"] header nav .nav-drop-down {
    background-color: #1b1e29 !important;
}

html[data-ezl-theme="dark"] header nav a,
html[data-ezl-theme="dark"] header nav .nav-item,
html[data-ezl-theme="dark"] header nav span,
html[data-ezl-theme="dark"] header nav i {
    color: #e9eaf2 !important;
}

html[data-ezl-theme="light"] header nav a,
html[data-ezl-theme="light"] header nav .nav-item,
html[data-ezl-theme="light"] header nav span,
html[data-ezl-theme="light"] header nav i {
    color: #2a2a33 !important;
}

/* Keep EZL purple regardless of theme */
html[data-ezl-theme] header nav .ezl-logo {
    color: #7b2cff !important;
}

/* Dropdown menus */
html[data-ezl-theme="dark"] header nav .nav-hover-dropdown {
    background: #1b1e29 !important;
    border-color: #363a4d !important;
}

html[data-ezl-theme="light"] header nav .nav-hover-dropdown {
    background: #ffffff !important;
    border-color: #cfd4e2 !important;
}

/* EZ List navbar logo */
.ezl-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.ezl-logo-image {
    display: block;
    width: 165px;
    height: 42px;
    object-fit: contain;
    object-position: left center;
}

/* EZ List cropped logo sizing */
.ezl-logo-image {
    width: 175px;
    height: 44px;
    object-fit: contain;
}