@import url("https://fonts.googleapis.com/css?family=Bree+Serif&display=swap;");
@import url("https://fonts.googleapis.com/css?family=Albert+Sans:wght=400,900&display=swap;");
@import url("https://fonts.googleapis.com/css?family=Roboto+Mono:wght=400,900&display=swap;");
@import url("https://fonts.googleapis.com/css?family=Material+Icons&display=swap;");
* { margin: 0; }
:root {
    --dark1: #333;
    --dark-mid: #282828;
    --dark2: #1c1c1c;
    --light1: #e0e0e0;
    --light2: #d0d0d0;
    --light3: #bebebe;
    --mid1: #505050;
    --accent: #a14d42;
    --accent-hover: oklch(from var(--accent) calc(l + 0.05) c h);
    --accent-light: oklch(from var(--accent) calc(l + 0.3) c h);
    --accent-icon: #c09992;
    --selection: #c0999260;
    --heading: #0a0a0a;
    --text: #3b2a1f;
    --head: "Bree Serif";
    --main: "Albert Sans";
    --mono: "Roboto Mono";
}
body {
    background-color: var(--light1);
}
body.centre {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
}

/* Navbar container */
ul.navbar {
    position: fixed;
    display: flex;
    align-items: center;
    z-index: 1000;
    list-style: none;
    top: 0;
    left: 0;
    margin: 0;
    padding: 4px 20px;
    background-color: var(--dark1);
    width: 100%;
    box-sizing: border-box;
    line-height: normal;
    font-family: "Bree Serif";
}

/* Title + icon */
ul.navbar li.uri {
    display: flex;
    align-items: center;
    color: white;
    line-height: normal;
    user-select: none;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none;     /* old Edge */
}

ul.navbar li a.title {
    margin-left: 8px;
}
/* Push links to the right */
ul.navbar li.uri + li {
    margin-left: auto; /* first link after the title goes to the right */
    line-height: normal;
}

/* Links styling */
ul.navbar li a{
    display: inline-block;
    color: white;
    text-decoration: none;
    line-height: normal;
    transition: background-color 0.3s ease;
    border-radius: 0.6em;
    user-select: none;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none;     /* old Edge */
}
ul.navbar li a.link{
    display: inline-block;
    color: white;
    text-decoration: none;
    padding: 10px 16px;
    line-height: normal;
    transition: background-color 0.3s ease;
    border-radius: 0.6em;
    user-select: none;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none;     /* old Edge */
    .material-icons {
        font-size: 1em;
        vertical-align: -0.2em;
        margin-right: 2px;
    }
}

/* Text links hover (excluding icons) */
ul.navbar li a.link:hover {
    background-color: var(--dark2);
    color: var(--accent-light)
}

/* Icon sizing */
.site-icon {
    height: 28px;
    width: auto;
    display: inline-block;
    padding: 0;
    vertical-align: -0.4em;
}

#banner {
    margin-top: 48px;
    width: 100%;
    height: calc(280px + 3vw);
    font-family: var(--head);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    background-color: var(--light2);
    h1 {
        font-weight: normal;
        font-size: 4.5em;
        color: var(--heading);
    }
}

.sect {
    padding: 40px;
    width: 100%;
    max-width: 700px;
    display: flex;
    justify-self: center;
    flex-direction: column;
    border-bottom: var(--light3) 4px solid;
    scroll-margin-top: 80px;
    h2 {
        font-family: var(--head);
        font-weight: normal;
        color: var(--heading);
        margin-left: 20px;
        font-size: 2em;
        .material-icons {
            vertical-align: -0.1em;
            color: var(--accent-icon)
        }
        .light {
            color: #cc988e;
        }
        a {
            color: #cc988e;
        }
    }
    h3 {
        font-size: 1.5em;
        font-family: var(--main);
        color: var(--accent);
        margin: 16px;
    }
    p {
        font-family: var(--main);
        color: var(--text);
    }
    ::selection {
        color: currentColor;
        background-color: var(--selection);
    }
    button {
        background-color: var(--accent);
        border: none;
        color: white;
        padding: 10px 16px;
        font-family: var(--main);
        margin-top: 8px;
        border-radius: 0.4em;
        cursor: pointer;
        margin-left: 20px;
        transition: 0.2s;
        user-select: none;
        -webkit-user-select: none; /* Safari */
        -ms-user-select: none;     /* old Edge */
        .material-icons, .material-symbols-outlined {
            font-size: 1.3em;
            vertical-align: -0.2em;
        }
    }
    a {
        width: max-content;
    }
    ul {
        color: var(--text);
        font-family: var(--main);
        margin-top: 8px;
        margin-bottom: 8px;
    }
    button:hover {
        background-color: var(--accent-hover);
        transform: scale(1.025);
    }
    code {
        font-size: 0.8em;
        font-family: var(--mono);
        background: #2d2d2d;
        border-radius: 0.4em;
        color: #ccc;
        padding: 2px 4px;
    }
    table {
        border-collapse: collapse;
        font-family: var(--main);
        th, td {
            border: var(--text) 1px solid;
            padding: 16px;
        }
        th {
            font-weight: normal;
            font-family: var(--head);
        }
        td {
            a {
                color: var(--accent);
                font-style: italic;
            }
            .material-icons {
                font-size: 1.3em;
                vertical-align: -0.2em;
                font-style: italic;
            }
        }
    }
}
.sect.last {
    border-bottom: none;
}

div.centre {
    border: var(--light3) 2px solid;
    padding: 40px;
    width: 100%;
    max-width: 600px;
    border-radius: 0.8em;
    h1 {
        font-family: var(--head);
        font-weight: normal;
        color: var(--heading);
        .material-icons {
            color: var(--accent-icon);
            vertical-align: -0.13em;
        }
    }
    p {
        color: var(--text);
        font-family: var(--main);
    }
    ::selection {
        color: currentColor;
        background-color: var(--selection);
    }
    .mrow {
        display: flex;
        flex-direction: row;
        gap: 1px;
        justify-content: center;
        padding: 16px;
        a {
            text-decoration: none;
        }
    }
    button {
        background-color: var(--accent);
        border: none;
        color: white;
        padding: 10px 16px;
        font-family: var(--main);
        margin-top: 8px;
        border-radius: 0.4em;
        cursor: pointer;
        margin-left: 20px;
        transition: 0.2s;
        user-select: none;
        width: stretch;
        -webkit-user-select: none; /* Safari */
        -ms-user-select: none;     /* old Edge */
        .material-icons, .material-symbols-outlined {
            font-size: 1.3em;
            vertical-align: -0.2em;
        }
    }
    button:hover {
        background-color: var(--accent-hover);
        transform: scale(1.025);
    }
}

.footer {
    position: fixed;
    z-index: 1000;
    bottom: 0;
    background-color: var(--light1);
    width: 100%;
    border-top: 2px solid var(--light3);
    font-family: var(--main);
    padding: 16px;
    display: flex;
    justify-content: center;
    .content {
        display: flex;
    }
    .flist {
        border-left: 1px solid var(--accent-icon);
        margin-left: 8px;
        padding-left: 8px;
        a {
            color: var(--accent);
            font-style: italic;
            .material-icons {
                font-size: 1em;
                vertical-align: -0.2em;
                font-style: italic;
            }
        }
        a:not(.last) {
            border-right: 1px solid var(--accent-icon);
            padding-right: 8px;
        }
    }
}

.footer-gap {
    height: 2em;
}

.playground {
    display: flex;
    height: calc(100vh - 100px);
    margin-top: 48px;
    #epane, #tpane {
        width: stretch;
        height: 100%;
    }
    #toolbar {
        background-color: var(--dark2);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px;
        color: var(--accent-icon);
        font-family: var(--main);
        button {
            background: transparent;
            border: var(--mid1) 1px solid;
            cursor: pointer;
            padding: 8px 10px;
            color: var(--accent-icon);
            border-radius: 0.8em;
            transition: 0.2s;
            font-family: var(--main);
            user-select: none;
            -webkit-user-select: none; /* Safari */
            -ms-user-select: none;     /* old Edge */
            .material-icons {
                font-size: 1.3em;
                vertical-align: -0.2em;
            }
        }
        button:hover {
            background-color: var(--dark-mid);
        }
    }
    #terminal, #js {
        height: calc(100% - 1em - 16px);
        font-family: var(--mono);
        background-color: var(--dark1);
        white-space: pre;
        color: #ccc;
        padding: 20px;
        padding-top: 40px;
        font-size: 14px;
    }
    #tabs {
        font-family: var(--main);
        background-color: var(--dark2);
        color: white;
        display: flex;
    }
    .tab {
        padding: 8px 10px;
        border-right: 1px solid var(--mid1);
        user-select: none;
        -webkit-user-select: none; /* Safari */
        -ms-user-select: none;     /* old Edge */
        cursor: pointer;
        border-bottom: 1px solid var(--mid1);
        border-top: 1px solid var(--mid1);
        transition: 0.2s;
        .material-icons {
            vertical-align: -0.2em;
        }
    }
    .tab:hover {
        background-color: var(--dark-mid);
    }
    .tab.active {
        background-color: var(--dark1);
        border-bottom: 1px solid var(--dark1);
    }
    #editor {
        height: calc(100% - 1em - 16px);
    }
    #epane {
        border-right: 4px solid var(--light3);
    }
}

.flex {
    display: flex;
}