:root {
    /*Button Position*/
    --btn-position: center; /*left/center/right*/
    --btn-left-offset: 1%; /*%, px, em, etc*/
    --btn-right-offset: 1%; /*%, px, em, etc*/
    /*Button Background*/
    --btn-bg-color: white;
    --btn-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
    --btn-border-width: 1px;
    --btn-border-color: lightgrey;
    --btn-border-style: solid;
    --btn-height: 60%;
    --btn-radius: 999px;
    --btn-spacing: 20px;
    --btn-max-height: 90%;
    --btn-bg-hover-color: #2EE59D;
    --btn-hover-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);
    --btn-border-hover-width: 1px;
    --btn-border-hover-color: lightgrey;
    --btn-border-hover-style: solid;
    --btn-nav-transition: all 0.2s ease 0s;
    /*Button Text*/
    --btn-txt-color: rgba(0,0,0,.6);
    --btn-txt-size: 15px;
    --btn-txt-font: ; /*empty for default*/
    --btn-txt-weight: 600;
    --btn-txt-padding: 20px;
    --btn-txt-hover-color: white;
    --btn-txt-hover-size: 15px;
    --btn-txt-hover-weight: 600;
    /*Title Text*/
    --title-txt-size: 22px;
    --title-txt-weight: 600;
    --title-txt-font: ; /*empty for default*/
    --title-txt-color: rgba(0,0,0,.8);
  }
  /*Nav container*/
  .nav-menu-wrapper {
    border-bottom: 1px solid lightgray !important;
    padding-bottom: 20px !important;
  }
  
  /*navigation button div*/
  .nav-menu-wrapper ul.nav-menu:not(.nav-menu-item) {
    width: 15% !important;
    justify-content: var(--btn-position) !important;
    padding-right: var(--btn-right-offset) !important;
    padding-left: var(--btn-left-offset) !important;
  }
  
  /*navigation button background*/
  .nav-menu-wrapper .nav-menu li.nav-menu-item {
    background-color: var(--btn-bg-color) !important;
    height: var(--btn-height) !important;
    max-height: var(--btn-max-height) !important;
    border-radius: var(--btn-radius) !important;
    margin-right: calc(var(--btn-spacing)/4) !important;
    margin-left: calc(var(--btn-spacing)/4) !important;
    border: var(--btn-border-color) var(--btn-border-width) var(--btn-border-style) !important;
    transition: var(--btn-nav-transition) !important;
    box-shadow: var(--btn-shadow) !important;
    flex-grow: 0 !important;
  }
  .nav-menu-wrapper .nav-menu li.nav-menu-item:hover {
    background-color: var(--btn-bg-hover-color) !important;
    border: var(--btn-border-hover-color) var(--btn-border-hover-width) var(--btn-border-hover-style) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--btn-hover-shadow) !important;
  }
  
  /*navigation button text*/
  .nav-menu-wrapper .nav-menu li.nav-menu-item a {
    color: var(--btn-txt-color) !important;
    font-size: var(--btn-txt-size) !important;
    font-weight: var(--btn-txt-weight) !important;
    font-family: var(--btn-txt-font) !important;
    padding: var(--btn-txt-padding) !important;
    transition: var(--btn-nav-transition) !important;
  }
  .nav-menu-wrapper .nav-menu li.nav-menu-item 
  a:hover {
    color: var(--btn-txt-hover-color) !important;
    font-size: var(--btn-txt-hover-size) !important;
    font-weight: var(--btn-txt-hover-weight) !important;
    border-radius: var(--btn-radius) !important;
    background-color: var(--btn-bg-hover-color) !important;
  }
  
  /*Header Text*/
  .nav-menu-wrapper  div.branding > div.title > div > div > p {
    font-size: var(--title-txt-size) !important;
    font-weight: var(--title-txt-weight) !important;
    font-family: var(--title-txt-font) !important;
    color: var(--title-txt-color) !important;
  }