@font-face {
    font-family: 'Exo';
    src: url('../fonts/Exo2-ExtraLight.ttf') format("opentype");
    font-weight: 200;
}

@font-face {
    font-family: 'Exo';
    src: url('../fonts/Exo2-ExtraLightItalic.ttf') format("opentype");
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'Exo';
    src: url('../fonts/Exo2-Light.ttf') format("opentype");
    font-weight: 300;
}

@font-face {
    font-family: 'Exo';
    src: url('../fonts/Exo2-LightItalic.ttf') format("opentype");
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Exo';
    src: url('../fonts/Exo2-Regular.ttf') format("opentype");
    font-weight: 500;
}

@font-face {
    font-family: 'Exo';
    src: url('../fonts/Exo2-Italic.ttf') format("opentype");
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Exo';
    src: url('../fonts/Exo2-SemiBold.ttf') format("opentype");
    font-weight: 700;
}

@font-face {
    font-family: 'Exo';
    src: url('../fonts/Exo2-Black.ttf') format("opentype");
    font-weight: 900;
}

*, ::after, ::before {
    box-sizing: border-box;
}

/* Structure */
body {
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
} 

.no-js body {
    display: flex;
}

.js body {
    display: none;
}

header.root nav ul {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

header.root nav ul li {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    border-right: 1px solid;
}

header.root nav ul li:last-of-type {
    border: 0;
}

header.root nav a.wayfinder {
    display: inline-flex;
    align-items: center;
    padding: 0.5em 1em;
}

header.root nav a.wayfinder .arrow {
    width: 1em;
}

header.root nav a.wayfinder.on-left {
    justify-content: start;
}

header.root nav a.wayfinder.on-left .destination {
    margin-left: .5em;
}

header.root nav a.wayfinder.on-right {
    justify-content: end;
    text-align: right;
}

header.root nav a.wayfinder.on-right .destination {
    margin-right: .5em;
}

#lightdark {
    display: inline-flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: end;

    margin-top: .5em;
    margin-right: .5em;
    cursor: pointer;
}

#lightdark .light, #lightdark .dark {
    width: 10px;
    height: 20px;

    display: inline-flex;
    align-items: center;
}

#lightdark .marker {
    display: inline-block;
    width: 8px;
    height: 16px;
}

#lightdark .light {
    justify-content: flex-end;
    border-radius: 10px 0px 0px 10px;
}

#lightdark .light .marker {
    border-radius: 8px 0px 0px 8px;
}

#lightdark .dark {
    justify-content: flex-start;
    border-radius: 0px 10px 10px 0px;
}

#lightdark .dark .marker {
    border-radius: 0px 8px 8px 0px;
}

header.root {
    margin: 0 auto 1em auto;
    width: 600px;
    border: 1px solid;
}

header.root h1 {
    padding: .5em 0;
    margin: 0;
}

header.root h2 {
    padding: 0 0 .5em 0;
    margin: 0;
}

article.prompt,
article.welcome,
article.story,
article.highlights {
    margin: 0 auto;
    /* TODO(matt): Consider this max-width */
    width: 600px;
}

article.prompt {
    border: 1px solid;
}

article.prompt a,
article.prompt span.button {
    border: 2px solid;
    padding: 0.32rem;
}

article.prompt span.button {
    cursor: default;
}

article.highlights ul {
    padding: 0;
    list-style: none;
}

article.highlights ul li a {
    display: flex;
    padding: 16px;
    margin: 4px;
    border-radius: 8px;
}

article.highlights ul li a img {
    height: 60px;
    width: 60px;
}

article.highlights ul li a .text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 16px;
    width: 100%;
}

article.highlights ul li a .text .title-and-date {
    display: flex;
    justify-content: space-between;
}

/* /Structure */

/* Typography */
body {
    line-height: 1.25em;
    -webkit-font-smoothing: antialiased;
    font-family: 'Exo', sans-serif;
}

header.root a.page-title,
header.root nav a.wayfinder {
    font-style: normal;
    text-decoration: none;
    text-decoration-line: none;
    text-decoration-thickness: 0;
}

header.root nav a {
    vertical-align: middle;
}

header.root nav a .arrow {
    font-size: 1.8em;
}

header.root nav a .destination {
    font-size: 1.2em;
}

/* TODO(matt): Remove, if we omit the image */
header.root nav img {
    /*
    vertical-align: text-bottom;
    */
    /* TODO(matt): Figure out how to align this image more rigorously */
    translate: 0px 4px;
}

header.root {
    font-size: 1.25em;
}

header.root h1 {
    font-size: 2.5em;
    font-weight: 900;
    line-height: 0.95em;
    text-align: center;
    text-wrap: balance;
}

header.root h2 {
    font-size: 1em;
    font-weight: 500;
    line-height: 1.25em;
    text-align: center;
    text-wrap: balance;
}

cite,
a {
    font-style: italic;
}

a,
a:hover,
a:link,
a:visited {
    text-decoration-line: underline;
}

a {
    text-decoration-thickness: 2px;
}

a:hover {
    text-decoration-thickness: 4px;
}

article.prompt {
    font-family: monospace;
}

article.prompt a,
article.prompt span.button {
    font-style: italic;
    text-decoration: none;
}

article.prompt p {
    margin: 0.8rem 1rem;
}

article.prompt.access-denied p::before {
    content: "$ ";
}

article.prompt.access-granted p::before {
    content: "# ";
}

article.prompt p:first-child {
    margin-top: 1em;
}

article.prompt p:last-child {
    margin-bottom: 1em;
}

article.welcome,
article.highlights > p {
    text-align: justify;
    /*
    text-wrap: balance;
    */
}

article.highlights ul li a img {
    align-self: center;
    object-fit: none;
}

article.highlights ul li a {
    font-style: normal;
    text-decoration: none;
}

article.highlights ul li a .title {
    font-size: 1.5em;
}

article.highlights ul li a .date {
    font-size: 0.8em;
    font-weight: 300;
    text-align: right;
}

article.highlights ul li a .description {
    font-weight: 300;
}
/* /Typography */

/* Colour */
/* Colour Palette */
:root {
    /* Light mode variables */
    --light-background_0: #FFFFFF;
    --light-background_1: #C8E8C0;
    --light-background_2: #E4E4E4;
    --light-background_3: #D4D4D4;
    --light-foreground_0: #486040;
    --light-foreground_1: #51B84A;
    --light-foreground_2: #A0B080;
    --light-highlight_0: #1030E0;
    --light-highlight_1: #F05010;
    --light-switcher-light: var(--light-background_0);
    --light-switcher-dark: var(--light-foreground_0);
    --light-switcher-outline: var(--light-switcher-dark);

    /* Dark mode variables */
    --dark-background_0: #0C0C0C;
    --dark-background_1: #243424;
    --dark-background_2: #202020;
    --dark-background_3: #303030;
    --dark-foreground_0: #90B080;
    --dark-foreground_1: #51B84A;
    --dark-foreground_2: #50744C;
    --dark-highlight_0: #2090F0;
    --dark-highlight_1: #D08F20;
    --dark-switcher-light: var(--dark-foreground_0);
    --dark-switcher-dark: var(--dark-background_0);
    --dark-switcher-outline: var(--dark-switcher-light);

    /* Default variables */
    --background_0:     var(--light-background_0);
    --background_1:     var(--light-background_1);
    --background_2:     var(--light-background_2);
    --background_3:     var(--light-background_3);
    --foreground_0:     var(--light-foreground_0);
    --foreground_1:     var(--light-foreground_1);
    --foreground_2:     var(--light-foreground_2);
    --highlight_0:      var(--light-highlight_0);
    --highlight_1:      var(--light-highlight_1);
    --switcher-light:   var(--light-switcher-light);
    --switcher-dark:    var(--light-switcher-dark);
    --switcher-outline: var(--light-switcher-outline);
}

@media (prefers-color-scheme: light) {
    :root {
        --background_0:     var(--light-background_0);
        --background_1:     var(--light-background_1);
        --background_2:     var(--light-background_2);
        --background_3:     var(--light-background_3);
        --foreground_0:     var(--light-foreground_0);
        --foreground_1:     var(--light-foreground_1);
        --foreground_2:     var(--light-foreground_2);
        --highlight_0:      var(--light-highlight_0);
        --highlight_1:      var(--light-highlight_1);
        --switcher-light:   var(--light-switcher-light);
        --switcher-dark:    var(--light-switcher-dark);
        --switcher-outline: var(--light-switcher-outline);
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --background_0:     var(--dark-background_0);
        --background_1:     var(--dark-background_1);
        --background_2:     var(--dark-background_2);
        --background_3:     var(--dark-background_3);
        --foreground_0:     var(--dark-foreground_0);
        --foreground_1:     var(--dark-foreground_1);
        --foreground_2:     var(--dark-foreground_2);
        --highlight_0:      var(--dark-highlight_0);
        --highlight_1:      var(--dark-highlight_1);
        --switcher-light:   var(--dark-switcher-light);
        --switcher-dark:    var(--dark-switcher-dark);
        --switcher-outline: var(--dark-switcher-outline);
    }
}

body.theme_light {
    --background_0:     var(--light-background_0);
    --background_1:     var(--light-background_1);
    --background_2:     var(--light-background_2);
    --background_3:     var(--light-background_3);
    --foreground_0:     var(--light-foreground_0);
    --foreground_1:     var(--light-foreground_1);
    --foreground_2:     var(--light-foreground_2);
    --highlight_0:      var(--light-highlight_0);
    --highlight_1:      var(--light-highlight_1);
    --switcher-light:   var(--light-switcher-light);
    --switcher-dark:    var(--light-switcher-dark);
    --switcher-outline: var(--light-switcher-outline);
}

body.theme_dark {
    --background_0:     var(--dark-background_0);
    --background_1:     var(--dark-background_1);
    --background_2:     var(--dark-background_2);
    --background_3:     var(--dark-background_3);
    --foreground_0:     var(--dark-foreground_0);
    --foreground_1:     var(--dark-foreground_1);
    --foreground_2:     var(--dark-foreground_2);
    --highlight_0:      var(--dark-highlight_0);
    --highlight_1:      var(--dark-highlight_1);
    --switcher-light:   var(--dark-switcher-light);
    --switcher-dark:    var(--dark-switcher-dark);
    --switcher-outline: var(--dark-switcher-outline);
}
/* /Colour Palette */

/* Colour Application */
body {
    background: var(--background_0);
    color: var(--foreground_0);
}

#lightdark .light, #lightdark .dark {
    background-color: var(--switcher-outline);
}

#lightdark .light .marker {
    background-color: var(--switcher-light);
}

#lightdark .dark .marker {
    background-color: var(--switcher-dark);
}

header.root a.page-title h1,
header.root h1.page-title,
header.root h2.page-title {
    background: var(--background_1);
    color: var(--foreground_1);
}

header.root nav ul li {
    border-color: var(--background_1);
}

header.root nav a.wayfinder {
    background: var(--background_2);
    color: var(--foreground_0);
}

header.root nav a.wayfinder.current {
    color: var(--highlight_1);
}

header.root nav a.wayfinder:hover {
    background: var(--background_3);
}

cite,
a,
article.prompt span.button {
    color: var(--highlight_0);
}

article.prompt {
    border-color: var(--highlight_1);
}

article.prompt.access-denied p::before {
    color: var(--foreground_2);
}

article.prompt.access-granted p::before {
    color: var(--foreground_1);
}

article.prompt a,
article.prompt span.button {
    border-color: var(--foreground_2);
}

article.prompt a:hover,
article.prompt span.button:hover {
    background-color: var(--background_2);
    border-color: var(--foreground_1);
}

article.highlights ul li a {
    background-color: var(--background_2);
}

article.highlights ul li a:hover {
    background-color: var(--background_3);
}

article.highlights ul li a .title {
    color: var(--highlight_1);
}

article.highlights ul li a .date {
    color: var(--foreground_2);
}

article.highlights ul li a .description {
    color: var(--foreground_0);
}
/* /Colour Application */
/* /Colour */