header{background:var(--black);left:0;position:sticky;top:0;width:100%;z-index:3;a{color:var(--white);text-decoration:none}.max-container{max-width:100%}.header-nav{align-items:flex-start;display:flex;justify-content:space-between;padding:1.5rem 0 1rem;@media(min-width:56.25em){padding-top: 2rem;}}.logo a{display:block;margin:-.25rem 0 0 -.25rem;padding:.25rem;svg{fill:currentColor;height:2.313rem;width:2.313rem;@media(min-width:56.25em){height: 4.563rem; width: 4.563rem; margin: 0; padding: 0;}}}.mobile-nav-button{appearance:none;background:var(--black);border:0;color:var(--colour-1);cursor:pointer;font-family:dm mono;font-size:var(--font-size-5);font-weight:400;margin:0;padding:0;&:focus, &:hover{color:var(--colour-3);outline:none;transition:all .2s ease}@media(min-width:37.5em){display: none;}}.mobile-nav{background:var(--black);display:flex;flex-direction:column;height:0%;width:100%;overflow-y:hidden;position:fixed;top:5rem;left:0;z-index:1;nav{flex:1;overflow-y:auto;padding-bottom:5rem;width:100%}ul{font-size:var(--font-size-3);font-weight:600;line-height:1.8;list-style-type:none;padding-left:3rem;padding-right:2rem}a{color:var(--colour-2);display:flex;justify-content:space-between;text-decoration:none;&::after{color:var(--colour-3);content:">";font-weight:200;opacity:0}&:hover{color:var(--colour-3)}&:hover::after{opacity:1;transition:all .4s ease}}@media(min-width:37.5em){display: none;}}.desktop-nav{display:none;@media(min-width:37.5em){display: block;}ul{display:flex;font-family:dm mono;font-weight:400;gap:2rem;justify-content:space-between;margin:0}a{color:var(--colour-2);&:hover{color:var(--colour-3)}}}}