.header{position:fixed;top:0;width:100vw;height:80px;display:flex;z-index:10;justify-content:center;background-color:#fff;box-shadow:0 0 10px 2px rgba(0,0,0,.2)}.navbar{height:100%;width:100vw;max-width:60rem;display:inline-flex;margin:0 80px;@media(max-width:60rem){margin: 0;}.logo { height: 60px; margin: auto; margin-left: 20px; img { height: 100%; } } .menu-button { display: none; margin: auto; margin-right: 20px; @media (max-width: 768px) { display: initial; } } .menu { align-items: center; list-style: none; margin-right: 20px; display: flex; a { margin: 0 20px; text-decoration: none; font-weight: bold; color: black; } @media (max-width: 768px) { display: none; } }}.side-panel{position:fixed;display:none;flex-direction:column;top:0;right:0;z-index:12;height:100vh;width:60vw;box-shadow:0 0 10px 2px rgba(0,0,0,.2);background-color:#fff;transform:translateX(105%);transition:transform .3s ease;@media(max-width:768px){display: flex;}&.open { transform: translateX(0); } .menu-button { margin: 20px; margin-left: auto; } ul { padding: 0; list-style: none; display: flex; flex-direction: column; margin: 0 10%; gap: 20px; } a { text-decoration: none; font-weight: bold; color: black; display: flex; align-items: center; img { height: 2em; rotate: 90deg; margin-left: auto; fill: #e93369; } }}.menu-button{height:fit-content;padding:.5rem;border-radius:50%;border:1px solid #fff;background-color:#fff;transition:background-color .3s ease,border .3s ease;img { height: 1.75em; display: block; } &:active { background-color: #f0f0f0; border: 1px solid #f0f0f0; }}.backdrop{position:fixed;display:none;inset:0;&.open { display: initial; }}