@keyframes buttonLoad{0%{transform:translate(-5px,5px)}to{transform:translate(0,0)}}@keyframes buttonPress{0%,to{transform:translate(0,0)}10%,90%{transform:translate(-4px,4px)}}.nav-item.active #about_active,.nav-item.active #contact_active,.nav-item.active #projects_active,.nav-item.active #research_active{display:block}#about_active,#contact_active,#hamburger_active,#projects_active,#research_active,.nav-item.active #about_inactive,.nav-item.active #contact_inactive,.nav-item.active #projects_inactive,.nav-item.active #research_inactive{display:none}.menu-toggle .line{transition:transform .3s ease,opacity .3s ease;transform-box:fill-box;transform-origin:center;transform:translate(0,0) rotate(0deg);opacity:1}.menu-toggle.active .top{transform:translateY(9px) translateX(-1px) rotate(45deg)}.menu-toggle.active .middle{opacity:0}.menu-toggle.active .bottom{transform:translateY(-9px) translateX(-1px) rotate(-45deg)}.fg{transform-box:fill-box;transform:translate(0,0);transition:transform .3s ease}.menu-toggle:active.fg,.nav-item.pressing .fg,.nav-item:hover .fg{transform:translate(-5px,5px)}.nav-item.pressing #about_active,.nav-item.pressing #contact_active,.nav-item.pressing #hamburger_active,.nav-item.pressing #projects_active,.nav-item.pressing #research_active{display:block}.nav-item .fg{animation:buttonLoad .4s ease-out}.menu-toggle:active .fg{transform:translate(-4px,4px);transition:transform .1s ease}