header{position:sticky;top:0;z-index:1000;background-color:var(--secondary-color);color:var(--primary-color);padding:16px 20px;box-shadow:0 4px 6px rgba(0,0,0,.1)}header{display:flex;align-items:center;justify-content:space-between}.logo{max-width:5rem}.logo svg{width:100%;height:auto}header .logo a{font-size:24px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--primary-color);text-decoration:none}header nav ul{position:relative}header nav ul{list-style:none;display:flex;margin:0;padding:0}header nav ul li{margin:0 10px}header nav ul li a{color:var(--primary-color);text-decoration:none;font-size:16px;padding:10px 18px;border-radius:999px;background:#fff;margin:0 4px;font-weight:500}header nav ul li a:hover{color:#fff;background:var(--primary-color);box-shadow:0 6px 24px rgba(56,189,248,.12)}header .menu-icon{display:none;background:0 0;border:none;font-size:32px;color:var(--primary-color);cursor:pointer;transition:color .2s;margin-left:1rem}@media (max-width:768px){header nav{width:100vw;background-color:var(--secondary-color)}header nav ul{display:none;flex-direction:column;background-color:var(--secondary-color);position:absolute;top:70px;right:0;width:100vw;padding:0;box-shadow:0 4px 6px rgba(0,0,0,.1)}header nav ul li{margin:.5rem auto}header nav ul.show{display:flex}header .menu-icon{display:block}}