:root{--hamburger-bg-color:#000000;--hamburger-line-color:#ffffff;--menu-bg-color:#9c9c9c;--menu-text-color:#ffffff;--menu-border-color:#ffffff;--menu-arrow-color:#ffffff}.menu-btn{position:fixed;top:10px;right:10px;display:flex;height:60px;width:60px;justify-content:center;align-items:center;z-index:90;background-color:var(--hamburger-bg-color)}.menu-btn span,.menu-btn span:before,.menu-btn span:after{content:'';display:block;height:3px;width:25px;border-radius:3px;background-color:var(--hamburger-line-color);position:absolute}.menu-btn span:before{bottom:8px}.menu-btn span:after{top:8px}#menu-btn-check:checked~.menu-btn span{background-color:#fff0}#menu-btn-check:checked~.menu-btn span::before{bottom:0;transform:rotate(45deg)}#menu-btn-check:checked~.menu-btn span::after{top:0;transform:rotate(-45deg)}#menu-btn-check{display:none}.menu-content{width:100%;height:100%;position:fixed;top:0;left:100%;z-index:80;background-color:var(--menu-bg-color);transition:all 0.5s}.menu-content ul{padding:70px 10px 0}.menu-content ul li{border-bottom:solid 1px var(--menu-border-color);list-style:none}.menu-content ul li a{display:block;width:100%;font-size:15px;box-sizing:border-box;color:var(--menu-text-color);text-decoration:none;padding:9px 15px 10px 0;position:relative}.menu-content ul li a::before{content:"";width:7px;height:7px;border-top:solid 2px var(--menu-arrow-color);border-right:solid 2px var(--menu-arrow-color);transform:rotate(45deg);position:absolute;right:11px;top:16px}#menu-btn-check:checked~.menu-content{left:0}