:root {
    /* WCAG AAA Compliant colors */
    --code-bg: #f4f8f9;
    --gray-bg: #f4f8f9;
    --gray: #717171;
    --orange: #bf5000;
    --green: #0b8400;
    --light-cyan: #8af4e6;
    --dark-cyan: #4eefd9;
    --blue: #05006d;
    --violet: #7c38f5;
    --violet-bg: #ece2fd;
    --magenta: #ff32cf;

    --primary-1: #9b6bf2;
    --primary-2: #7c38f5;
    --highlight: #1bd6bd;
    --code-color: white;
    --link-color: var(--primary-2);
    --code-link-color: var(--primary-2);
    --text-color: #000;
    --heading-color: #333;
    --text-hover-color: var(--primary-2);
    --body-bg-color: #ffffff;
    --border-color: #717171;
    --faded-color: #4c4c4c;
    --font-sans: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial,
        sans-serif;
    --font-mono: "Source Code Pro", SFMono-Regular, Consolas, "Liberation Mono",
        Menlo, Courier, monospace;
    --top-header-height: 67px;
    --sidebar-width: 280px;

    --font-size-normal: 18px;
    --body-max-width: 1024px;
    --dark-code-bg: #202746;

    /* Tutorial */
    --header-link-color: #1bbcb3;
    --header-link-hover: #222;
    --h1-color: #8055e4;
    --tutorial-h3-color: #8c5ce3; /* Slightly darker than --primary-1, which looks washed-out in <h3>s */
}

html {
    line-height: 1.5rem;
    background: var(--body-bg-color);
    color: var(--text-color);
    font-family: "Lato", sans-serif;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow-x: hidden; /* This shouldn't be necessary, but without it mobile has a right gutter. */
}

p {
    margin-top: 0;
}

details summary {
    cursor: pointer;
    color: var(--primary-1);
}

details summary:hover {
    color: var(--primary-2);
}

p,
li,
details {
    max-width: 720px;
}

footer {
    width: 100%;
    color: var(--text-color);
    text-align: center;
    font-size: var(--font-size-normal);
    padding: 20px;
    box-sizing: border-box;
    margin-top: 24px;
}

#footer {
    max-width: var(--body-max-width);
    margin: 0 auto;
}

hr {
    color: var(--primary-1);
    margin-bottom: 1rem;
}

.svg-text {
    fill: #000;
}

.logo-dark {
    fill: #612bde;
}

.logo-light {
    fill: #8257e5;
}

.btn-small {
    white-space: nowrap;
    background: #7c38f5;
    border: 4px solid #9b6bf2;
    color: #fff !important;
    cursor: pointer;
    text-decoration: none !important;
    padding: 12px;
}

.btn-small .roc-logo {
    fill: #fff;
    position: relative;
    left: -4px;
    top: 11px;
}

.btn-small:hover {
    background: #9b6bf2;
    border-color: #7c38f5;
}

#individual-sponsors {
    list-style-type: none;
    padding: 24px 40px;
    max-width: 720px;
}

#individual-sponsors li {
    display: inline;
    white-space: nowrap;
    margin: 0.2rem;
}

#individual-sponsors li::after {
    content: ",";
    white-space: pre; /* Preserve the space after the comma */
}

#individual-sponsors li:last-child::after {
    content: ""; /* No comma after the last one */
}

#sponsor-logos {
    padding: 24px 36px;
    padding-bottom: 36px;
    min-width: 308px; /* Widest logo plus padding - Firefox on Android needs this */
    max-width: none !important;
}

#sponsor-logos svg {
    height: 64px;
    margin-right: 72px;
    margin-top: 32px;
}

#sponsor-logos .logo-rwx {
    position: relative;
    top: 6px;
}

#sponsor-logos .logo-tweede-golf {
    position: relative;
    top: 14px;
    height: 4.5rem;
}

#sponsor-logos .logo-decem .cls-1 {
    fill: #04021e;
}

#sponsor-logos + p {
    margin-bottom: 3em;
}

/* Used for e.g. displaying the instruction "Click" on desktop and "Touch" on mobile.
 * When we think we're on mobile (based on max-width), we can switch the instruction.
*/
.desktop {
    display: inline;
}

.mobile {
    display: none;
}

section p:last-child {
    margin-bottom: 0;
}

aside {
    margin-left: 4rem;
}

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

a:hover {
    text-decoration: underline;
}

a:hover code {
    text-decoration: inherit;
}

li {
    margin-bottom: 0.5rem;
}

h1,
h2,
h3,
h4 {
    font-weight: bold;
}

h1 {
    font-size: 5rem;
    line-height: 1.2;
}

h2 {
    display: inline-block;
    font-size: 2.5rem;
    line-height: 5rem;
    border-bottom: 4px solid var(--dark-cyan);
    padding: 0;
    margin: 0;
    margin-bottom: 2rem;
    color: var(--heading-color);
}

.article-layout main,
.article-layout pre {
    max-width: 720px;
}

.article-layout p,
.article-layout li,
.article-layout pre,
.article-layout details {
    font-size: 20px;
}

#homepage-main h2 {
    margin-top: 60px; /* On the homepage, these need to be spaced out more. */
}

#homepage-main #nav-home-link {
    visibility: hidden;
}

h2 a,
h3 a {
    color: var(--heading-color);
}

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

h3 {
    font-size: 1.5rem;
}

#top-bar,
#top-bar nav {
    background-color: var(--gray-bg);
}

#top-bar {
    box-sizing: border-box;
    width: 100%;
}

#top-bar nav {
    max-width: var(--body-max-width);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding-right: 9px;
}

#nav-home-link {
    display: inline-block;
    color: var(--top-bar-fg);
    font-size: 1.8rem;
    padding: 4px;
}

#tutorial-toc-toggle:checked + #tutorial-toc {
    display: block;
}

.home-link-text {
    padding: 8px;
    font-size: 24px;
    position: relative;
    top: -0.6rem;
}

.home-examples-title {
    margin-bottom: 4px;
}

#top-bar-links a,
#top-bar-links label {
    box-sizing: border-box;
    color: var(--top-bar-fg);
    display: inline-block;
    padding: 12px 16px;
    margin: 0 2px;
}

main {
    max-width: var(--body-max-width);
    margin: auto;
    padding: 12px;
    box-sizing: border-box;
}

.welcome-to-roc {
    white-space: nowrap;
    overflow-x: hidden;
    padding-right: 60px;
    margin-bottom: 12px;
}

code,
samp {
    font-family: var(--font-mono);
    color: var(--text-color);
    background-color: var(--gray-bg);
    display: inline-block;
    padding: 5px;
}

p code,
td code,
li code,
th code {
    padding: 0 8px;
}

code a,
a code {
    text-decoration: none;
    color: var(--code-link-color);
    background: none;
    padding: 0;
}

code a:visited,
a:visited code {
    color: var(--code-link-color);
}

pre {
    position: relative;
    margin-bottom: 16px;
    padding: 0 0.35rem;
    box-sizing: border-box;
    background-color: var(--gray-bg);
    overflow-x: hidden;
    word-wrap: normal;
    font-size: var(--font-size-normal);
    line-height: 1.76em;
    white-space: pre;
    background-color: var(--dark-code-bg);
}

pre > samp,
pre > code {
    overflow-x: auto;
    display: block;
    background-color: var(--dark-code-bg);
    color: var(--code-color);
}

/* The repl won't work at all if you have JS disabled. */
.no-js #try-roc {
    display: none !important;
}

#homepage-repl-container {
    display: flex;
    flex-direction: row-reverse;
}

#homepage-repl-container #repl-description {
    padding: 0 30px;
    margin-top: 2px;
    flex: 1;
}

#homepage-repl-container #repl-description a {
    color: inherit;
    text-decoration: underline;
}

#homepage-repl-container #repl-description a:hover {
    color: var(--primary-1);
}

#homepage-repl-container #repl {
    flex: 1;
    border: 2px solid #444;
    font-size: var(--font-size-normal);
    min-height: 0; /* On /repl on mobile, this expands to fill the screen, which we don't want */
    margin-right: 6px;
    max-width: 50%;
}

#homepage-repl-container #repl,
#homepage-repl-container #repl code,
#homepage-repl-container #source-input {
    color: white;
    background-color: var(--dark-code-bg);
}

#homepage-repl-container #source-input {
    margin-bottom: 0;
    margin-top: 6px;
    font-size: var(--font-size-normal);
    height: 57px;
}

#homepage-repl-container p {
    position: relative; /* Needed for the repl arrow's position: absolute */
}

#homepage-repl-container #repl-arrow {
    cursor: default;
    font-weight: bold;
    font-size: 48px;
    position: absolute;
    top: -9px;
    left: -79px;
    text-shadow: 1px 1px 1px #444;
    z-index: 3;
    fill: var(--primary-1);
}

.repl-err {
    color: var(--magenta);
}

/* Tables */

table {
    border-collapse: collapse;
    overflow-x: auto;
    border: 2px solid #f0f0f0;
    margin-bottom: 1rem;
}

thead {
    border: none;
}

tbody {
    border: none;
}

tr {
    border: none;
    border-top: 2px solid #f0f0f0;
}

th,
td {
    border: none;
    border-right: 2px solid #f0f0f0;
    padding: 12px;
}

th:last-child,
td:last-child {
    border-right: none;
}

p,
aside,
li,
details {
    font-size: var(--font-size-normal);
    line-height: 1.85rem;
}

/* Homepage */
#homepage-intro-outer {
    margin: 60px auto;
    text-align: center;
}

#homepage-intro-box {
    position: relative;
    display: inline-block;
    text-align: left;
}

#homepage-h1 {
    color: #222;
    text-shadow: none;
    font-family: inherit;
    font-size: 64px;
    padding: 0;
    padding-top: 60px;
    position: relative;
    left: -5px;
}

#homepage-logo {
    height: 176px;
    width: auto;
    position: absolute;
    left: -200px;
    top: -100px;
}

#first-code-sample {
    margin-top: 60px;
    line-height: 1.85em;
    color: #fcf9fd;
}

#first-code-sample .kw,
#first-code-sample .punctuation,
.interactive-example .kw,
.interactive-example .punctuation {
    color: #9c7cea;
}

#first-code-sample,
#first-code-sample .code-snippet {
    background-color: var(--dark-code-bg);
}

#homepage-tagline {
    font-size: 20px;
}

.nowrap {
    white-space: nowrap;
}

/* Mobile-friendly screen width */
@media only screen and (max-width: 1023px) {
    :root {
        --font-size-normal: 16px;
        --body-max-width: none;
    }

    #tutorial-main main,
    #tutorial-toc-toggle-label,
    #close-tutorial-toc {
        display: block !important;
    }

    #tutorial-toc {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: auto;
        margin: 0 !important;
        padding-right: 120px;
        border: 0;
    }

    #homepage-logo {
        /* The bird runs off the screen unless we shrink it */
        height: 80px;
        width: auto;
        position: absolute;
        left: 227px;
        top: -28px;
    }

    #homepage-main #nav-home-link {
        display: none;
    }

    #sponsor-logos {
        padding: 4px;
    }

    .home-examples-column {
        padding-right: 0 !important;
        border-right: none !important;
    }

    /* Used for e.g. displaying the instruction "Click" on desktop and "Touch" on mobile. */
    .desktop {
        display: none;
    }

    .mobile {
        display: inline;
    }

    h2 {
        margin-top: 48px;
        padding: 12px 0;
    }

    .home-link-text {
        display: none; /* Don't show "Roc" in the header next to the logo, to save space */
    }

    h1 code,
    h2 code,
    h3 code,
    h4 code,
    h5 code {
        font-size: inherit;
    }

    code {
        white-space: normal;
    }

    /* Homepage */

    #homepage-intro-box {
        margin: 30px auto;
    }

    #homepage-tagline {
        margin-top: 0;
    }

    #homepage-h1 {
        /* TODO remove !important from repl.css (increasing specificity instead), and then this one too. */
        font-size: 48px !important;
        padding: 0;
        margin: 0;
        text-align: left;
    }

    #first-code-sample {
        margin: 64px auto;
        margin-bottom: 0;
    }

    #homepage-tagline {
        font-size: 16px;
    }

    .home-goals-container,
    .home-examples-container {
        /* It's unclear why this !important is necessary, since its specificity
         should theoretically be higher than what it's overriding. In practice,
         at least in Chrome, removing the !important breaks this. */
        display: grid !important;
        grid-template-columns: 1fr;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    code {
        word-break: break-word !important;
    }

    h1,
    h2,
    h3,
    h4,
    h5 {
        line-height: 1.2em !important;
        font-size: 2rem !important;
        width: auto;
    }

    #top-bar-links {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr; /* Three equal-width columns */
        grid-template-rows: auto auto; /* Two rows */
    }

    /* Left-align the first link in each row, right-align the last one, and center the middle one. */
    #top-bar-links > :nth-child(3n + 1) {
        text-align: left;
    }

    #top-bar-links > :nth-child(3n + 2) {
        text-align: center;
    }

    #top-bar-links > :nth-child(3n + 3) {
        text-align: right;
    }

    #top-bar-links a,
    #top-bar-links label {
        font-size: 1.2rem;
        padding: 12px 0.5rem;
        margin: 0;
    }

    #homepage-repl-container #repl {
        max-width: none;
    }
}

/* iPhone SE and similar */
@media only screen and (max-width: 320px) {
    #homepage-logo {
        /* The bird runs off the screen unless we shrink it */
        left: 188px;
        top: -30px;
    }

    :root {
        --font-size-normal: 14px;
        --body-max-width: 320px;
    }
}

@font-face {
    font-family: "Permanent Marker";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src:
        url("/fonts/permanent-marker-v16-latin/permanent-marker-v16-latin-regular.woff2")
            format("woff2"),
        url("/fonts/permanent-marker-v16-latin/permanent-marker-v16-latin-regular.woff")
            format("woff");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
        U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src:
        url("/fonts/lato-v23-latin-ext_latin/lato-v23-latin-ext_latin-regular.woff2")
            format("woff2"),
        url("/fonts/lato-v23-latin-ext_latin/lato-v23-latin-ext_latin-regular.woff")
            format("woff");
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
        U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src:
        url("/fonts/lato-v23-latin/lato-v23-latin-regular.woff2")
            format("woff2"),
        url("/fonts/lato-v23-latin/lato-v23-latin-regular.woff") format("woff");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
        U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
    font-family: "Source Code Pro";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src:
        url("/fonts/source-code-pro-v22-latin-ext_latin/source-code-pro-v22-latin-ext_latin-regular.woff2")
            format("woff2"),
        url("/fonts/source-code-pro-v22-latin-ext_latin/source-code-pro-v22-latin-ext_latin-regular.woff")
            format("woff");
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
        U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: "Source Code Pro";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src:
        url("/fonts/source-code-pro-v22-latin/source-code-pro-v22-latin-regular.woff2")
            format("woff2"),
        url("/fonts/source-code-pro-v22-latin/source-code-pro-v22-latin-regular.woff")
            format("woff");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
        U+2215, U+FEFF, U+FFFD;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* WCAG AAA Compliant colors */
        --code-bg: #202746;
        --gray-bg: #202746;
        --gray: #b6b6b6;
        --orange: #fd6e08;
        --green: #8ecc88;
        --cyan: #12c9be;
        --blue: #b1afdf;
        --violet-bg: #332944;
        --magenta: #f39bac;

        --primary-1: #9c7cea;
        --primary-2: #1bd6bd;
        --text-color: #ccc;
        --body-bg-color: #151517;
        --border-color: var(--gray);
        --code-color: #eeeeee;
        --logo-solid: #8f8f8f;
        --faded-color: #bbbbbb;
        --gray: #6e6e6e;
        --heading-color: #eee;

        /* Tutorial */
        --header-link-color: #9c7cea;
        --header-link-hover: #ddd;
        --h1-color: #1bc6bd;
        --tutorial-h3-color: var(--primary-1);
    }

    .logo-dark {
        fill: #6c3bdc;
    }

    .logo-light {
        fill: #8a66de;
    }

    .svg-text {
        fill: #fff;
    }

    #homepage-h1 {
        color: #fcf9fd;
    }

    h3 {
        color: #fff;
    }

    h1,
    h2,
    h3,
    h4,
    h5 {
        text-shadow: none;
    }

    html {
        scrollbar-color: #444444 #2f2f2f;
    }

    table,
    tr,
    th,
    td {
        border-color: var(--gray);
    }

    #first-code-sample,
    #homepage-repl-container #repl {
        border: 1px solid #ddd;
    }

    .home-goals-content:hover {
        background-color: #481870 !important;
    }

    #sponsor-logos .logo-decem .cls-1 {
        fill: #fff;
    }
}

/* Comments `#` and Documentation comments `##` */
samp .comment,
code .comment {
    color: #ccc;
}

/* Number, String, Tag literals */
samp .storage.type,
code .storage.type,
samp .string,
code .string,
samp .string.begin,
code .string.begin,
samp .string.end,
code .string.end,
samp .constant,
code .constant,
samp .literal,
code .literal {
    color: var(--dark-cyan);
}

/* Keywords and punctuation */
samp .keyword,
code .keyword,
samp .punctuation.section,
code .punctuation.section,
samp .punctuation.separator,
code .punctuation.separator,
samp .punctuation.terminator,
code .punctuation.terminator,
samp .kw,
code .kw {
    color: var(--primary-1);
}

/* Operators */
samp .op,
code .op,
samp .keyword.operator,
code .keyword.operator,
samp .colon,
code .colon {
    color: var(--primary-1);
}

/* Delimieters */
samp .delimeter,
code .delimeter {
    color: var(--primary-1);
}

/* Variables modules and field names */
samp .function,
code .function,
samp .meta.group,
code .meta.group,
samp .meta.block,
code .meta.block,
samp .lowerident,
code .lowerident {
    color: white;
}

samp .error,
code .error {
    color: hsl(0, 96%, 67%);
}

/* Types, Tags, and Modules */
samp .type,
code .type,
samp .meta.path,
code .meta.path,
samp .upperident,
code .upperident {
    color: var(--dark-cyan);
}

samp .dim,
code .dim {
    opacity: 0.55;
}

.button-container {
    position: absolute;
    top: 0;
    right: 0;
}

.copy-button {
    background: var(--dark-code-bg);
    border: 1px solid var(--dark-cyan);
    color: var(--dark-cyan);
    display: inline-block;
    cursor: pointer;
    margin: 8px;
}

.copy-button:hover {
    border-color: var(--code-color);
    color: var(--code-color);
}

.roc-logo {
    width: 40px;
    height: 40px;
    margin: 0 auto;
    fill: var(--primary-1);
    text-shadow: 1px 1px 1px #010101;
    position: relative;
    top: -2px;
}

/* HOME GOALS */

.home-goals-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 45px;
    width: 100%;
}

.home-goals-column {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
}

.home-goals-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
    border: 4px solid var(--light-cyan);
    color: inherit;
    cursor: pointer;
}

.home-goals-content:hover {
    text-decoration: none;
    cursor: pointer;
    background-color: var(--light-cyan);
}

.home-goals-learn-more {
    text-decoration: underline;
}

.home-examples-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
}

.home-examples-column {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
}

.home-examples-column:not(:last-of-type) {
    padding-right: 24px;
    border-right: 2px solid var(--primary-1);
}

/* Wider screens */
@media only screen and (min-width: 768px) {
    .home-goals-column {
        margin-bottom: 0;
    }

    .home-goals-column:last-child {
        margin-right: 0;
    }
}

.home-goals-learn-more {
    margin-top: auto;
    white-space: nowrap;
}

.home-goals-title {
    padding: 0;
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 32px;
    border-bottom: none;
    font-family: inherit;
    text-transform: lowercase;
    padding-bottom: 42px;
    padding-top: 2px;
    font-style: italic;
    letter-spacing: 1px;
    word-spacing: 3px;
    margin: 0;
    color: var(--text-color);
}

.home-goals-description {
    line-height: 1.5;
    margin-bottom: 2em;
}

/* Interactive example on homepage */

.interactive-example {
    font-size: var(--font-size-normal);
}

.interactive-example,
.interactive-example samp {
    background-color: #202746;
    color: white;
}

.interactive-example samp {
    position: relative;
    display: block;
    width: 100%;
    height: 580px;
    padding-right: 300px;
    cursor: default;
}

.interactive-example label:hover,
.interactive-radio:checked + label {
    background-color: #000;
    cursor: pointer;
}

.interactive-desc {
    display: none;
    position: absolute;
    top: 0;
    right: 300px;
    width: 300px;
    background-color: #ede6ff;
    border: 1px solid black;
    color: black;
    padding: 0 16px;
    padding-top: 12px;
    margin-top: 9px;
    cursor: text;
    white-space: normal;
    font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial;
}

.interactive-desc a {
    color: #7c38f5;
}

.interactive-desc code,
.interactive-desc pre {
    background: none;
    color: inherit;
}

.interactive-desc pre {
    border: 1px solid;
    padding: 0 8px;
}

.interactive-desc code {
    font-weight: bold;
    padding: 0;
}

.interactive-radio {
    display: none;
}

.interactive-radio:checked + label + .interactive-desc {
    display: block;
}

.close-desc {
    display: none;
    position: absolute;
    height: 40px;
    width: 40px;
    font-size: 24px;
    top: -12px;
    right: -12px;
    color: #fff;
    background: #9b6bf2;
    border: 2px solid #7c38f5;
    border-radius: 100%;
    z-index: 4;
}

.close-desc:hover {
    color: #222;
    background: var(--light-cyan);
    border-color: var(--light-cyan);
}

/* Tutorial */

#tutorial-main main {
    display: flex;
    flex-direction: row-reverse;
    max-width: 1024px;
}

#tutorial-main h1,
#tutorial-main h2,
#tutorial-main h3,
#tutorial-main h4,
#tutorial-main h5 {
    font-family: "Permanent Marker";
    line-height: 1rem;
    margin-top: 1.75rem;
    margin-bottom: 0;
    border: none;
}

#tutorial-main h3 a {
    color: var(--tutorial-h3-color);
}

#tutorial-main h1 a,
#tutorial-main h2 a,
#tutorial-main h4 a,
#tutorial-main h5 a {
    color: var(--header-link-color);
}

#tutorial-main h1 a:hover,
#tutorial-main h2 a:hover,
#tutorial-main h3 a:hover,
#tutorial-main h4 a:hover,
#tutorial-main h5 a:hover {
    text-decoration: none;
    color: var(--header-link-hover);
}

#tutorial-main h1 {
    font-size: 7rem;
    line-height: 7rem;
    color: var(--h1-color);
    margin-top: 24px;
    margin-bottom: 1.75rem;
    text-shadow: 1px 1px 1px #010101;
}

#tutorial-main h2 {
    font-size: 4rem;
    line-height: 4rem;
    text-shadow: 1px 1px 1px #010101;
    padding: 0.8rem 0;
    margin-top: 2.5rem;
    width: 60rem; /* Without this, "Building an application" wraps and looks awkward */
}

#tutorial-main h3 {
    font-family: inherit;
    font-size: 1.65rem;
    line-height: 3rem;
    margin-bottom: 0.5rem;
}

#tutorial-main h4 {
    font-size: 2rem;
    text-shadow: 1px 1px 1px #010101;
}

#tutorial-body,
#tutorial-body pre {
    max-width: 646px;
}

#tutorial-toc {
    position: relative;
    background-color: var(--gray-bg);
    flex: 0 0 auto; /* Take up as much space as it needs */
    margin-top: 30px;
    background: var(--code-bg);
    padding: 12px 24px;
    margin-left: 64px;
    align-self: flex-start; /* Aligns to the start, not stretching in height */
    z-index: 2;
}

#tutorial-toc > ul {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    padding: 16px 16px;
    margin: 0px;
}

#tutorial-toc > ul > li {
    flex: 1 1 50%; /* Adjust the percentage to control how many items per row */
    margin-bottom: 0; /* Reset the margin as they are now side by side */
    white-space: nowrap;
    overflow: hidden; /* Ensures content doesn't overflow its container */
    text-overflow: ellipsis; /* Adds an ellipsis if the content overflows */
}

#tutorial-toc code {
    background: none;
    color: inherit;
    margin: 0;
    padding: 0;
}

#tutorial-toc ol {
    padding: 3px;
    margin: 8px 0;
    list-style: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

#tutorial-toc h2 {
    font-family: inherit;
    font-size: 2em;
    text-shadow: none;
    margin: 0;
    padding: 16px 0;
}

#toc-search {
    background-color: var(--toc-search-bg);
    border: 1px solid var(--toc-search-border);
    color: inherit;
    padding: 6px 8px;
    margin-top: 16px;
    margin-bottom: 4px;
    box-sizing: border-box;
    width: 100%;
    font-size: inherit;
}

#tutorial-toc-toggle,
#tutorial-toc-toggle-label,
#close-tutorial-toc {
    display: none;
    /* This may be overridden on mobile-friendly screen widths */
}

#tutorial-toc-toggle:hover,
#tutorial-toc-toggle-label:hover,
#close-tutorial-toc:hover {
    text-decoration: underline;
    cursor: pointer;
}

#tutorial-toc-toggle,
#tutorial-toc-toggle-label {
    font-size: 1.2rem;
    float: right;
    padding: 0 1rem;
    font-family: Lato;
    font-weight: normal;
}

#close-tutorial-toc {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 1.2rem;
    padding: 12px 24px;
    font-weight: bold;
}

/* for larger screens */
@media only screen and (min-width: 768px) {
    #tutorial-toc > ul > li {
        flex: 1 1 33%; /* Adjust the percentage to control how many items per row */
    }
}

/* REPL */

#repl {
    position: relative;
    display: flex;
    flex-direction: column;
    font-size: 18px;
}

#homepage-repl-container #repl-prompt,
#homepage-repl-container .input-line-prefix {
    top: 1.25rem;
    color: var(--light-cyan);
}

.input-line-prefix,
#repl-prompt {
    color: var(--cyan);
    color: var(--primary-2);
}

#repl-prompt {
    position: relative;
    left: 16px;
    top: 0.95rem;
    font-size: 1.25rem;
    height: 0;
    z-index: 2;
    font-family: var(--font-mono);
    /* Let clicks pass through to the textarea */
    pointer-events: none;
    user-select: none;
}

#homepage-repl-container #source-input {
    color: var(--code-color);
}

#source-input {
    width: 100%;
    font-family: var(--font-mono);
    background-color: var(--code-bg);
    display: inline-block;
    height: 78px;
    padding: 16px;
    padding-left: 36px;
    border: 1px solid transparent;
    margin: 0;
    margin-bottom: 2em;
    box-sizing: border-box;
    font-size: 18px;
    resize: none;
    color: inherit;
}

#source-input:focus {
    outline: 2px solid var(--primary-1);
    box-sizing: border-box;
}

.history {
    padding: 1em;
    padding-bottom: 0;
    flex: 1;
}

#help-text,
#history-text {
    white-space: pre-wrap;
}

#history-text {
    margin-top: 16px;
    min-height: 26px;
}

#loading-message {
    text-align: center;
    /* approximately match height after loading and printing help message */
    height: 96px;
}

.history-item {
    margin-bottom: 24px;
    overflow-x: hidden;
}

.history-item .input {
    margin: 0;
    margin-bottom: 8px;
}

.history-item .output {
    margin: 0;
}

.panic {
    color: #ff6666;
}

.color-red {
    color: #ff6666;
}

.color-green {
    color: var(--green);
}

.color-yellow {
    color: var(--orange);
}

.color-blue {
    color: var(--cyan);
}

.color-magenta {
    color: var(--primary-1);
}

.color-cyan {
    color: var(--cyan);
}

/* Really this isn't white so much as "default text color." For the repl, this should be black
    in a light color scheme, and only white in dark mode. The name could be better!
*/
#homepage-repl-container .color-white {
    color: #fff;
}

#repl-container .color-white {
    color: #000;
}

@media (prefers-color-scheme: dark) {
    #homepage-repl-container .color-white {
        color: #fff;
    }

    #repl-container .color-white {
        color: #fff;
    }
}

.bold {
    font-weight: bold;
}

.underline {
    text-decoration: underline;
}

/* Mobile-friendly screen width */
@media only screen and (max-width: 767px) {
    #repl {
        margin: 0;
        padding: 0;
        min-height: calc(100vh - var(--top-bar-height));
    }

    code.history {
        flex-grow: 1;
    }

    #source-input {
        margin: 0;
    }

    #loading-message {
        margin: 0;
    }

    #homepage-repl-container {
        flex-direction: column;
    }

    #homepage-repl-container #repl-description {
        padding: 0;
        margin-bottom: 1.5em;
    }

    #repl-arrow {
        display: none;
    }
}

#gh-logo {
    fill: var(--text-color);
}

#gh-link {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}

#gh-centered-link {
    text-decoration: none;
    display: flex;
    align-items: center;
}

#gh-link-text {
    margin-left: 8px;
    vertical-align: middle;
}

.repl-prompt:before {
    color: var(--light-cyan);
    content: "» ";
}

.banner {
    background-color: var(--gray-bg);
    padding: 1rem;
    text-align: center;
    font-family: var(--font-sans);
    border: 1px solid var(--primary-1);
    margin-bottom: 20px;
}

.banner a {
    color: var(--link-color);
    text-decoration: underline;
    font-weight: bold;
}