header{display:flex;width:100%;align-items:center;justify-content:center;gap:100px}header h1{width:150px;margin-left:30px}body{margin:0;overflow:auto}.desktop-nav{display:flex;align-items:center;gap:40px}#menu li a.active,nav a.active{color:#0ff;font-weight:700}.header_logo{height:110px;margin:10px 30px}.mobile-menu{display:none}#menuToggle{display:flex;flex-direction:column;position:relative;z-index:4;-webkit-user-select:none;-moz-user-select:none;user-select:none}#menuToggle input{display:flex;width:40px;height:32px;position:absolute;cursor:pointer;opacity:0;z-index:50}#menuToggle span{display:flex;width:29px;height:2px;margin-bottom:5px;position:relative;background:#fff;border-radius:3px;z-index:100;transform-origin:5px 0;transition:transform .5s cubic-bezier(.77,.2,.05,1),background .5s cubic-bezier(.77,.2,.05,1),opacity .55s ease}#menuToggle input:checked~span{transform:rotate(45deg) translate(-3px,-1px);background:#fff}#menuToggle input:checked~span:nth-last-child(3){opacity:0;transform:rotate(0deg) scale(.2)}#menuToggle input:checked~span:nth-last-child(2){transform:rotate(-45deg) translateY(-1px)}#menu{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#000;display:flex;padding:0;margin:0;flex-direction:column;justify-content:center;align-items:center;transform:translateX(-100%);transition:transform .5s cubic-bezier(.77,.2,.05,1);z-index:10;overflow:hidden}#menu.open{transform:translateX(0)}body.menu-open{overflow:hidden}#menu li{padding:20px 0;list-style:none}#menu li a{color:#0ff;font-size:24px;text-decoration:none}@media screen and (min-width:768px) and (max-width:1024px){header{gap:0;justify-content:space-between}nav{margin-left:50px}.header_logo{margin:10px}}@media screen and (max-width:767px){.desktop-nav{display:none}.mobile-menu{display:flex}header{flex-direction:row-reverse;gap:0;justify-content:space-evenly}}