:root {
    --bg: #21211f;
    --navbarbg: #1d1c19;
    --text: #fff0d1;
    --link: #947026;
    --muted: #666666;
    --border: #e5e5e5;
    --navpanelw: 100%;
    --mainw: 100%;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--bg);
    color: var(--text);
    display: flex;
    flex-direction: column;
    font:
        16px/1.5 system-ui,
        -apple-system,
        Segoe UI,
        Roboto,
        Helvetica,
        Arial,
        "Apple Color Emoji",
        "Segoe UI Emoji";
}

#nav-panel {
    background-color: var(--navbarbg);
    width: var(--navpanelw);
    box-shadow: 5px 0px 10px #0000000f;
    padding: 1em 2em 1em 1em;
}

#nav-panel.notmain .hideifnotmain {
    display: none;
}

#nav-panel .title {
    margin: 0;
}

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

a:hover {
    text-decoration: underline;
}

.projects-ul {
    padding-left: 1em;
}

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

main {
    width: var(--mainw);
    padding-top: 3m;
    padding-right: 0em;
    padding-bottom: 20em;
    padding-left: 1em;
    background-color: var(--bg2);
}

article {
    margin-top: 3em;
}

.meta {
    font-weight: normal;
    font-size: 0.9em;
}

.tags {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
    margin: -1em 0 1em;
    padding-left: 1em;
}

.tags li {
    font-size: 0.75rem;
}

.projects-ul-span {
    display: flex;
}

.projects-ul-span .tags {
    margin: 0.25em;
    gap: 0.5em;
}

ul.socials {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
}

ul#favorites {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4em;
    padding-left: 1em;
}

.title a {
    color: var(--text);
}

@media (min-width: 900px) {
    :root {
        --navpanelw: 350px;
        --mainw: 40%;
    }

    #nav-panel {
        height: 100%;
        position: fixed;
    }

    #nav-panel.notmain .hideifnotmain {
        display: block;
    }

    main {
        margin-left: var(--navpanelw);
        padding-left: 6em;
        padding-bottom: 100em;
    }
}