:root{--colour-background:#ffffff;--colour-primary:#2c3e50;--colour-text:var(--colour-primary);--colour-background-inverted:var(--colour-primary);--colour-text-inverted:var(--colour-background);--colour-accent:#8d9b9c;--colour-border:rgba(0,0,0,0.1);--colour-shadow:rgba(0,0,0,0.1);--colour-shadow-hover:rgba(0,0,0,0.2);--font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--font-size-base:1rem;--font-size-large:1.25rem;--font-weight-medium:500;--font-weight-bold:600;--line-height-base:1.6;--line-height-heading:1.2;--spacing:1rem;--spacing-small:calc(var(--spacing) * 0.5);--spacing-medium:calc(var(--spacing) * 1.5);--spacing-large:calc(var(--spacing) * 2);--section-width:70vw;--border-radius:4px;--border-radius-large:8px;--box-shadow:0 4px 8px var(--colour-shadow);--box-shadow-hover:0 6px 12px var(--colour-shadow-hover);--transition-duration:0.2s;--transition-timing:ease;--approx-header-height:4em}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);font-size:var(--font-size-base);line-height:var(--line-height-base);color:var(--colour-text);background-color:var(--colour-background);min-height:100vh;display:flex;flex-direction:column}h1,h2,h3,h4,h5,h6{font-family:var(--font-family);font-weight:var(--font-weight-bold);line-height:var(--line-height-heading);margin-bottom:var(--spacing)}h1{font-size:2.5rem;letter-spacing:-0.01em}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1.25rem}a{color:var(--colour-text);text-decoration:none;transition:color var(--transition-duration) var(--transition-timing)}a:hover{color:var(--colour-accent)}.button{display:inline-block;margin:var(--spacing) var(--spacing-small);padding:var(--spacing-small) var(--spacing-medium);background-color:var(--colour-background-inverted);color:var(--colour-text-inverted);text-decoration:none;border-radius:var(--border-radius);transition:all var(--transition-duration) var(--transition-timing);cursor:pointer;font-weight:var(--font-weight-medium)}.button:hover{color:var(--colour-text-inverted);background-color:var(--colour-accent)}header{background-color:var(--colour-background);border-bottom:1px solid var(--colour-border);position:sticky;top:0;z-index:100;display:flex;align-items:stretch}header h1{margin:0;font-size:1.5rem;padding:0 var(--spacing)}.header-nav{margin:0 auto;padding:var(--spacing) var(--spacing);width:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--spacing-small)}.header-nav-brand h1{margin:0;font-size:1.5rem}.header-nav-links{display:flex;list-style:none;gap:var(--spacing-medium)}.header-nav-links a{font-weight:var(--font-weight-medium)}main{flex:1;margin:0 auto;padding:var(--spacing);width:100%}section{margin:0 auto var(--spacing);width:100%;max-width:var(--section-width)}footer{background-color:var(--colour-background-inverted);color:var(--colour-text-inverted);padding:var(--spacing);margin-top:auto;font-size:0.75rem}.footer-content{margin:0 auto;padding:0 var(--spacing);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--spacing)}.github-link{display:inline-flex;align-items:center;transition:opacity var(--transition-duration) ease}.github-link:hover{opacity:0.8}.github-link img{filter:brightness(0) invert(1)}@media (min-width:1024px){:root{--section-width:60vw}}@media (min-width:768px) and (max-width:1024px){:root{--section-width:70vw}}@media (min-width:480px) and (max-width:768px){:root{--section-width:80vw}}@media (max-width:480px){:root{--section-width:90vw;--spacing:0.75rem}h1{font-size:2rem}h2{font-size:1.75rem}h3{font-size:1.25rem}.header-nav-brand h1{font-size:1.25rem}.header-nav-links{width:100%;justify-content:right}.footer-content{flex-direction:column;text-align:center}}