#menu{z-index:2}#menu-bar{width:30px;height:40px;cursor:pointer}.bar{height:5px;width:100%;background-color:#fff;display:block;border-radius:5px;transition:.3s ease}#bar1{transform:translateY(-4px)}#bar3{transform:translateY(4px)}.nav{transition:.3s ease;display:none;width:250px}.nav ul{padding:0 22px;width:100%}.nav li{list-style:none;padding:12px 0}.nav li a{color:#fff;text-decoration:none;display:flex;align-items:center;min-width:200px;max-width:200px}.nav li a:hover{font-weight:700}.menu-bg{top:20px;right:0}#menu,.menu-bg{position:absolute}#menu{width:100%;top:0;left:0;transform:translate(55%,50px)}.menu-bg{z-index:1;width:0;height:0;margin:30px 0 20px 20px;background:#ee603e;transition:height .3s ease;transition:width .1s ease}.change{display:block}.change #bar1{transform:translateY(4px) rotate(-45deg)}.change #bar2{opacity:0}.change #bar3{transform:translateY(-6px) rotate(45deg)}.change-bg{width:100vw;height:100vh;transform:translate(40%,5px)}