#menu{position: fixed; z-index: 9999; top:0; right:0; bottom:0; left:0; pointer-events: none;}
#menu:after{content:""; position: absolute; z-index: -1; top:0; right:0; bottom:0; left:0; background-color: rgba(0, 0, 0, 0); cursor: pointer; transition: 0.2s;}
#menu nav{position: absolute; top:0; left:0; bottom:0; width: 100%; max-width: 420px; transform: translateX(-100%); padding: 30px; flex-wrap: nowrap;}
#menu nav > ul{padding: 30px 0; overflow-y: auto;}
#menu nav > ul ul{padding-left: 20px; padding-top: 10px; display: none;}
#menu nav > ul ul li a{color: var(--tertiary);}
#menu nav ul{display: grid; gap: 20px; align-items: start; align-content: start;}
#menu nav ul li a{color:white;}
#menu nav ul li a i{font-size: 12px; margin-left: 2px;}
#menu nav ul li:not(:last-child){border-bottom: 1px solid #ffffff1a; padding-bottom: 20px;}
#menu nav ul .mobile-active{display: grid;}
#menu.active{pointer-events: all;}
#menu.active nav{transform: none;}
#menu.active:after{background-color: rgba(0, 0, 0, 0.5);}
#menu.animate nav{transition: 0.3s ease-in;}
#menu-trigger i{cursor: pointer;}
#menu #close-menu{font-size: 22px; cursor: pointer; margin-left: auto; display: block;}