@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oxygen%20Mono:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:FILL,GRAD,opsz,wght@0..1,-50..200,20..48,100..700&display=swap;');

* {
    margin: 0;
}

:root {
    /* colours */
    --col-bg: #1a1d29;
    --col-surface: #1f2330;
    --col-surface-hover: #232835;
    --col-surface-2: #2b3340;
    --col-surface-3: #3b4a5a;
    --col-border: #141a24;
    --col-border-soft: #2b3340;

    --col-text: #dbd7ca;
    --col-text-muted: #dedcd5;
    --col-text-faint: #959da5;

    /* Moss-inspired accents */
    --col-accent: #8b8ee8;
    --col-accent-soft: #a1a4ef;
    --col-accent-deep: #6f73c8;

    --col-accent-blue: #7a92b8;
    --col-accent-yellow: #d2bc7c;
    --col-accent-pink: #b8849b;

    --col-success: #8fb85a;
    --col-warning: #c99969;
    --col-error: #b86568;
    --col-info: #7a92b8;
    --col-link: #c47a6d;
    --col-danger: #b8656840;

    --col-code-bg: #1b1e26;
    --col-selection: #eeeeee14;
    --col-shadow: #1b1e26a9;
    --col-shadow-light: #10121859;
    --col-shadow-2: #101218a9;
    --col-light: #1f2330e4;
    --col-light-2: #eeeeee10;

    /* fontstacks */
    --font-main: "Inter", system-ui, sans-serif;
    --font-code: "Oxygen Mono";
}

html {
    overflow: none;
}

body {
    background-color: var(--col-bg);
}

ul.navbar {
    position: fixed;
    top: 0;
    z-index: 10;
    width: stretch;
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 20px;
    font-family: var(--font-main);
    background-color: var(--col-surface);
    border-bottom: var(--col-border-soft) 1.5px solid;
    box-shadow: 0 4px 4px var(--col-shadow);
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    .block2 {
        margin-left: auto;
    }
    .playful {
        color: var(--col-accent);
    }
    li a {
        color: var(--col-text);
        text-decoration: none;
        padding: 10px 16px;
        border-radius: 0.2em;
        transition: 0.3s;

        .material-icons-round {
            vertical-align: -0.35em;
            line-height: 1px;
            transform: translateY(-2px);
        }
    }
    li a.link:hover {
        color: var(--col-accent);
        background-color: var(--col-surface-2);
        border-radius: 0.6em;
    }
    li a img {
        height: 1.3em;
        vertical-align: -0.25em;
    }
    li a.signup {
        background-color: var(--col-accent);
        border-radius: 0.8em;
    }
    li a.signup:hover {
        background-color: var(--col-accent-soft);
        color: var(--col-text);
        border-radius: 1em;
    }
    li a img#avatar {
        position: absolute;
        height: 1.5em;
        transform: translateY(-0.1em);
        border-radius: 0.6em;
        border: var(--col-border-soft) 1px solid;
    }
}

main {
    top: 63px;
    overflow-y: auto;
    position: absolute;
    width: 100vw;
    height: calc(100vh - 63px);
    overflow-x: hidden;
    scrollbar-color: var(--col-surface-3) var(--col-bg);
    ::selection {
        background-color: var(--col-selection);
    }
}

section, footer {
    padding: 80px;
    font-family: var(--font-main);
    display: grid;
    justify-items: center;
    border-bottom: var(--col-border-soft) 1px solid;
    background-color: var(--col-bg);
    .content {
        width: min(100%, 768px);
    }
    h1 {
        color: var(--col-text);
        font-size: 3em;
        border-bottom: var(--col-accent) 2px solid;
        padding-bottom: 8px;
        margin-bottom: 8px;
    }
    h2 {
        color: var(--col-text);
        font-size: 2em;
        border-bottom: var(--col-accent) 2px solid;
        padding-bottom: 8px;
        margin-bottom: 8px;
    }
    h3 {
        color: var(--col-text);
        font-size: 1.5em;
        margin-top: 8px;
        margin-bottom: 8px;
        padding-bottom: 8px;
        border-bottom: var(--col-accent-deep) 2px solid;
        padding-top: 8px;
    }
    p {
        color: var(--col-text-muted);
    }
    a {
        color: var(--col-link);
    }
    samp {
        background-color: var(--col-surface-hover);
        padding: 2px;
        color: var(--col-accent);
        border-radius: 0.2em;
        font-family: "JetBrains Mono";
        font-size: 1em;
        font-variant-ligatures: none;
    }
    input {
        background-color: var(--col-surface);
        border-radius: 0.8em;
        border: var(--col-border-soft) 1px solid;
        padding: 10px 16px;
        font-size: 1em;
        font-family: var(--font-main);
        color: var(--col-text);
        outline: transparent;
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 8px;
    }
    input:focus {
        outline: var(--col-accent) 2px solid;
    }
    iframe {
        width: 100%;
        aspect-ratio: 16 / 9;
        border-radius: 0.4em;
        border: var(--col-border-soft) 1px solid;
    }
}

main.flex {
    display: flex;
    sidebar {
        background-color: var(--col-surface);
        padding: 40px;
        box-sizing: border-box;
        width: 25vw;
        font-family: var(--font-main);
        color: var(--col-text);
        border-right: var(--col-border-soft) 2px solid;
        h2 {
            color: var(--col-accent);
        }
        p.info {
            background-color: rgb(from var(--col-info) r g b / 0.25);
            padding: 12px;
            border-radius: 0.4em;
            display: flex;
            gap: 8px;
            align-items: center;
            font-variation-settings: 'FILL' 1;
            .material-symbols-rounded {
                color: var(--col-info);
            }
        }
        div.div {
            margin: 12px 0;
            height: 2px;
            background-color: var(--col-border-soft);
        }
        .imgTxtRow {
            display: flex;
            gap: 8px;
            img {
                fill: var(--col-accent);
            }
        }
    }
    div#chatPanel {
        width: 75vw;
        box-sizing: border-box;
        background: repeating-linear-gradient(
            120deg,
            var(--col-bg),
            var(--col-bg) 50px,
            var(--col-border) 50px,
            var(--col-border) 100px
        );
        div#messages {
            height: 75%;
            box-sizing: border-box;
            border-bottom: var(--col-border-soft) 2px solid;
            padding: 20px;
            color: var(--col-text);
            font-family: var(--font-main);
            display: flex;
            flex-direction: column;
            gap: 20px;
            overflow-y: auto;
            div.message.user {
                background-color: var(--col-accent-deep);
                width: 40%;
                margin-left: auto;
                padding: 12px;
                border-radius: 0.4em;
                border: var(--col-accent-soft) 1px solid;
            }
            div.message.goob {
                background-color: var(--col-surface-hover);
                padding: 12px;
                width: 60%;
                margin-right: auto;
                border-radius: 0.4em;
                border: var(--col-border-soft) 1px solid;
            }
        }
        div#type {
            height: 25%;
            box-sizing: border-box;
            background-color: var(--col-surface);
            display: flex;
            align-items: start;
            padding: 20px;
            gap: 12px;
            textarea#prompt {
                background-color: var(--col-surface-2);
                padding: 12px;
                border-radius: 0.4em;
                border: var(--col-surface-3) 2px solid;
                box-sizing: border-box;
                color: var(--col-text);
                resize: none;
                transition: 0.2s;
                outline-color: transparent;
                font-family: var(--font-main);
                font-size: 1em;
                height: 100%;
                width: 75%;
            }
            textarea#prompt:focus {
                border: var(--col-accent) 2px solid;
                outline: rgb(from var(--col-info) r g b / 0.2) 4px solid;
            }
            button#send {
                font-variation-settings: 'FILL' 1;
                padding: 12px;
                aspect-ratio: 1;
                border-radius: 0.4em;
                background-color: var(--col-accent);
                color: var(--col-text);
                border: none;
                cursor: pointer;
                border: transparent 2px solid;
                transition: 0.2s;
                outline-color: transparent;
            }
            button#send:hover {
                background-color: var(--col-accent-soft);
                border: var(--col-accent) 2px solid;
                outline: rgb(from var(--col-info) r g b / 0.2) 4px solid;
            }
        }
    }
}