:root
{
    /* Color Palette */
    --white:    rgba(255, 255, 255, 1);
    --offwhite: rgba(250, 250, 250, 1);
    --lightgray:rgba(200, 200, 200, 1);

    --trueblack:rgba(0, 0, 0, 1);
    --black:    rgba(10, 10, 10, 1);
    --offblack: rgba(25, 25, 25, 1);

    /* Typefaces */
    --font-dm: "DM Sans", sans-serif;
    --font-mono: "JetBrainsMono", monospace;
    --font-inter: "InterTight", sans-serif;
    --font-archivo: "Archivo", sans-serif;
    --font-garamond: "EB Garamond", serif;

    /* Theme - Sizing */
    --main-width-full:      60vw;
    --main-width-medium:    70vw;
    --main-width-small:     80vw;
}

*
{
    margin:0;
    padding:0;
}

/* Links */
a
{
    color:var(--lightgray);
    transition: color 0.35s;
}
a:hover
{
    color:var(--offwhite);
    transition: color 0.25s;
}

/* Document */
html
{
    scroll-behavior:smooth;
    overscroll-behavior: none;
}

body
{
    background-color: var(--offblack);
    color:var(--offwhite);
    overscroll-behavior: none;
}

/* Header */
#header
{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content: center;

    margin-top:64px;
    margin-bottom:32px;
}
#header .content
{
    width:var(--main-width-full);

    padding-top:8px;
    padding-bottom:8px;

    background-color: var(--offwhite);
    color:var(--offblack);
}
@media (max-width:900px)
{
    #header .content
    {
        width:var(--main-width-medium);
    }    
}
@media (max-width:575px)
{
    #header .content
    {
        width:var(--main-width-small);
    }
}

#header .content .title
{
    font-size:24px;
    font-family:var(--font-archivo);
    font-weight:800;

    margin-left:1ch;
}
#header .content .title a
{
    color:inherit;
}

/* Main */
#main
{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width:100%;
    overflow-x:clip;

    font-family: var(--font-archivo);
}
#main .content
{
    display:flex;
    flex-direction:row;
    gap:2ch;

    width:var(--main-width-full);
}   
@media (max-width:900px)
{
    #main .content
    {
        width:var(--main-width-medium);
    };
}
@media (max-width:575px)
{
    #main .content
    {
        width:var(--main-width-small);
    };
}

#main .content .left-bar
{
    flex:1;
    margin-left:auto;
    font-size:20px;
}
#main .content .body
{
    flex:4;
    font-size:20px;
}
#main .content .right-bar
{
    flex:1;
    margin-right:auto;
}

#main .content .left-bar .menu
{
    position:sticky;
}
#main .content .left-bar .menu ul
{
    list-style: none;
}
#main .content .left-bar .menu li + li
{
    margin-top:0.5ch;
}
#main .content .left-bar .menu a
{
    color:var(--lightgray);
    transition: color 0.35s;
}
#main .content .left-bar .menu a:hover
{
    color:var(--offwhite);
    transition: color 0.25s;
}

#main .content .body .section
{
    margin-top:2ch;
}
#main .content .body p
{
    max-width:40vw;
    text-align:justify;
    line-height:1.5;
    letter-spacing: 0.08ch;
}
#main .content .body h2 + p
{
    margin-top:1ch;
}
#main .content .body p + p
{
    margin-top:2ch;
}
#main .content .body .section ul
{
    list-style: none;
}

#main .content .section h2
{
    border:1px solid var(--offwhite);
    padding-left:1ch;
    padding-top:0.25ch;
    padding-bottom:0.25ch;
}
#main .content .section h2:before
{
    content: "";
}

.right-bar .menu ul
{
    list-style: none;
    text-align: right;
    margin-right:1ch;

    font-size:20px;
}
.right-bar .menu ul li:before
{
    content: "";
}

/* Lists */
ul.dots li
{
    position:relative;
    
    max-width:80ch;

    margin-top:1ch;
    padding-left:1.5em;
}
ul.dots li:before
{
    position:absolute;
    content: "•";
    left:0;
}

/* Footer */
#footer
{
    display:block;
    width:100%;

    margin-top:0.25in;
    padding-top:16px;
    padding-bottom:16px;

    font-family:var(--font-dm);
    font-size:14px;
    font-weight:400;

    background-color: var(--offblack);
    color: var(--white);
}
#footer .content
{
    display:flex;
    flex-direction: column;
    align-items: center;

    width:var(--main-width-full);
    margin-left:auto;
    margin-right:auto;
}

#footer .content .row
{
    display:flex;
    flex-direction: row;
    align-items: center;

    line-height:1.5;
    margin-top:1ch;
}
#footer .content .row + .row
{
    margin-top:1ch;
}
.row ul.row-menu
{
    display:flex;
    flex-direction: row;
    list-style: none;
}
.row ul.row-menu li + li:before
{
    content: "|";
    
    margin-left:1ch;
    margin-right:1ch;
}