.menu-icon{display:block;cursor:pointer;z-index:1000}.menu-icon span{display:block;width:30px;height:3px;background-color:#333;margin:6px 0;transition:transform .3s ease-in-out}#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{position:fixed;top:0;right:-300px;width:300px;height:100%;background-color:#f9f9f9;transition:right .3s ease-in-out}#menu-toggle:checked+.menu{right:0}.menu ul{list-style:none;padding:0}.menu li{padding:15px;border-bottom:1px solid #ddd}.menu a{text-decoration:none;color:#333;font-weight:700;font-size:16px}