#menu-toggle-container {
  display: none;
}

@media (max-width: 700px) {

  nav {
    width: max-content;
    height: max-content;
    position: fixed;
    
  }
  nav .bg-box {
    display: none;

    &.opened {
      display: flex;
      align-items: center;
      width: 100%;
      height: 100lvh;
      background-color: var(--grisTheme);
      position: fixed;
      left: 0;
      top: 0;
      z-index: 98;

      & ul {
        width: 100%;
        height: 75%;
        display: flex;
        flex-direction: column;
        row-gap: 10lvh;
        align-items: center;
        justify-content: space-evenly;

        & li {
          width: max-content;

          & a {
            width: max-content;
            margin-left: auto;
            margin-right: auto;
            font-size: 1.5rem;

            &.clicked button {
              transform: rotateX(35deg);
              box-shadow: 0 5px 0 0 var(--rougeThemeDark);
              background-color: var(--rougeThemeLight);
              
  
              &::before {
                translate: 220px -220px;    
              }
            }

            

          }


          
        }

        & li a button {
          font-size: 1.5rem;
          width: 90vw;
          padding: 20px;
          border-radius: 10px;
          border: 2px var(--rougeTheme) solid;
          background-color: var(--grisTheme);

        

          &::before {
            left: 0;
          }

          &.clicked button {
            transform: rotateX(35deg);
            box-shadow: 0 5px 0 0 var(--rougeThemeDark);
            background-color: var(--rougeThemeLight);

            &::before {
              translate: 220px -220px;    
            }
          }

          

        }
      }

    }
  }
  #menu-toggle-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20vw;
    height: 20vw;
    border-radius: 15px;
    position: relative;
    z-index: 99;
    

  }

}

  @media (max-width: 700px) { 


      .menu-toggle.gg-menu {
        transform: scale(var(--ggs, 1));
      }
      .menu-toggle.gg-menu,
      .menu-toggle.gg-menu::after,
      .menu-toggle.gg-menu::before {
        box-sizing: border-box;
        position: relative;
        display: block;
        width: 20px;
        height: 2px;
        border-radius: 3px;
        background: currentColor;
        color: var(--secondary);
      }
      .menu-toggle.gg-menu::after,
      .menu-toggle.gg-menu::before {
        content: "";
        position: absolute;
        top: -6px;
      }
      .menu-toggle.gg-menu::after {
        top: 6px;
      }




      .menu-toggle:not(.gg-menu) {
        box-sizing: border-box;
        position: relative;
        display: block;
        transform: scale(var(--ggs, 1));
        width: 22px;
        height: 22px;
        border: 2px solid transparent;
        border-radius: 40px;
      }
      .menu-toggle:not(.gg-menu):after,
      .menu-toggle:not(.gg-menu)::before {
        content: "";
        display: block;
        box-sizing: border-box;
        position: absolute;
        width: 16px;
        height: 2px;
        background: currentColor;
        transform: rotate(45deg);
        border-radius: 5px;
        top: 8px;
        left: 1px;
        color: var(--secondary);
      }
      .menu-toggle:not(.gg-menu)::after {
        transform: rotate(-45deg);
      }

      .menu-toggle.gg-menu {
        transform: scale(var(--ggs, 1));
      }
      .menu-toggle.gg-menu,
      .menu-toggle.gg-menu::after,
      .menu-toggle.gg-menu::before {
        box-sizing: border-box;
        position: relative;
        display: block;
        width: 20px;
        height: 2px;
        border-radius: 3px;
        background: currentColor;
      }
      .menu-toggle.gg-menu::after,
      .menu-toggle.gg-menu::before {
        content: "";
        position: absolute;
        top: -6px;
      }
      .menu-toggle.gg-menu::after {
        top: 6px;
      }




      .menu-toggle:not(.gg-menu) {
        box-sizing: border-box;
        position: relative;
        display: block;
        transform: scale(var(--ggs, 1));
        width: 22px;
        height: 22px;
        border: 2px solid transparent;
        border-radius: 40px;
      }
      .menu-toggle:not(.gg-menu):after,
      .menu-toggle:not(.gg-menu)::before {
        content: "";
        display: block;
        box-sizing: border-box;
        position: absolute;
        width: 16px;
        height: 2px;
        background: currentColor;
        transform: rotate(45deg);
        border-radius: 5px;
        top: 8px;
        left: 1px;
      }
      .menu-toggle:not(.gg-menu)::after {
        transform: rotate(-45deg);
      }

      nav #menu-toggle-container.nav-opened {
        position: fixed;
        
    
    }

}