:root {
  --header-height: 2rem;
  
  --navBar-background: #292D30; /* Vintage-beach-5 */
  --navBar-stroke: #C7AF3F; /* Vintage-beach-4 */
  --navBar-fill:  #C7AF3F;  /* Vintage-beach-4 */
  --navBar-hover: #8AB8A2;  /* Vintage-beach-2 */
  --navBar-border: #E2E8F0;
  --navBar-text: #e0e0e0;
  --navMenu-text: #505050;
  --navMenu-radius: 0.2rem;
  --navmenu-fade-duration:200ms;
  --background-primary: #f0f0f8;
  --border-primary: #cdcdcd;
  --shadow-01: 0 1px 2px #2b2a330d;
  --shadow-02: 0 1px 6px #2b2a331a;
}

/* Color Theme Swatches in Hex */
.Alien-Vintage-220915-1-hex { color: #2F3642; }
.Alien-Vintage-220915-2-hex { color: #4B4C56; }
.Alien-Vintage-220915-3-hex { color: #B8CCB8; }
.Alien-Vintage-220915-4-hex { color: #A78F6F; }
.Alien-Vintage-220915-5-hex { color: #D85C51; }

/* Color Theme Swatches in RGBA */
.Alien-Vintage-220915-1-rgba { color: rgba(47, 54, 66, 1); }
.Alien-Vintage-220915-2-rgba { color: rgba(75, 75, 86, 1); }
.Alien-Vintage-220915-3-rgba { color: rgba(184, 204, 184, 1); }
.Alien-Vintage-220915-4-rgba { color: rgba(167, 142, 110, 1); }
.Alien-Vintage-220915-5-rgba { color: rgba(216, 91, 80, 1); }

/* Color Theme Swatches in HSLA */
.Alien-Vintage-220915-1-hsla { color: hsla(217, 16, 22, 1); }
.Alien-Vintage-220915-2-hsla { color: hsla(234, 6, 31, 1); }
.Alien-Vintage-220915-3-hsla { color: hsla(120, 16, 76, 1); }
.Alien-Vintage-220915-4-hsla { color: hsla(34, 24, 54, 1); }
.Alien-Vintage-220915-5-hsla { color: hsla(4, 63, 58, 1); }
/* ################# */
/* Color Theme Swatches in Hex */
.Vintage-beach-1-hex { color: #1C4249; }
.Vintage-beach-2-hex { color: #8AB8A2; }
.Vintage-beach-3-hex { color: #FAFFDB; }
.Vintage-beach-4-hex { color: #C7AF3F; }
.Vintage-beach-5-hex { color: #292D30; }

/* Color Theme Swatches in RGBA */
.Vintage-beach-1-rgba { color: rgba(28, 66, 73, 1); }
.Vintage-beach-2-rgba { color: rgba(138, 183, 162, 1); }
.Vintage-beach-3-rgba { color: rgba(250, 255, 219, 1); }
.Vintage-beach-4-rgba { color: rgba(198, 175, 63, 1); }
.Vintage-beach-5-rgba { color: rgba(40, 45, 48, 1); }

/* Color Theme Swatches in HSLA */
.Vintage-beach-1-hsla { color: hsla(189, 44, 19, 1); }
.Vintage-beach-2-hsla { color: hsla(151, 24, 63, 1); }
.Vintage-beach-3-hsla { color: hsla(68, 100, 92, 1); }
.Vintage-beach-4-hsla { color: hsla(49, 54, 51, 1); }
.Vintage-beach-5-hsla { color: hsla(203, 8, 17, 1); }

.ymmvMainMenuHeader {
  height:var(--header-height);
  width: 100%;
  position: sticky;
  top: 0px;
  left: 0px;
  align-content:center;
  margin-top: 0px;
  background-color:var(--navBar-background);
  border-bottom: 2px solid var(--navBar-border);
  font-family: sans-serif;
  font-size: min(1.0rem, 110%);
  z-index: var(--zindex-stickyNavBar,1040);
}
.ymmvMainMenuNavbar {
  width: fit-content;
  margin:0px;
  padding:0px;
  align-content:inherit;
  font-size:14px;
  font-weight:bold;
  z-index: var(--zindex-stickyNavBar,1040);
  & menu {
    color:var(--navBar-text);  
    margin:0;
    padding:0;
    align-content:inherit;
    list-style:none;
    display:flex;
    align-items:center;
    float:left;
    stroke: var(--navBar-stroke);
    fill:var(--navBar-fill);
    & li {
      list-style:inherit;
      float:inherit;
      /* top | left and right | bottom */
      margin:0px 4px 0px;
      display:inherit;
    }
  }
  & button {
    background-color:transparent;
    border:none;
    color:inherit;
    font-size:inherit;
    font-weight:inherit;
    display:inherit;
    align-items:center;
  }
  & svg {
    background-color:transparent;
    stroke:inherit;
    fill:inherit;
    display:inline;
    width:16px;
    height:16px;;
  }
  & .navBarItem:hover {
    color: var(--navBar-hover);
    stroke:var(--navBar-hover);
    fill:var(--navBar-hover);
  }
  & .navBarItem.activeItem {
    color: var(--navBar-hover);
    stroke:var(--navBar-hover);
    fill:var(--navBar-hover);
  }
}
.ymmvMainMenuNavbar div.navMenu {
  display:none;
  float:none;
  list-style:disc;
  position:absolute;
  height:fit-content;
  color: var(--navMenu-text);
  background-color: var(--navBar-text);
  border: 1px solid var(--border-primary);
  border-radius: var(--navMenu-radius);
  box-shadow: var(--shadow-02);
  padding: 0px 0px 0.2rem;
  z-index: inherit;
  & .navMenuTitle {
    display:inline-block;
    text-align:center;
  }
  & .navMenuClose {
     display:inline-block;
     text-align:right;
     border: 1px solid #90b0e0;
     border-radius: var(--navMenu-radius);
  }
  & .navMenuClose:hover {
    background-color:var(--navBar-hover);
    cursor: pointer;
  }
  & label {
    padding: 0.1rem 1rem 0px 0.5rem;
    border-radius: var(--navMenu-radius);
  }
  & label:hover {
    background-color:var(--navBar-hover);
    cursor: pointer;
  }
}
div.navMenu.showMenu {
    display:block;
}