@import 'styles.css';

@media screen and (max-width: 800px) {
  #menu-wraps {
      display: block;
      height: 300px;
      left: 0;
      position: fixed;
      top: .5rem;
      width: 250px;
      z-index: 5;
  }

  #menu-wraps .toggler {
      background-color: var(--main-black);
      cursor: pointer;
      height: 50px;
      left: .5rem;
      opacity: 0;
      position: absolute;
      top: .4rem;
      width: 50px;
      z-index: 2;
  }

  #menu-wraps .hamburger {
      align-items: center;
      background: transparent;
      display: flex;
      height: 60px;
      justify-content: center;
      left: .5rem;
      padding: 1rem;
      position: absolute;
      top: .4rem;
      width: 60px;
      z-index: 1;
  }

  #menu-wraps ul {
      flex-flow: column nowrap;
      margin-top: 2em;
  }

  #menu-wraps li {
      margin-bottom: 1rem;
  }

  #menu-wraps a {
      color: var(--main-black);
  }

  /**************
  Hamburger lines
  ****************/
  #menu-wraps .hamburger > div {
      background-color: var(--main-white);
      display: flex;
      height: 2px;
      position: relative;
      transition: all .4s ease;
      width: 100%;
  }

  #menu-wraps .hamburger > div::before,
  #menu-wraps .hamburger > div::after {
      background: inherit;
      content: "";
      height: 2px;
      position: absolute;
      top: -8px;
      width: 100%;
      z-index: 1;
  }

  #menu-wraps .hamburger > div::after {
      top: 8px;
  }

  /*********
  Animation
  **********/
  #menu-wraps .toggler:checked + .hamburger > div {
      background-color: var(--main-white);
      transform: rotate(135deg);
  }

  /*Turn into X*/
  #menu-wraps .toggler:checked + .hamburger > div::before,
  #menu-wraps .toggler:checked + .hamburger > div::after {
      top:0;
      transform: rotate(90deg);
  }

  #menu-wraps .menu {
      align-items: center;
      left: 0;
      justify-content: center;
      overflow: hidden;
      position: fixed;
      top: 4rem;
      visibility: hidden;
      width: 100%;
  }

  #menu-wraps .menu > div {
      align-items: center;
      background: var(--main-white);
      display: flex;
      flex: none;
      height: 250px;
      justify-content: center;
      transition: transform .4s ease;
      transform: translate(-100%, 0);
      width: 230px;
      z-index: 10;
  }

  #menu-wraps .menu > div > div {
      opacity: 0; 
      transition: opacity .4s ease;
  }

  /*Show menu*/
  #menu-wraps .toggler:checked ~ .menu {
      visibility: visible;
  }

  #menu-wraps .toggler:checked ~ .menu > div  {
      transform: scale(1); 
      transition-duration: var(--menu-speed);
  }

}