* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    position: relative;
}

html, body {
    width: 100%;
    height: 100%;
}

:root {
    --font-size: 16px;
    --line-height: 25px;
    --font-regular: 'Zen Maru Gothic', Verdana, Geneva, 'Dejavu Sans', sans-serif;
    --font-cursive: 'Hachi Maru Pop', cursive;
    --font-monospace: 'Victor Mono', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    --font-header: 'Electrolize', Verdana, 'Dejavu Sans', sans-serif;

    --site-max-width: 700px;
    --global-spacing: 4px;
    --global-spacing-0-5x: calc(var(--global-spacing) * 0.5);
    --global-spacing-1-5x: calc(var(--global-spacing) * 1.5);
    --global-spacing-2x: calc(var(--global-spacing) * 2);

    --traffic-border: #ebdfe0;

    --traffic-red: #ec5c62;
    --traffic-red-dark: #e55960;
    --traffic-red-darker: #c34c52;

    --traffic-yellow: #efeca4;
    --traffic-yellow-dark: #e7e5a0;
    --traffic-yellow-darker: #c5c388;

    --traffic-green: #5decd4;
    --traffic-green-dark: #59e5cd;
    --traffic-green-darker: #4cc3af;

    --logo-part1-colour: #fff;
    --logo-part2-colour: #f79293;
    --header-text-colour: #fff;

    /* keep everything that should be dark theme'd below this line */
    --background-colour: #9f8ff2;
    --container-colour: #fff;
    --container-border: #000;
    --text-colour: #000;
    --text-colour-inverted: #fff;
    --accent-colour1: #ffdd60;
    --accent-colour2: #f79293;
    --accent-colour2-dark: #ef8d8f;
    --accent-colour2-darker: #cd797a;
    --accent-colour3: #929cf7;
    --accent-colour3-dark: #8d97ef;
    --accent-colour3-darker: #7981cd;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-colour: #000;
        --container-colour: #12111d;
        --container-border: #ff60d1;
        --text-colour: #fff;
        --text-colour-inverted: #000;
        --accent-colour1: #ff60d1;
        --accent-colour2: #ff4493;
        --accent-colour2-dark: #f6438e;
        --accent-colour2-darker: #d4397a;
        --accent-colour3: #457eff;
        --accent-colour3-dark: #4379f6;
        --accent-colour3-darker: #3968d4;
    }
}

.hidden {
    display: none !important;
    visibility: hidden !important;
}

html {
    scrollbar-color: var(--accent-colour1) var(--background-colour);
    scrollbar-width: thin;
}

body {
    background-color: var(--background-colour);
    color: var(--text-colour);
    font-size: var(--font-size, 12px);
    line-height: var(--line-height, 20px);
    font-family: var(--font-regular);
}

.header {
    width: 100%;
    overflow: hidden;
    transition: height .5s;
    display: flex;
    flex-direction: column;
    color: var(--header-text-colour);
}

.header-background {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    overflow: hidden;
}
.header-background img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.3);
    filter: brightness(0.6) blur(12px);
}

.header-forehead {
    height: 300px;
    flex-shrink: 0;
    flex-grow: 0;
}

.header-foreground {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background-color: #0005;
    flex-shrink: 0;
    flex-grow: 0;
    text-shadow: 0 0 1px #000;
}

.header-main {
    width: 100%;
    max-width: calc(var(--site-max-width, 100%) + var(--global-spacing-1-5x));
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 var(--global-spacing-1-5x);
}

.header-logo {
    font-family: var(--font-header);
    color: transparent;
    text-decoration: none;
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    font-size: 2em;
    line-height: 1.5em;
    flex-shrink: 0;
    flex-grow: 0;
    margin: var(--global-spacing-0-5x);
}
.header-flash {
    color: var(--logo-part1-colour);
    white-space: pre;
}
.header-wave {
    color: var(--logo-part2-colour);
    white-space: pre;
}

.header-nav {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 1;
    flex-grow: 0;
    justify-content: flex-end;
    gap: var(--global-spacing);
    max-width: 700px;
}
.header-nav a {
    display: block;
    color: inherit;
    text-decoration: none;
    font-size: 1.2em;
    line-height: 1.4em;
    padding: var(--global-spacing-2x);
    transition: background-color .1s;
}
.header-nav a:hover,
.header-nav a:focus {
    background-color: #fff1;
}
.header-nav a:active {
    background-color: #0005;
}

.header-sub {
    width: 100%;
    background-color: #0005;
    display: flex;
    justify-content: center;
    padding: 0 var(--global-spacing-1-5x);
}

.header-breadcrumbs {
    width: 100%;
    max-width: var(--site-max-width, 100%);
    display: flex;
    align-items: center;
    font-size: .9em;
    line-height: 1.5em;
}
.header-breadcrumbs-sep {
    padding: 0 var(--global-spacing);
}
.header-breadcrumbs-link {
    display: block;
    color: inherit;
    text-decoration: none;
    padding: 0 var(--global-spacing);
    transition: background-color .1s;
}
.header-breadcrumbs-link:hover,
.header-breadcrumbs-link:focus {
    background-color: #fff1;
}
.header-breadcrumbs-link:active {
    background-color: #0005;
}

@media (max-width: 900px) {
    .header-forehead {
        display: none;
    }

    .header-main {
        flex-direction: column;
    }

    .header-nav {
        justify-content: center;
        max-width: initial;
    }
}

.footer {
    font-size: .9em;
    line-height: 1.5em;
    text-align: center;
    margin: 5px auto;
    max-width: var(--site-max-width);
}

.footer-spacing {
    height: var(--global-spacing);
}

.noscript {
    max-width: var(--site-max-width);
    margin: var(--global-spacing) auto 0;
    background: var(--traffic-red);
    border: 1px solid var(--container-border);
    padding: var(--global-spacing);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--global-spacing);
}

.noscript-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--traffic-red-darker);
    font-family: var(--font-cursive);
    font-size: 1.2em;
    line-height: 1.5em;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.noscript-icon-inner {
    width: 30px;
    height: 30px;
    line-height: 32px;
    margin-top: 3px;
    text-align: center;
    background: #fff;
    color: #000;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.noscript-text {
    font-size: 1.2em;
    line-height: 1.5em;
}

.columns {
    margin: 0 auto;
    padding: 0 var(--global-spacing);
    display: flex;
    max-width: calc(var(--site-max-width) + var(--global-spacing-2x));
    width: 100%;
    gap: var(--global-spacing);
}

.columns-side {
    flex-grow: 0;
    flex-shrink: 0;
    max-width: 260px;
    width: 100%;
}

.columns-left {
    order: 1;
}

.columns-right {
    order: 3;
}

.columns-centre {
    flex-grow: 1;
    flex-shrink: 1;
    order: 2;
}

@media (max-width: 1039px) {
    .columns {
        flex-direction: column;
        gap: var(--global-spacing-2x);
    }

    .columns-left {
        order: 2;
    }

    .columns-centre {
        order: 1;
    }

    .columns-side {
        max-width: 100%;
    }
}

.sidelist {
    background-color: var(--container-colour);
    border: 1px solid var(--container-border);
    margin-top: var(--global-spacing);
}

.sidelist-title {
    background-color: var(--accent-colour1);
    font-family: var(--font-header);
    font-weight: 700;
    font-size: 1.2em;
    line-height: 1.5em;
    padding: var(--global-spacing-0-5x) var(--global-spacing-1-5x) 0;
}

.sidelist-body {
    display: flex;
    flex-direction: column;
    padding: var(--global-spacing-0-5x);
}

.sidelist-body > p {
    font-size: 0.9em;
    line-height: 1.5em;
    margin: 0 0.1em 0.1em 0.1em;
}

.sidelist-body > p a {
    color: inherit;
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-color: var(--accent-colour3);
}
.sidelist-body > p a:visited {
    text-decoration-color: var(--accent-colour2);
}
.sidelist-body > p a:hover,
.sidelist-body > p a:focus {
    text-decoration-style: solid;
}
.sidelist-body > p a:active {
    text-decoration-style: dotted;
}

.sidelist-item {
    display: flex;
    font-size: .9em;
    padding: 0 var(--global-spacing-1-5x);
    border-bottom: 1px dashed var(--text-colour);
    gap: var(--global-spacing);
    align-items: baseline;
}

.sidelist-item-link {
    color: inherit;
    text-decoration: inherit;
}
.sidelist-item-link:hover,
.sidelist-item-link:focus {
    border-bottom-style: solid;
}
.sidelist-item-link:active {
    border-bottom-style: dotted;
}

.sidelist-item-icon {
    top: 1px;
    display: inline-block;
    font-weight: 700;
    font-size: var(--font-size);
    width: var(--font-size);
    line-height: var(--font-size);
    text-align: center;
    font-family: var(--font-cursive);
}
.sidelist-item-icon img {
    vertical-align: bottom;
}

.sidelist-item-label {
    display: inline-block;
}

.sidelist-empty {
    margin: var(--global-spacing-2x) auto;
}
.sidelist-empty-icon {
    display: inline-block;
    font-family: var(--font-cursive);
}
.sidelist-empty-label {
    display: inline-block;
}

.np {
    background: var(--accent-colour1);
    border: 1px solid var(--container-border);
    margin-top: var(--global-spacing);
    overflow: hidden;
}

.np-header {
    font-size: .8em;
    line-height: 1.5em;
    padding: 0 2px;
}
.np-header-icon {
    font-family: var(--font-cursive);
    padding: 2px;
}
.np-header-text {
    font-family: var(--font-header);
}

.np-cover {
    display: block;
    margin: 1px auto;
    width: 178px;
    height: 178px;
    flex-grow: 0;
    flex-shrink: 0;
    border: 1px solid var(--container-colour);
    background: var(--container-colour);
}
.np-cover img {
    width: 100%;
    height: 100%;
    vertical-align: middle;
    object-fit: cover;
    border: 1px solid var(--accent-colour1);
}

.np-details {
    margin: 0 4px 2px;
    text-align: center;
}
.np-details a {
    color: inherit;
    text-decoration: none;
}
.np-details a:hover,
.np-details a:focus {
    text-decoration: underline;
}

.np-title {
    font-size: 1.2em;
    line-height: 1.5em;
}
.np-artist {
    font-size: .9em;
    line-height: 1.5em;
}

.sidecontact-site {
    font-weight: 700;
}

.badges {
    margin-top: var(--global-spacing);
    background: var(--container-colour);
    border: 1px solid var(--container-border);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: var(--global-spacing-0-5x);
    padding: var(--global-spacing);
}

.badges-item {
    display: flex;
    justify-content: center;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.badges-item img {
    display: block;
    image-rendering: crisp-edges;
    width: 88px;
    height: 31px;
    flex-shrink: 0;
    flex-grow: 0;
}

.project {
    border: 1px solid var(--container-border);
    background-color: var(--container-colour);
    margin-top: var(--global-spacing);
}

.project h2 {
    font-size: 1.5em;
    line-height: 1.4em;
    font-weight: 700;
    font-family: var(--font-header);
    background-color: var(--project-colour);
    padding: var(--global-spacing-0-5x) var(--global-spacing);
}

.project p {
    margin: var(--global-spacing-0-5x) var(--global-spacing);
}

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--global-spacing-2x);
    margin: var(--global-spacing);
}

.project-tag {
    color: var(--text-colour);
    border-left: var(--global-spacing) solid var(--tag-colour, var(--accent-colour2));
    padding: 0 var(--global-spacing);
}

.project-tag-link {
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-color: var(--tag-colour, var(--accent-colour3));
}
.project-tag-link:visited {
    text-decoration-color: var(--accent-colour2);
}
.project-tag-link:hover,
.project-tag-link:focus {
    text-decoration-style: solid;
}
.project-tag-link:active {
    text-decoration-style: dotted;
}

.index {
    margin-top: var(--global-spacing);
    background-color: var(--container-colour);
    border: 1px solid var(--container-border);
}

.index h1 {
    font-size: 2em;
    --header-colour: var(--accent-colour1);
}

.index h2 {
    font-size: 1.5em;
    --header-colour: var(--accent-colour2);
    margin-top: 1em;
}

.index h1,
.index h2 {
    line-height: 1.4em;
}

.index h1 span,
.index h2 span {
    display: inline-block;
    background-color: var(--header-colour);
    padding: 0 .5rem 0 1rem;
}

.index p {
    margin: .5rem 1rem;
}

.index p code {
    font-family: var(--font-monospace);
    font-size: .8em;
}

.index p a {
    color: inherit;
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-color: var(--accent-colour3);
}
.index p a:visited {
    text-decoration-color: var(--accent-colour2);
}
.index p a:hover,
.index p a:focus {
    text-decoration-style: solid;
}
.index p a:active {
    text-decoration-style: dotted;
}