.menu-icon{cursor:pointer;z-index:1000;display:block}.menu-icon span{background-color:#333;width:30px;height:3px;margin:6px 0;transition:transform .3s ease-in-out;display:block}#menu-toggle{opacity:0}#menu-toggle:checked+.menu-icon span:first-child{transform:rotate(-45deg)translate(-7px,6px)}#menu-toggle:checked+.menu-icon span:nth-child(2){opacity:0}#menu-toggle:checked+.menu-icon span:nth-child(3){transform:rotate(45deg)translate(-6px,-6px)}.menu{background-color:#f9f9f9;width:300px;height:100%;transition:right .3s ease-in-out;position:fixed;top:0;right:-300px}#menu-toggle:checked+.menu{right:0}.menu ul{padding:0;list-style:none}.menu li{border-bottom:1px solid #ddd;padding:15px}.menu a{color:#333;font-size:16px;font-weight:700;text-decoration:none}