/* Shared navigation styling — same look on every page. Add this as a SECOND tag, after the page's own stylesheet, in each page's . Do not edit the page's own CSS file. */ #navigation ul { list-style-type: none; margin: 2px; padding: 0; overflow: hidden; } #navigation li { float: left; } #navigation li a { display: block; color: white; text-align: center; font-family: Arial, Helvetica, sans-serif; padding: 14px 24px; text-decoration: none; overflow: hidden; transition: filter 0.2s ease; } /* Graded hues: deep teal on the left sweeping toward blue-teal on the right */ #navigation li:nth-child(1) a { background-color: hsl(170, 45%, 36%); } #navigation li:nth-child(2) a { background-color: hsl(177, 45%, 37%); } #navigation li:nth-child(3) a { background-color: hsl(183, 45%, 38%); } #navigation li:nth-child(4) a { background-color: hsl(190, 45%, 39%); } #navigation li:nth-child(5) a { background-color: hsl(197, 45%, 40%); } #navigation li:nth-child(6) a { background-color: hsl(203, 45%, 41%); } #navigation li:nth-child(7) a { background-color: hsl(210, 45%, 42%); } /* Facebook icon item: no text heading, so no colour block */ #navigation li:nth-child(8) a { background-color: transparent; padding: 10px 14px; } #navigation li a:hover, #navigation li a:focus { filter: brightness(0.85); } /* Mobile: stacked full-width list */ @media screen and (max-width: 800px) { #navigation li { float: none; width: 100%; } } /* Desktop: circular, equal-sized nav buttons floating on white */ @media screen and (min-width: 801px) { #navigation ul { display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; gap: 20px; background-color: #ffffff; padding: 24px 0; } #navigation li { float: none; width: 130px; height: 130px; border-radius: 50%; overflow: hidden; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); } #navigation li a { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px; font-size: 13px; line-height: 1.3; } #navigation li:nth-child(8) { box-shadow: none; } }