/* CSS - Cascading Style Sheet */
/* Palette color codes */
/* Palette URL: http://paletton.com/#uid=13z0u0k8su61LPO4GD1cVpwhPlc */
/* Generated by Paletton.com © 2002-2014 */
/* http://paletton.com */

body {
    font-size: 1em;
    line-height: 1.4em;
    font-family: "Verdana";
    background-color: rgba(212,218,224,1);
    color: rgba(0,0,0,0.5);
}

img {
    max-width:100%;
}

table {
    margin: 2em auto;
    min-width: 80%;
}

caption {
    text-align: left;
}

h1, h2, h3 {
    color: rgba( 82,108,132,1);
}

.container {
    display: inline-flex;
    flex-wrap: no-wrap;
    width: 100%;
}

a {
    color: rgba( 53, 83,109,1);
    text-decoration: none;
}

a:visited {
    color: rgba(255,249,241,1);
}

/* I almost always use pre for code. */
pre {
    overflow-x: auto;
}

/* Make code blocks look nice within a list */
li > pre {
    margin-top: 0;
}

ul {
    list-style-type: circle;
}

#main, #nav, #side, #jumptop {
    background-color: rgba(162,176,188,1);
}

#error-text {
    padding-top: 1em;
}

#error-text > p {
    display: inline-block; /* Collapsing margins. */
}

#undergirder {
    background: linear-gradient(rgba(162,176,188,1), rgba(212,218,224,1));
}


@media (max-width: 1023px) {
    .container {
        flex-direction: column;
    }

    /* #nav:first-child {
        content: " Consulting";
    } */

    #nav h1::after {
        content: " Consulting";
    }

    #main {
        padding: 0 1em;
    }

    #nav li {
        padding-right: 1em;
        float: left;
        list-style-type: none;
    }

    p.aside {
        float: none;
        width: auto;
    }

    /* Why does this work again? Headings too compact without it... */
    h1 {
        line-height: 1.0em;
    }
}

@media (min-width: 1024px) {
    .container {
        flex-direction: row;
    }

    #me-img > img {
        max-width: 360px;
        max-height: auto;
    }

    /* #nav:first-child {
        text-align: center;
    } */

    #nav h1 {
        text-align: center;
    }
}

#nav, #side {
    padding: 1em;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: content;
}

#null-side {
    padding: 0em;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: content;
}


#jumptop, #undergirder {
    text-align: center;
}

#undergirder > p {
    display: inline-block; /* Collapsing margins. */
}