html
{
    --background-colour: #fffffb;
    --background-accent: #EEE;
    --background-second-accent: #CCC;
    --code-background-colour: #EEE;
    --text-colour: #000;

    --heading-colour: #333;
    --card-bottom-shadow-colour: #b3b3b3;

    --heading-colour: #000;
    --link-colour: #007fbf;
    --note-colour: #fffdbb;
    --warning-colour: #ffbbbb;
    --highlight-colour: #e1bbff;
    --button-colour: #007fbf;
    --button-text-colour: #FFF;
}

.dark-theme
{
    --background-colour: #111;
    --background-accent: #252525;
    --background-second-accent: #000;
    --code-background-colour: #272822;
    --text-colour: #FFF;

    --card-bottom-shadow-colour: #000000B8;

    --heading-colour: #FFF;
    --link-colour: rgb(0, 170, 255);
    --note-colour: var(--background-accent);
    --warning-colour: #672f2fb5;
    --highlight-colour: rgba(175, 90, 25, 0.45);
    --button-colour: #0089a8;
    --button-text-colour: #FFF;
}

/* For browsers that support `scrollbar-*` properties */
@supports (scrollbar-color: auto) {
    * {
        scrollbar-color: var(--text-colour) var(--background-colour);
        scrollbar-width: thin;
    }
}
  
/* Otherwise, use `::-webkit-scrollbar-*` pseudo-elements */
@supports selector(::-webkit-scrollbar) {
    *::-webkit-scrollbar {
        width: 5px;
        background: var(--background-colour);
    }
    *::-webkit-scrollbar-thumb {
        background: var(--text-colour);
    }
}

/** We do some tomfoolery */
/** Inspired by: https://theme-toggle.rdsx.dev/ */
:root {
    view-transition-name: root;
}

::view-transition-new(root) {
    mask: url('https://media.tenor.com/cyORI7kwShQAAAAi/shigure-ui-dance.gif') center / 0 no-repeat;
    animation: scale 1.5s;
    animation-fill-mode: both;
}

::view-transition-old(root)
{
    animation: scale 1.5s;
    animation-fill-mode: both;
}

@keyframes scale {
    0% {
        mask-size: 0;
    }
    10% {
        mask-size: 50vmax;
    }
    90% {
        mask-size: 50vmax;
    }
    100% {
        mask-size: 2000vmax;
    }
}

.dark-theme .stepwrapper
{
    background-color: #151515 !important;
}

*
{
    padding: 0;
    margin: 0;
    font-size: 11pt;
}

html, body
{
    font-family: Open Sans, Arial, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue;
    padding: 0;
    margin: 0;
    background-color: var(--background-colour);
    color: var(--text-colour);
}

p
{
    margin-top: 1.5ex;
    margin-bottom: 1.5ex;
}

h1 { font-size: 28pt; }
h2 { font-size: 22pt; }
h3 { font-size: 16pt; }
h4 { font-size: 14pt; }
h5 { font-size: 13pt; }
h6 { font-size: 12pt; }

h1, h2, h3, h4, h5, h6
{
    margin-bottom: 1.5ex;
    margin-top: 1.8ex;
}

ol, ul
{
    margin-left: 2.0em;
    margin-top: 1.2ex;
    margin-bottom: 1.2ex;
}

li
{
    margin-top: 1.2ex;
    margin-bottom: 1.2ex;
}

li:first-child
{
    margin-top: 0;
}

li:last-child
{
    margin-bottom: 0;
}

blockquote
{
    margin-top: 2.0ex;
    margin-bottom: 2.0ex;
}

blockquote > :first-child
{
    margin-top: 0;
}

blockquote > :last-child
{
    margin-bottom: 0;
}

table + table
{
    margin-top: 2.0ex;
}

h1, h2, h3, h4, h5, h6, h1 > *, h2 > *, h3 > *, h4 > *, h5 > *, h6 > *
{
    font-weight: bold;
    color: var(--heading-colour);
}

a
{
    color: var(--link-colour);
    text-decoration: none;
    font-weight: bold;
    font-size: inherit;
}

a:hover {
    text-decoration: underline;
}

hr
{
    height: 3px;
    background: var(--background-accent);
    border: none;
}

.pageWrapper
{
    display: flex;
    flex-direction: row;
    max-height: 100vh;
    width: 100%;
}

.pageContent
{
    min-height: 100vh;
    overflow: auto;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.mainContent
{
    flex-grow: 1;
    align-self: center;
    padding: 0 1em;
    width: 100%;
    max-width: 1000px;
    box-sizing: border-box;
}

.mainContent details
{
    border-radius: 3px;
    background-color: var(--background-accent);
    padding: 1em;
}

.mainContent details p:last-child
{
    /* Inside a collapsible details element, the default margin on a final paragraph looks bad :( */
    margin-bottom: 0;
}

.mainContent details:open summary {
    padding-bottom: 0.5em;
    border-bottom: solid 3px var(--background-second-accent);
    margin-bottom: 1em;
}

.navbar
{
    overflow-x: hidden;
    overflow-y: visible;
    padding: 0.5em;
    background-color: var(--background-colour);
    user-select: none;
    border-right: solid 3px var(--background-accent);
    padding-bottom: 0;
    width: min-content;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.navbar > a, .navbar > details
{
    flex-shrink: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.navbar h1
{
    margin: 10px 20px 12px 5px;
    font-size: 22pt;
    white-space: nowrap;
}

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

.navbar > a, .navbar details > summary, .navbar details > div > a
{
    padding: 0.5em;
    transition: background-colour 0.5s;
    background-color: var(--background-colour);
}

.navbar > a.active, .navbar details > summary.active, .navbar details > div > a.active
{
    background-color: var(--background-accent);
}

.navbar > a:not(.active):hover, .navbar details > summary:not(.active):hover, .navbar details > div > a:not(.active):hover
{
    background-color: var(--background-accent);
}

.navbar details > div
{
    padding-left: 2em;

    display: flex;
    flex-direction: column;
}

.footer
{
    margin-top: 1em;
    display: flex;
    flex-direction: column;
    background-color: var(--background-colour);
    align-items: center;
    padding: 1em;
    border-top: solid 3px var(--background-accent);
}


button, .button, .btn
{
    display: inline-block;
    padding: 0.75em 1em;
    background-color: var(--button-colour);
    color: var(--button-text-colour);
    font-size: 1em;
    font-weight: bold;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: unset;
    box-shadow: 0px 0px 12px 0px var(--card-bottom-shadow-colour);
    transition: box-shadow 0.5s;
}

button:hover, .button:hover, .btn:hover
{
    box-shadow: 0px 0px 20px 2px var(--card-bottom-shadow-colour);
}

code
{
    font-family: 'Courier New', Courier, monospace;
}

pre:has(code)
{
    background: var(--code-background-colour);
    color: var(--text-colour);
    overflow: auto visible;
    border-radius: 8px;
}

pre > code
{
    display: inline-block;
    padding: 1em;
}

blockquote, .note, .warning, .info
{
    background: var(--background-accent);
    padding: 0.8em;
    border-radius: 6px;
    box-shadow: 0px 0px 12px 0px var(--card-bottom-shadow-colour);
    margin-left: 0;
    margin-right: 0;
}

.note
{
    background: var(--note-colour) !important;
}

.warning
{
    background: var(--warning-colour) !important;
}

.info
{
    background: var(--highlight-colour) !important;
}

div.info
{
    width: calc(100% - 2em);
    overflow: auto;
    padding: 1em;
}

img
{
    object-fit: contain;
    max-height: 50vh;
}

table
{
    max-width: 90vw;
    overflow-x: auto;
    display: table;
    border-collapse: separate;
    border-spacing: 0;
}

th, td
{
    border: 2px solid var(--background-second-accent);
    padding: 0.5em;
}

table > tbody > tr:nth-child(odd) > *
{
    background-color: var(--background-accent);
}

th
{
    background-color: var(--background-second-accent);
    color: var(--text-colour);
}

table > * > tr > *:not(:last-child)
{
    border-right: none;
}

table > *:not(:last-child) > tr > *, table > *:last-child > tr:not(:last-child) > *
{
    border-bottom: none;
}

table > *:first-child > tr:first-child > *:first-child
{
    border-top-left-radius: 8px;
}

table > *:first-child > tr:first-child > *:last-child
{
    border-top-right-radius: 8px;
}

table > *:last-child > tr:last-child > *:first-child
{
    border-bottom-left-radius: 8px;
}

table > *:last-child > tr:last-child > *:last-child
{
    border-bottom-right-radius: 8px;
}

.card
{
    border-radius: 3px;
    background: var(--background-colour);
    box-shadow: 0px 0px 16px 3px var(--card-bottom-shadow-colour);

    transition: box-shadow 0.5s;
    text-decoration: none;
    color: unset !important;
}

.card:hover
{
    box-shadow: 0px 0px 24px 6px var(--card-bottom-shadow-colour);
}

@media only screen and (max-width: 900px)
{
    /* Mobile */
    .pageWrapper
    {
        flex-direction: column;
        max-height: unset;
        min-height: 100vh;
    }

    .pageContent
    {
        min-height: 100vh;
        height: unset !important;
    }

    .navbar
    {
        width: 100%;
        box-sizing: border-box;
        border-right: none;
        border-bottom: solid 3px var(--background-accent);
    }
}


/* Google consent popup styles */
/**body > div.fc-consent-root > div.fc-dialog-container > div.fc-dialog.fc-choice-dialog, body > div.fc-consent-root > div.fc-help-dialog-container > div.fc-help-dialog, body > div.fc-consent-root > div.fc-dialog-container > div, body > div.fc-consent-root > div.fc-dialog-container > div > div.fc-dialog-content > div, body > div.fc-consent-root > div.fc-dialog-container > div > div.fc-dialog-header, body > div.fc-consent-root > div.fc-dialog-container > div > div.fc-dialog-content > div > div.fc-preferences-container > *
{
    background-color: #27262B !important;
}

body > div.fc-consent-root > div.fc-dialog-container > div.fc-dialog.fc-choice-dialog > div.fc-dialog-content > div > div.fc-faq-contents
{
    background-color: #302d36 !important;
}

body > div.fc-consent-root > div.fc-dialog-container > div.fc-dialog.fc-choice-dialog > div.fc-dialog-content > div > div.fc-header.fc-dialog-restricted-content > div > p, body > div.fc-consent-root > div.fc-dialog-container > div.fc-dialog.fc-choice-dialog > div.fc-dialog-content > div > div.fc-header.fc-dialog-restricted-content > h1, body > div.fc-consent-root > div.fc-dialog-container > div.fc-dialog.fc-choice-dialog > div.fc-dialog-content > div > div.fc-stacks.fc-dialog-restricted-content > ul > li > span, body > div.fc-consent-root > div.fc-dialog-container > div.fc-dialog.fc-choice-dialog > div.fc-dialog-content > div > button > *, body > div.fc-consent-root > div.fc-dialog-container > div.fc-dialog.fc-choice-dialog > div.fc-dialog-content > div > div.fc-footer.fc-dialog-restricted-content > *, body > div.fc-consent-root > div.fc-help-dialog-container > div.fc-help-dialog > h1, body > div.fc-consent-root > div.fc-help-dialog-container > div.fc-help-dialog > div.fc-help-dialog-contents > div > div, body > div.fc-consent-root > div.fc-dialog-container > div > div.fc-dialog-content > div > div.fc-preferences-container > * > *, body > div.fc-consent-root > div.fc-dialog-container > div > div.fc-dialog-content > div > div.fc-preferences-container > * > div.fc-preference-title > *, body > div.fc-consent-root > div.fc-dialog-container > div > div.fc-dialog-content > div > div.fc-preferences-container > * > label > *, body > div.fc-consent-root > div.fc-dialog-container > div > div.fc-dialog-content > div > div.fc-body.fc-dialog-restricted-content > *, body > div.fc-consent-root > div.fc-dialog-container > div > div.fc-dialog-header > div > p, body > div.fc-consent-root > div.fc-dialog-container > div > div.fc-dialog-content > div > div.fc-preferences-container > * > div.fc-preference-description > ul > *
{
    color: white !important;
}

body > div.fc-consent-root > div.fc-dialog-container > div.fc-dialog.fc-choice-dialog > div.fc-dialog-content > div > div.fc-faq-contents > ul > li > a > span
{
    color: #CCC !important;
}

body > div.fc-consent-root > div.fc-dialog-container > div.fc-dialog.fc-choice-dialog > div.fc-footer-buttons-container > div.fc-footer-buttons > button.fc-button.fc-cta-do-not-consent.fc-secondary-button > div, body > div.fc-consent-root > div.fc-dialog-container > div > div.fc-dialog-content > div > div.fc-navigation.fc-dialog-restricted-content > button
{
    display: inline-block !important;
    box-sizing: border-box !important;
    padding: 0.3em 1em !important;
    margin: 0 !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    color: #2c84fa !important;
    text-decoration: none !important;
    vertical-align: baseline !important;
    cursor: pointer !important;
    background-color: #302d36 !important;
    border-width: 0 !important;
    border-radius: 4px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08) !important;
    appearance: none !important;
}

body > div.fc-consent-root > div.fc-dialog-container > div.fc-dialog.fc-choice-dialog > div.fc-footer-buttons-container > div.fc-footer-buttons > button.fc-button.fc-cta-consent.fc-primary-button > div
{
    display: inline-block !important;
    box-sizing: border-box !important;
    padding: 0.3em 1em !important;
    margin: 0 !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    vertical-align: baseline !important;
    cursor: pointer !important;
    border-width: 0 !important;
    border-radius: 4px !important;
    appearance: none !important;
    color: #fff !important;
    background-color: #5739ce !important;
    background-image: linear-gradient(#6f55d5, #5739ce) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 4px 10px rgba(0, 0, 0, 0.12) !important;
}

body > div.fc-consent-root > div.fc-help-dialog-container > div.fc-help-dialog > div.fc-help-dialog-button-container
{
    background-color: #302d36 !important;
}

body > div.fc-consent-root > div.fc-dialog-container > div.fc-dialog.fc-choice-dialog > div.fc-footer-buttons-container > div.fc-footer-buttons > button.fc-button.fc-cta-do-not-consent.fc-secondary-button:hover > div, body > div.fc-consent-root > div.fc-help-dialog-container > div.fc-help-dialog > div.fc-help-dialog-button-container:hover, body > div.fc-consent-root > div.fc-dialog-container > div > div.fc-dialog-content > div > div.fc-navigation.fc-dialog-restricted-content > button:hover
{
    background-color: #2e2b33 !important;
}

body > div.fc-consent-root > div.fc-dialog-container > div.fc-dialog.fc-choice-dialog > div.fc-footer-buttons-container > div.fc-footer-buttons > button.fc-button.fc-cta-do-not-consent.fc-secondary-button:active > div, body > div.fc-consent-root > div.fc-help-dialog-container > div.fc-help-dialog > div.fc-help-dialog-button-container:active, body > div.fc-consent-root > div.fc-dialog-container > div > div.fc-dialog-content > div > div.fc-navigation.fc-dialog-restricted-content > button:active
{
    background-color: #29262e !important;
    background-image: none !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

body > div.fc-consent-root > div.fc-dialog-container > div.fc-dialog.fc-choice-dialog > div.fc-footer-buttons-container > div.fc-footer-buttons > button.fc-button.fc-cta-consent.fc-primary-button:hover > div
{
    color: #fff !important;
    background-color: #5132cb !important;
    background-image: linear-gradient(#6549d2, #5132cb) !important;
}

body > div.fc-consent-root > div.fc-dialog-container > div.fc-dialog.fc-choice-dialog > div.fc-footer-buttons-container > div.fc-footer-buttons > button.fc-button.fc-cta-consent.fc-primary-button:active > div
{
    background-color: #4f31c6 !important;
    background-image: none !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

body > div.fc-consent-root > div.fc-dialog-container > div.fc-dialog.fc-choice-dialog > div.fc-dialog-content > div > button > div
{
    background-color: #5739ce !important;
    background-image: linear-gradient(#6f55d5, #5739ce) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 4px 10px rgba(0, 0, 0, 0.12) !important;
    border: none !important;
}

body > div.fc-consent-root > div.fc-dialog-container > div.fc-dialog.fc-choice-dialog > div.fc-dialog-content > div > button > div > span.notranslate.faq-section-closed > svg, body > div.fc-consent-root > div.fc-dialog-container > div > div.fc-dialog-header > button > span > svg
{
    fill: white !important;
}**/