*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins', sans-serif}body{background:black}header nav{position:relative}header nav #toggle{position:absolute;top:20px;left:20px;padding:10px;transition:.8s}header nav #toggle span{position:relative;width:36px;height:4px;background:white;border-radius:4px;display:block;margin-bottom:8px;transition:.5s}header nav #toggle span:nth-child(1){transform-origin:left}header nav #toggle span:nth-child(2){transform-origin:center}header nav #toggle span:nth-child(3){transform-origin:left;margin-bottom:0}header nav #toggle.active{width:55px;transition:.5s;z-index:9}header nav #toggle.active span{background:white}header nav #toggle.active span:nth-child(1){transform:rotate(45deg);left:3px}header nav #toggle.active span:nth-child(2){transform:rotate(315deg);right:3px}header nav #toggle.active span:nth-child(3){opacity:0;transform:scale(0)}header nav ul#menu{position:fixed;top:0;left:-300px;width:300px;height:100%;background:rgba(255,255,255,0.1);z-index:2;display:flex;justify-content:center;align-items:center;transition:.5s;display:flex;flex-direction:column}header nav ul#menu li{list-style:none;font-size:2rem;line-height:2}header nav ul#menu li a{color:white;text-decoration:none}header nav ul#menu li a:hover{color:tomato}header nav ul#menu.active{left:0}#toggle.active ul.menu{transform:translateX(-10%)}
/*# sourceMappingURL=style.css.map */