*{margin:0;padding:0;box-sizing:border-box;transition:.5s}nav{position:fixed;padding-top:54px;left:-108px;height:100vh;width:108px;background-color:#099;user-select:none}nav.menu-open{transform:translate(108px)}.nav-link{display:flex;align-items:center;padding:15px;font-size:20px;text-decoration:none;color:#5ccccc}.nav-link:hover{background-color:#1e776d}#hamburger{position:fixed;z-index:1;padding:15px;height:54px;width:54px;cursor:pointer}#hamburger-top,#hamburger-mid1,#hamburger-mid2,#hamburger-bottom{position:absolute;height:4px;width:24px;background-color:#333;opacity:1}#hamburger-top{top:17px}#hamburger-bottom{bottom:17px}#hamburger-mid1,#hamburger-mid2{top:25px}#hamburger.menu-open #hamburger-top,#hamburger.menu-open #hamburger-bottom{transform:translate(15px);opacity:0}#hamburger.menu-open #hamburger-mid1{transform:rotate(45deg)}#hamburger.menu-open #hamburger-mid2{transform:rotate(-45deg)}#top-nav{height:54px;color:#a6a600;background-color:#ffff40;user-select:none}header{height:54px;display:flex;align-items:center;padding-left:54px}header.menu-open{transform:translate(69px)}h1{font-size:24px}main{padding:15px}main.menu-open{transform:translate(108px)}