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); } } }}