:root {
    --anthracite: #29282d;
    --bg-col: var(--mint-cream);
    --bg-img: linear-gradient(45deg, var(--naples-yellow) 0%, var(--light-red) 100%);

    /* 2023 colour palettes */
    --dried-moss: #cdb97d;
    --muted-clay: #d3927d;
    --lotus: #e2c1be;
    --burnished-lilac: #c6aaaf;
    --very-peri: #6868ac;
    --granite-green: #859f94;
    --hawthorn-rose: #894b5d;
    --elderberry: #a0838f;

    /*2025 colour palettes */
    --naples-yellow: #FFE66D;
    --light-red: #FF6B6B;
    --mint-cream: #F7FFF7;
    --robin-egg-blue: #4ECDC4;
    --midnight-green: #1A535C;
}

/* Scrollbar */

::-webkit-scrollbar { width: 20px; height: 20px; }
::-webkit-scrollbar-track { background: white; }
::-webkit-scrollbar-thumb { background: var(--bg-col); }
::-webkit-scrollbar-thumb:hover { background: var(--bg-col); }
.main-content { scrollbar-color: var(--bg-col) white; }

/* Global Styles */
/* TODO: Base CSS for body is not right */
html { height: 100%; }
body { margin: 0; min-height: 100%; display: grid; grid-template-rows: 1fr auto; }
body#calendar-page { min-height: 0; user-select: none; }

.background { position: fixed; inset: 0; background-color: var(--bg-col); background-image: var(--bg-img); }

.main-content { position: sticky; margin: 8em auto 0 auto; display: grid; grid-template-rows: repeat(3, min-content); grid-gap: 2em; }
#poll-page { grid-template-rows: min-content; }
.main-content > p { text-align: center; }
.main-content > p.hidden { display: none; }

h1 { font-family: 'Space Grotesk', sans-serif; font-size: 8em; color: var(--anthracite); text-align: center; }
p, .myst-div, footer { font-family: 'Quicksand', sans-serif; font-size: 2em; color: var(--anthracite); cursor: default; user-select: none; }
a { font-family: 'Quicksand', sans-serif; font-size: 2em; color: var(--anthracite); transition: color 400ms, text-underline-offset 1s; }
a:hover, :focus-visible  { text-underline-offset: 0.5em; text-shadow: 0 0 10px white; }
a:focus-visible { outline: none; }
.underline { margin: 0; text-decoration: underline 0.15em rgba(0, 0, 0, 0); transition: text-decoration 1s, filter 1s; text-align: center; }
.underline:hover { cursor: default; text-decoration: underline 0.15em rgba(255, 207, 0, 1); filter: hue-rotate(1000deg); }
.image-ct { height: 300px; text-align: center; }
.image-ct > img { object-fit: cover; object-position: top; width: 300px; height: 300px; border-radius: 50%; box-shadow: 10px 10px 20px var(--mint-cream); filter: grayscale(0.6)}
.links { text-align: center; }
.links a:not(:last-child) { margin-right: 1em; }
.links i { margin-right: 0.125em; font-size: 1.25em; }
footer { position: sticky; margin-top: 1.25em; grid-row-start: 2; grid-row-end: 3; padding: 1em; text-align: right; font-size: 1.25em; }

/* Media Queries */

@media screen and (max-width: 1000px) {
    h1 { font-size: 6em; }
}
@media screen and (max-width: 650px) {
    h1 { font-size: 5em; }
    .links { display: flex; place-self: center; }
}