.header{background-color:#292f36;position:fixed;top:0;width:100%;z-index:2;.navbar{width:342px;margin:0 auto;padding:24px 0;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #43454d;font-family:IBM Plex Mono,monospace;.header-logo{color:#fff;font-size:16px;font-weight:400;line-height:20px;span{color:#12f7d6}}.navigation{display:flex;gap:16px;list-style:none;.nav-item a{color:#fff;font-size:16px;font-weight:400;line-height:20px;text-decoration:none}.nav-item{background:linear-gradient(0deg,#12f7d6 100%,transparent 200%);background-size:100% 0;background-position:0 200%;background-repeat:no-repeat;transition:color .3s ease-in-out,background-size .3s ease-in-out}.active-link{border-bottom:1px solid #12f7d6}}.header-social-links{display:none;img{transition:transform .3s ease,opacity .3s ease}img:hover{transform:scale(1.3);opacity:.8;filter:drop-shadow(0 0 10px #12f7d6)}}}}@media(min-width:768px){.header{.navbar{width:704px;padding:30px 0;.header-logo{font-size:24px;font-weight:400;line-height:32px;text-align:left}.navigation{gap:32px;.nav-item:hover{background-size:100% 100%}}.header-social-links{display:flex;list-style:none;gap:32px}}}}@media(min-width:1280px){.header{.navbar{width:1024px;padding:38px 0;.header-logo{font-size:32px;font-weight:500;line-height:42px}.navigation{gap:32px;.nav-item a{font-size:24px;font-weight:400;line-height:32px}}}}}