body {margin:0;font-family:'Roboto',sans-serif;background-color:#000000;}
#mm {z-index:2;}
#mm-mb {width:45px;height:40px;margin:30px 0 20px 20px;cursor:pointer;}
.mb {height:10px;width:100%;background-color:#d3b05d;display:block;border-radius:5px;transition:0.3s ease;}
#mb1 {transform:translateY(-4px);}
#mb3 {transform:translateY(4px);}
.nav {transition:0.3s ease;display:none;}
.nav ul {padding:0 30px;}
.nav li {list-style:none;padding:12px 0;}
.nav li a {color:white;font-size:20px;text-decoration:none;}
.nav li a:hover {font-weight:bold;}
.mm-bg, #mm {top:0;left:0;position:absolute;}
.mm-bg {z-index:1;width:0;height:0;margin:30px 0 20px 20px;background:radial-gradient(circle, #d3b05d, #ebdc6a);border-radius:50%;transition:0.3s ease;}
.change {display:block;}
.change .mb {background-color:white;}
.change #mb1 {transform:translateY(4px) rotateZ(-45deg);}
.change #mb2 {opacity:0;}
.change #mb3 {transform:translateY(-6px) rotateZ(45deg);}
.change-bg {width:480px;height:620px;transform:translate(-60%,-30%);}