:root {
    /* sizing */
    --font-size: 13pt;
    --navbar-font-size: 1.25em;
    --line-height: 1.5;
    --border-radius: 0.2em;
    --item-pad: 0.25em 0.35em;
    --nav-pad: 0.5em;
}

:root {
    /* colours */
    color-scheme: light;

    --jordy-blue: rgb(123, 160, 201);
    --emerald: rgb(69, 203, 133);
    --caribbean-current: rgb(25, 114, 120);
    --persian-red: rgb(196, 69, 54);
    --orange-peel: rgb(255, 166, 43);

    --base-colour: var(--jordy-blue);
    --bg-colour: rgb(245, 245, 245);
    --navbar-colour: var(--base-colour);
    --pub-colour: color-mix(in oklab, var(--base-colour), white 95%);
    --pubsum-colour: color-mix(in oklab, var(--base-colour), white 99%);

    --link-colour: color-mix(in oklab, var(--persian-red), white 20%);
    --link-hover-colour: color-mix(in oklab, var(--link-colour), black 20%);
    --link-background-colour: color-mix(in oklab, var(--link-colour), black 20%);

    --font-colour: color-mix(in oklab, var(--base-colour), black 50%);
    --navbar-font-colour: white;

    --border-colour: #ccc;
    --shadow-colour: rgba(0, 0, 0, 0.2);
    --shadow-hover-colour: rgba(0, 0, 0, 0.3);

    --image-brightness: 100%;
}

:root[data-scheme="dark"] {
    color-scheme: dark;

    --jordy-blue-dark: color-mix(in oklab, var(--jordy-blue) 40%, black);
    --persian-red-dark: color-mix(in oklab, var(--persian-red) 90%, white);

    --base-colour: var(--jordy-blue-dark);
    --bg-colour: color-mix(in oklab, var(--base-colour), white 10%);
    --navbar-colour: var(--base-colour);
    --pub-colour: color-mix(in oklab, var(--base-colour), white 5%);
    --pubsum-colour: color-mix(in oklab, var(--base-colour), white 1%);

    --link-colour: color-mix(in oklab, var(--persian-red-dark), white 20%);
    --link-hover-colour: color-mix(in oklab, var(--link-colour), black 20%);
    --link-background-colour: color-mix(in oklab, var(--link-colour), black 20%);

    --font-colour: color-mix(in oklab, var(--base-colour), white 80%);
    --navbar-font-colour: var(--font-colour);

    --border-colour: #222;
    --shadow-colour: rgba(0, 0, 0, 0.4);
    --shadow-hover-colour: rgba(0, 0, 0, 0.5);

    --image-brightness: 80%;
}

:root {
    --shadow: 0 2px 8px var(--shadow-colour);
    --shadow-hover: 0 4px 16px var(--shadow-hover-colour);
}

@media (max-width: 600px) {
    :root {
        --font-size: 12pt
    }
}

@media (max-width: 400px) {
    :root {
        --font-size: 11pt
    }
}

body {
    margin: 0;
    padding: 0;
    background: var(--bg-colour);
    font-family: 'Segoe UI', 'Arial', sans-serif;
    font-size: var(--font-size);
    line-height: var(--line-height);
}

main {
    color: var(--font-colour);
    text-align: center;
}

h1 {
    font-size: 1.8em;
}

a {
    text-decoration: none;
    color: var(--link-colour);
}

a:hover {
    color: var(--link-hover-colour);
}

hr {
    width: 75%;
    margin: 1em auto 1em auto;
}

img {
    border-radius: 1em;
    border: 5px solid var(--border-colour);
    filter: brightness(var(--image-brightness));
}

.content-container {
    max-width: calc(0.95*1080px);
    width: 95%;
    margin: 1em auto 2em auto;
    text-align: justify;
}

.inline-image {
    float: right;
    margin: 0 0 1em 1em;
    max-width: 100%;
    height: auto;
    object-fit: cover;
    object-position: top;
}

@media (max-width: 580px) {
    .inline-image {
        float: none;
        display: flex;
        margin: auto;
    }
}

.news-image {
    display: block;
    margin: 1em auto;
    max-width: 100%;
    height: auto;
}

video {
    display: block;
    width: 100%;
    margin: auto;
    border-radius: 1em;
    border: 5px solid var(--border-colour);
    filter: brightness(var(--image-brightness));
}

header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    position: sticky;
    font-size: var(--navbar-font-size);
    font-weight: bold;
    top: 0;
    z-index: 10;
    background: var(--navbar-colour);
    color: var(--navbar-font-colour);
    box-shadow: var(--shadow);
    padding: var(--nav-pad);
    width: 100%;
    box-sizing: border-box;
}

#nav {
    display: inline;
}

.navlink {
    color: var(--navbar-font-colour);
    padding: var(--item-pad);
    border-radius: var(--border-radius);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.navlink:hover {
    color: var(--navbar-font-colour);
    background-color: var(--link-background-colour);
}

#home {
    color: var(--navbar-font-colour);
    padding: var(--item-pad);
    border-radius: var(--border-radius);
    transition: background-color 0.3s ease, color 0.3s ease;
    order: 1;
}

#home:hover {
    color: var(--navbar-font-colour);
    background-color: var(--link-background-colour);
}

#colourbutton {
    border: none;
    background-color: transparent;
    margin-left: auto;
    font-size: var(--navbar-font-size);
    color: var(--navbar-font-colour);
}

#navbutton {
    border: none;
    background-color: transparent;
    display: none;
    font-size: var(--navbar-font-size);
    color: var(--navbar-font-colour);
}

@media (width <=900px) {
    header {
        justify-content: space-around;
    }

    #home {
        display: flex;
        order: -2;
        margin: auto;
        text-align: center;
    }

    #colourbutton {
        order: -3;
        margin-left: 0;
    }

    #navbutton {
        display: flex;
        order: -1;
        text-align: right;
    }

    #nav {
        display: none;
    }

    #nav.expand {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: space-evenly;
        font-size: 0.8em;
    }
}

.publication-link {
    font-weight: bold;
    font-family: 'Courier New', monospace;
}

.horizontal-links a {
    font-weight: bold;
    font-family: 'Courier New', monospace;
    padding: var(--item-pad);
    text-align: center;
    border-radius: var(--border-radius);
    white-space: nowrap;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.horizontal-links a:hover {
    background-color: var(--link-hover-colour);
    color: white;
}

.form tr,
.form td {
    padding: 0 0.2em 0.2em 0;
}

mjx-container[display="true"] {
    overflow-x: auto;
    overflow-y: hidden;
    min-width: 100% !important;
}

input[type="range"] {
    accent-color: var(--link-colour);
}

canvas {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}