:root {
    --vs-background-color:        #fff;
    --vs-background-header-color: #eee;
    --vs-text-color:              #000;
    --vs-text-highlight-color:    #333;
    --vs-text-mute-color:         #666;
    --vs-border-color:            #aaa;

    --vs-header-height: 50px;
    --vs-gutter-width:  20vw;

    --vs-font-family:      "Saira";
    --vs-body-font-size:   15px;
    --vs-body-font:        var(--vs-body-font-size) var(--vs-font-family);
    --vs-header-font-size: calc(var(--vs-body-font-size) * 1.75);
    --vs-header-font:      var(--vs-header-font-size) var(--vs-font-family);
    --vs-title-font-size:  calc(var(--vs-body-font-size) * 2.5);
    --vs-title-font:       var(--vs-title-font-size) var(--vs-font-family);
    --vs-footer-font-size: calc(var(--vs-body-font-size) * 0.9);
    --vs-footer-font:      var(--vs-footer-font-size) var(--vs-font-family);
}

body {
    font: var(--vs-body-font);
    font-weight: 400;
    margin: 0px;
    padding: 0px;

    color: var(--vs-text-color);
    background: var(--vs-background-color);
}

a {
    color: inherit;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0px;
    padding: 0px;
    font-weight: 400;
}

h1 { font-size: calc(var(--vs-body-font-size) * 2.0); }
h2 { font-size: calc(var(--vs-body-font-size) * 1.5); }
h3 { font-size: calc(var(--vs-body-font-size) * 1.25); }
h4 { font-size: calc(var(--vs-body-font-size) * 1.0); }
h5 { font-size: calc(var(--vs-body-font-size) * 1.0); }
h6 { font-size: calc(var(--vs-body-font-size) * 1.0); }

p {
    margin: 0px;
    padding: 0px;
}

p + p, p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 {
    margin-top: 1em;
}

blockquote {
    font-stretch: 80%;
    font-style: italic;
    padding: 0px 3vw;

    color: var(--vs-text-mute-color);
}

#vs_header {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    height: var(--vs-header-height);

    display: flex;
    flex-flow: row nowrap;
    align-items: center;

    font: var(--vs-header-font);
    color: var(--vs-text-highlight-color);
    background: var(--vs-background-header-color);

    margin: 0px;
    padding: 0px var(--vs-gutter-width); /*padding: 0.25em var(--vs-gutter-width) 0.1em var(--vs-gutter-width);*/
    border-bottom: 1px solid var(--vs-border-color);
}

#vs_header + * {
    margin-top: var(--vs-header-height);
}

#vs_site {
    display: block;

    flex: 0;

    color: var(--vs-text-color);
    text-decoration: none;
    font-stretch: 115%;
    font-weight: 500;
    white-space: nowrap;
}

#vs_menu {
    display: flex;
    flex-flow: row nowrap;
    flex: 1;
    justify-content: space-between;
}

#vs_menu > .vs_menu_item {
    position: relative;
    color: var(--vs-text-mute-color);
    text-decoration: none;
    white-space: nowrap;
}

#vs_menu > .vs_menu_item:active {
    color: var(--vs-text-color);
}

#vs_menu > .vs_menu_item.vs_active {
    color: var(--vs-text-color);
}

#vs_menu > .vs_menu_item.vs_active::after, #vs_menu > .vs_menu_item:hover::after {
    content: "";
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 2px;
    border-bottom: 2px solid var(--vs-text-color);
}

/*#vs_menu > .vs_menu_item:hover {
    text-decoration: underline 3px;
}

#vs_menu > .vs_menu_item:active {
    color: var(--vs-text-color);
    text-decoration: underline 3px;
}

#vs_menu > .vs_menu_item.vs_active {
    color: var(--vs-text-color);
    text-decoration: underline 3px;
}*/

#vs_menu > .vs_menu_item:first-child
{
    margin-left: 3ch;
}

#vs_menu > .vs_menu_item + .vs_menu_item {
    margin-left: 1ch;
}

#vs_title {
    font: var(--vs-title-font);
    font-stretch: 115%;
    font-weight: 400;
    padding: 0px var(--vs-gutter-width);
}

#vs_content {
    padding: 0px var(--vs-gutter-width);
}

#vs_footer {
    font: var(--vs-footer-font);
    color: var(--vs-border-color);
    background: var(--vs-text-highlight-color);

    height: 5em;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;

    margin-top: 1em;
    padding: 0px var(--vs-gutter-width);
}