body{
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    color: var(--text);
    background: var(--bg);
    transition: background 500ms ease-in-out, color 1000ms ease-in-out;
}
html{
    color-scheme: light;
}
html:has(body.dark){
    color-scheme: dark;
}
main{
    max-width: 680px;
    margin: 0 auto;
    padding: 4px max(20px, env(safe-area-inset-right)) 56px max(20px, env(safe-area-inset-left));
    line-height: 1.6;
}
h1{
    letter-spacing: -.02em;
}
h3{
    letter-spacing: -.01em;
}
ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
a{
    color: currentColor;
    text-decoration: none;
}
/* the nav floats: a glass capsule over the header's gradient, and over the page as it scrolls */
.navbar{
    position: sticky;
    top: 0;
    z-index: 10;
    box-sizing: border-box;
    height: calc(70px + env(safe-area-inset-top));
    margin-bottom: calc(-70px - env(safe-area-inset-top));
    width: 100%;
    padding: env(safe-area-inset-top) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    pointer-events: none;
}
/* a soft fade of the page colour behind the capsule, faded in once the header has scrolled away
   (scroll-driven, where supported) so text never scrolls up under the capsule edge-sharp */
.navbar::before{
    content: "";
    position: absolute;
    inset: 0 0 -18px;
    z-index: -1;
    background: linear-gradient(var(--bg) 40%, transparent);
    opacity: 0;
}
@supports (animation-timeline: scroll()){
    .navbar::before{
        animation: navbar-fade linear both;
        animation-timeline: scroll();
        animation-range: 280px 400px;
    }
}
@keyframes navbar-fade{
    to{
        opacity: 1;
    }
}
.navbar-nav{
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 500;
    pointer-events: auto;
}
/* the glass sits on a layer of its own, so the theme menu inside can blur the page too */
.navbar-nav::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--glass);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    box-shadow: var(--rim), var(--drop);
}
.nav-item{
    padding: 8px 16px;
    border-radius: 999px;
    white-space: nowrap;
}
.has-dropdown{
    position: relative;
    padding: 0;
}
.has-dropdown > a{
    display: block;
    padding: 8px 16px;
    border-radius: 999px;
    transition: background-color .2s ease-out, transform .15s ease-out;
}
.has-dropdown > a::after{
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin: 0 1px 0 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-3px) rotate(45deg);
    opacity: .55;
}
.has-dropdown > a:hover{
    background: var(--fill);
}
.has-dropdown:focus-within > a{
    background: var(--fill-on);
}
.has-dropdown > a:active,
.dropdown-item a:active{
    transform: scale(.97);
}
.has-dropdown > a:focus-visible,
.dropdown-item a:focus-visible{
    outline: 2px solid var(--border-color);
    outline-offset: 0;
}
header{
    padding: calc(1em + 70px + env(safe-area-inset-top)) 1em 3.5em;
    background: var(--bg-nav);
    margin-bottom: 1em;
    text-align: center;
    clip-path: polygon(0% 0%, 50% 0%, 100% 0%, 100% calc(80% + 14px), 50% 100%, 0% calc(80% + 14px));
}
img{
    max-height: 180px;
}
.dropdown{
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    width: max-content;
    max-width: calc(100vw - 24px);
    box-sizing: border-box;
    opacity: 0;
    z-index: 2;
    background: var(--glass-solid);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
    border-radius: 28px;
    box-shadow: var(--rim), var(--drop);

    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px;

    transform: translateX(-50%) translateY(-6px) scale(.97);
    transform-origin: 50% 0;

    transition: opacity .15s ease-out, transform .25s cubic-bezier(.2, .8, .2, 1);
}

.has-dropdown:focus-within .dropdown{
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%);
}

.dropdown-item a{
    display: flex;
    align-items: center;
    padding: 4px 18px 4px 4px;
    border-radius: 999px;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .2s ease-out, transform .15s ease-out;
}

.dropdown-item a:hover{
    background: var(--fill);
}

.dropdown-item a::before{
    content: ' ';
    border: 2px solid var(--border-color);
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}

:root {
    --gray0: #f8f8f8;
    --gray1: #dbe1e8;
    --gray2: #b2becd;
    --gray3: #6c7983;
    --gray4: #454e56;
    --gray5: #2a2e35;
    --gray6: #12181b;
    --blue: #0084a5;
    --purple: #a82dd1;
    --yellow: #fff565;
}

.light {
    --bg: var(--gray0);
    --bg-nav: linear-gradient(to right, var(--gray1), var(--gray3));
    --bg-dropdown: var(--gray0);
    --text: var(--gray6);
    --border-color: var(--blue);
    --bg-solar: var(--yellow);
    --glass: rgba(248, 248, 248, .62);
    --glass-solid: rgba(248, 248, 248, .9);
    --blur: blur(24px) saturate(180%);
    --rim: inset 0 .5px 0 rgba(255, 255, 255, .95), inset 0 0 0 .5px rgba(0, 0, 0, .07);
    --drop: 0 10px 30px rgba(0, 0, 0, .10), 0 1px 3px rgba(0, 0, 0, .08);
    --fill: rgba(0, 0, 0, .05);
    --fill-on: rgba(0, 0, 0, .08);
}
  

.dark {
    --bg: var(--gray5);
    --bg-nav: linear-gradient(to right, var(--gray5), var(--gray6));
    --bg-dropdown: var(--gray6);
    --text: var(--gray0);
    --border-color: var(--purple);
    --bg-solar: var(--blue);
    --glass: rgba(42, 46, 53, .55);
    --glass-solid: rgba(18, 24, 27, .86);
    --blur: blur(24px) saturate(170%);
    --rim: inset 0 .5px 0 rgba(255, 255, 255, .2), inset 0 0 0 .5px rgba(255, 255, 255, .07);
    --drop: 0 10px 30px rgba(0, 0, 0, .32), 0 1px 3px rgba(0, 0, 0, .22);
    --fill: rgba(255, 255, 255, .08);
    --fill-on: rgba(255, 255, 255, .13);
}

.solar {
    --gray0: #fbffd4;
    --gray1: #f7f8d0;
    --gray2: #b6f880;
    --gray3: #5ec72d;
    --gray4: #3ea565;
    --gray5: #005368;
    --gray6: #003d4c;
}

/* glass tinted with the solar greens and teals */
.solar.light {
    --glass: rgba(251, 255, 212, .62);
    --glass-solid: rgba(251, 255, 212, .9);
}

.solar.dark {
    --glass: rgba(0, 83, 104, .55);
    --glass-solid: rgba(0, 61, 76, .86);
}

#dark::before {
    background: #2a2e35;
}

#light::before {
    background: #ffffff;
}

#solar::before {
    background: var(--bg-solar);
}


@keyframes color-rotate {
    from {
        filter: hue-rotate(0deg);
    }
    to {
        filter: hue-rotate(360deg);
    }
}


.logo:hover {
    animation: color-rotate 1s;
    animation-iteration-count: infinite; 
    animation-direction: alternate;
}

@media (max-width: 520px){
    .nav-item,
    .has-dropdown > a{
        padding: 8px 13px;
    }
    /* on a phone the theme menu centres under the whole capsule, so it stays on screen */
    .has-dropdown{
        position: static;
        padding: 0;
    }
    .dropdown{
        top: calc(100% + 10px);
    }
}

/* Reduce Transparency: solid surfaces, no blur */
@media (prefers-reduced-transparency: reduce){
    .navbar-nav::before,
    .dropdown{
        background: var(--bg-dropdown);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

@media (prefers-reduced-motion: reduce){
    .dropdown{
        transition: opacity .15s ease-out;
    }
}