/* Menu Button */
#menu-btn {
    /* 
    Start Tweakable Presets
    */
    --animation-duration: 0.6s;
    --animation-timing-function: ease-in-out;
    --bar-color: #6153E4;
    --btn-size: 45px; 
    /*
    End Tweakable Presets 
    */
    --bar-spacing: calc(var(--btn-size) * 0.15);
    background: 0;
    border: 0;
    display: flex;
    flex-direction: column;
    gap: var(--bar-spacing);
    height: var(--btn-size);
    justify-content: center;
    padding: 0;
    transition:
      calc(var(--animation-duration) / 2) 
      transform 
      var(--animation-timing-function);
    width: var(--btn-size);
  }
  
  /* bars */
  #menu-btn span {
    --bar-height: calc(var(--btn-size) * 0.05);
    animation-duration: var(--animation-duration);
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
    background: var(--bar-color);
    border-radius: var(--bar-height);
    height: var(--bar-height);
    width: 100%;
  }
  
  /* to x animation */
  #menu-btn[data-state="x"] { transform: rotate(-90deg);  }
  #menu-btn[data-state="x"] span:nth-child(1) { animation-name: to-x-top; }
  #menu-btn[data-state="x"] span:nth-child(2) { animation-name: to-x-mid; }
  #menu-btn[data-state="x"] span:nth-child(3) { animation-name: to-x-btm; }
  @keyframes to-x-top {
    0% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(calc(var(--bar-height) + var(--bar-spacing))) rotate(0); }
    100% { transform: translateY(calc(var(--bar-height) + var(--bar-spacing))) rotate(-45deg); }
  }
  @keyframes to-x-mid {
    50% { transform: rotate(0); }
    100% { transform: rotate(-45deg); }
  }
  @keyframes to-x-btm {
    0% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(calc(-1 * (var(--bar-height) + var(--bar-spacing)))) rotate(0); }
    100% { transform: translateY(calc(-1 * (var(--bar-height) + var(--bar-spacing)))) rotate(-135deg); }
  }
  
  
  /* to hamburger animation */
  #menu-btn[data-state="hamburger"] span:nth-child(1) { animation-name: to-hamburger-top; }
  #menu-btn[data-state="hamburger"] span:nth-child(2) { animation-name: to-hamburger-mid; }
  #menu-btn[data-state="hamburger"] span:nth-child(3) { animation-name: to-hamburger-btm; }
  @keyframes to-hamburger-top {
    0% { transform: translateY(calc(var(--bar-height) + var(--bar-spacing))) rotate(-45deg); }
    50% { transform: translateY(calc(var(--bar-height) + var(--bar-spacing))) rotate(0); }
    100% { transform: translateY(0) rotate(0); }
  }
  @keyframes to-hamburger-mid {
    0% { transform: rotate(-45deg); }
    50% { transform: rotate(0); }
  }
  @keyframes to-hamburger-btm {
    0% { transform: translateY(calc(-1 * (var(--bar-height) + var(--bar-spacing)))) rotate(-135deg); }
    50% { transform: translateY(calc(-1 * (var(--bar-height) + var(--bar-spacing)))) rotate(0); }
    100% { transform: translateY(0) rotate(0); }
  }
  @media screen and (min-width: 1000px){
    #menu-btn{
        display: none;
    }
  }