@charset "UTF-8";.menu-checkbox{display:none}.menu-button{display:block;position:fixed;top:20px;left:20px;z-index:200;height:30px;width:40px;cursor:pointer}.menu-button::before,.menu-button::after{content:'';transition:.3s}.menu-button::before,.menu-button::after,.menu-button span{display:block;position:absolute;right:0;height:2px;width:100%;margin-top:-1px;background-color:#fff}.menu-button::before{top:0}.menu-button::after{bottom:0}.menu-button span{top:50%}.menu-checkbox:checked~.menu-button::before{top:50%;transform:rotate(45deg)}.menu-checkbox:checked~.menu-button::after{top:50%;transform:rotate(-45deg)}.menu-checkbox:checked~.menu-button span{display:none}.drawer-menu{position:fixed;top:0;left:0;z-index:180;height:100%;width:200px;padding-top:70px;transform:translateX(-100%);transition:.5s;background-color:rgba(65,65,65,.8)}.drawer-menu ul{margin:0;padding:0;list-style-type:none}.drawer-menu li{border-bottom:1px dotted #ccc}.drawer-menu a{display:block;padding:10px;font-size:16px;color:#fff;color:#fff;text-decoration:none}.menu-checkbox:checked~.drawer-menu{transform:translateX(0)}.menu-background{display:none;position:fixed;top:0;left:0;z-index:100;height:100%;width:100%;background-color:rgba(255,255,255,.2);cursor:pointer}.menu-checkbox:checked~.menu-background{display:block}