/* CORE STYLES */
:root {
    --Primary-color: whitesmoke;
    --Overlay-color: rgb(198 210 222); /*Same as header & footer*/
    --MenuBackground-color: rgba(201, 192, 255, 0.959);
    --MenuBackground-color: rgb(198 210 222);
    --MenuBackground-opacity: 1.0;
    --Menu-speed: 0.5s;
  }
  
  /* MENU (3 bars) STYLES */
  .MenuWrap {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    display: none;
  }
  .MenuWrap .Toggler {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    cursor: pointer;
    width: 50px;
    height: 50px;
    opacity: 0;
  }
  
  /*---------------------------------*/
  /*BEGIN Make a three line Hamburger*/
  .MenuWrap .Hamburger {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: var(--HamburgerWidthHeight);
    height: var(--HamburgerWidthHeight);
    padding: 18px 16px 10px 16px;
    background: var(--Primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Hamburger Line */
  .MenuWrap .Hamburger > div {
    position: relative;
    flex: none;
    width: 100%;
    height: 3px;
    background: var(--HamburgerColor); /* bar colors*/
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
  }
  
  /* Hamburger Lines - Top & Bottom */
  .MenuWrap .Hamburger > div::before,
  .MenuWrap .Hamburger > div::after {
    content: '';
    position: absolute;
    z-index: 1;
    top: -10px;
    width: 100%;
    height: 3px;
    background: inherit;
  }
  
  /* Moves Line Down */
  .MenuWrap .Hamburger > div::after {
    top: 10px;
  }
  /*END Make a three line Hamburger*/
  /*-------------------------------*/
  
  /* BEGIN Toggler Animation -- Allows the... */
  /* ...three lines to turn into an animated X */
  .MenuWrap .Toggler:checked + .Hamburger > div {
    transform: rotate(135deg);
  }
  /* Turns Lines Into X */
  .MenuWrap .Toggler:checked + .Hamburger > div:before,
  .MenuWrap .Toggler:checked + .Hamburger > div:after {
    top: 0;
    transform: rotate(90deg);
  }
  /* Rotate On Hover When Checked */
  .MenuWrap .Toggler:checked:hover + .Hamburger > div {
    transform: rotate(1305deg); /*was 225deg*/
    transition-duration: .5s; /*Not needed*/
  }
  /*END Toggler animation*/
  /*--------------------------------*/
  
  /*--------------------------------*/
  /* BEGIN Show Menu */
  .MenuWrap .Toggler:checked ~ .Menu {
    visibility: visible;
    /*background-color: #CECECE; /*momentary color during transition*/
  }
  .MenuWrap .Toggler:checked ~ .Menu > div {
    transform: scale(1.1);
    transition-duration: var(--Menu-speed);
  }
  .MenuWrap .Toggler:checked ~ .Menu > div > div {
    opacity: 1;
    transition:  opacity 0.1s ease;
  }
  .MenuWrap .Menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 190px 0px 150px 185px;
  }
  .MenuWrap .Menu > div {
    background: var(--Overlay-color);
    opacity: 0.95;
    border-radius: 10%;
    width: 150vw; /*was 200*/
    height: 350vw; /*was 200*/
    display: flex;
    flex: none;
    align-items: center;
  /*move menu around*/
    justify-content: left; /*was center*/
    padding-left: 210px; /*was deleted*/
    margin-top: -500px; /*was deleted*/
  /*end of move around*/
    transform: scale(0);
    transition: all var(--Menu-speed) ease;
  }
  .MenuWrap .Menu > div > div {
    text-align: center;
    max-width: 90vw;
    max-height: 100vh;
    opacity: 0.0;
    transition: opacity var(--Menu-speed) ease;
  /*adjust menu box*/
    border: blue solid 0px;
    border-radius: 0%;
    box-shadow: #424242 4px 4px 2px;
  /*end adjust menu box*/
  }
  .MenuWrap .Menu > div > div > ul > li {
    list-style: none;
    color: blue;
    font-weight: 800;
    /* font-size: 1.5rem; */
    padding: 19px;
    background-color: var(--MenuBackground-color);
    opacity: var(--MenuBackground-opacity);
  }
  .MenuWrap .Menu > div > div > ul > li > a {
    font-size: 1.2rem;
    font-weight: 800;
    color: inherit;
    text-decoration: none;
    transition: color 0.1s ease;
  }
  /* END Show Menu */
  /*--------------------------------*/
  /* .MenuListItem li {
    height: 600px;
  } */
  /*--------------------------------*/
  .MenuListItemLine hr {
    position: relative;
    border: none;
    height: 2px;
    width: 110px;
    background: blue;
    margin: 18px 0px 0px 0px;
    text-align: left;
  }
  
  /*----------------------------------*/
  
  /*END CSS*/