.menuContainer /* length of menu-bar */ {
  /* 2.5% 0% 0px 0%, 5.5% side margin '24 */;
  background-color: rgba(251, 249, 244, 0);
  border-bottom: 0px solid #0D0A0D;
  border-top: 0px solid #0D0A0D; 
  
  margin: 0 38px 0px 38px;
}


.menuBar /* style for menu-bar + logo */ {
  overflow: hidden;
  
  display: flex; /* none */
  justify-content: space-between;
  align-items: center;
  
  padding: 38.25px 0px 74px 0px;
  
  /* padding: 0px 4px 0px 4px; */
}

.menuBar img /* logo size */ {
  height: 38.5px; /* 20.5px */
  width: auto;
}

.menuLogo /* logo positon .nav-logo */ {
  /* transform: rotate(-12deg); */
  margin-bottom: 0px;
}

.menuLogo:hover /* logo animation .nav-logo */ {
  /*
  cursor: pointer;
  transition: .7s ease-in-out;
  transform: rotate(-372deg); */
}

.navbar, .navbar-contact /* style of menu text bubble  */ { 
  background-color: rgba(0, 193, 113, 0);
  /* border-radius: 30px; */
  display:none; flex
  /*
  padding-left: 30px; 
  padding-right: 30px;
  padding-top: 16px;
  padding-bottom: 16px;  */
}


.navbar a, .navbar-contact a /* style of menu text */  {
  font-family: Arialnb;
  font-size: 21px;
  text-transform: uppercase;

  color: #000000;
  text-decoration: none;
  
  /* transition: border-bottom 0.3s;
  border: 1px solid transparent; */
  
  border-right: 2px solid #0D0A0D;
  border-left: 2px solid #0D0A0D;
  padding: 14px 22px 14px 22px;
}


nav {
  position: fixed;
  top: 0;
  
  /* ensures nav appears off the screen until it's activated */
  left: -100vw; /* -230px */
  
  width: 100vw; /* 230px */
  height: 100vh;
  background: #B286EA;
  
  border-right: 2px solid #0D0A0D;
  /*box-shadow: inset -8px 0 12px -8px rgb(0 0 0 / 30%);*/
  
  font-family: Arialnb;
  font-size: 36px;
  text-transform: uppercase;
  
  /* ensures that the text in the menu remains vertically center aligned */
  display: flex;
  /* makes text stack on top of each other instead of flex default */
  flex-direction: column;
  /* ensures that the text in the menu remains vertically center aligned */
  justify-content: center;
  
  
  transition: left 0.5s;
  z-index: 2;
}

/* runs the function for the nav to shift over on click */
nav.open {
  left: 0;
}


nav a {
  color: #000000;
  text-decoration: none;
  margin-top: 25px;
  margin-left: 32px;
}



nav a:hover {
  /* color: #EAE6DE; E5E1DB E1DDD7 AE9877 
  color: #D4C7AF;
  transition: 0.3s ease-in-out; */
}



#toggleOpen /* .nav-toggle */ {
  /*font-family: Arialnb;
  font-size: 20px;
  text-decoration: none;
  text-transform: uppercase;
  color: #0D0A0D; 7C609F 7F64A0
  
  /* background-color: #00C171;
  border-radius: 30px; */
  
  /* padding-left: 22px;
  padding-right: 22px; */
  
  padding: 11.65px 8.25px 11.65px 8.25px;
  
  

  border-right: 0px solid #0D0A0D;
  background-color: #CAAC3D; /* 8A62D0 FAF3E6 8E69D8  815AAA */
  
  /* 8360A9 815AAA */
  
  display: flex; none
}

#toggleOpen img /* .nav-toggle */ {
  max-height: 13px;
  width: auto;
}

#toggleOpen:hover /* .nav-toggle */ {
  text-decoration: none;
  transition: 0.3s ease-in-out;
  cursor: pointer;
}