/* Some hopefully sensible defaults. */


html {
    min-height: 100vh;
    padding: 0;
    margin: 0;
}


body {
    background-image: url('/img/blue_abstract_triangles_1920x1200.jpg');
    margin: 0em auto 0em auto;
    max-width: 75em;
    min-height: 100vh;
    /*font: 1.2em/1.62em sans-serif;*/
    font: 1em/1.4em sans-serif;
}


div.white {
    background-image: url('/img/white_90.png');
    min-height: 100vh;
}


div.figure {
    text-align: center;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0.5em;
    margin-right: 0.5em;
}


div.precontain {
    text-align: center;
}


div.mathblock {
    display: inline-block;
    text-align: left;
    background-color: #ffa5a5;
    border-radius: 1.5em;
    padding: 2em 2em 2em 2em;
    margin: 1em 2em 1em 2em;
    /* width should be equal to code and pre, but for some reason this needs 45em instead of 60em... bug? */
    /* what are the default widths, margins, and paddings used in browsers anyway? */
    width: 45em;
}


code {
    display: inline-block;
    text-align: left;
    font-family: monospace;
    white-space: pre;
    background-color: #ceecf5;
    border-radius: 1.5em;
    /* top padding seems to start at 2em on most browsers for code blocks... bug? */
    /* nonetheless, for the moment padding-top will be left as default */
    padding-right: 2em;
    padding-bottom: 2em;
    padding-left: 2em;
    /*padding: 2em 2em 2em 2em;*/
    margin: 1em 2em 1em 2em;
    width: 60em;
}


pre {
    display: inline-block;
    text-align: left;
    background-color: #cef6ce;
    border-radius: 1.5em;
    /* similar to above padding-top issue */
    padding-right: 2em;
    padding-bottom: 2em;
    padding-left: 2em;
    /*padding: 2em 2em 2em 2em;*/
    margin: 1em 2em 1em 2em;
    width: 60em;
}


h2 {
    margin-top: 0em;
    margin-bottom: 0em;
    padding: 1em 1em 1em 1em;
}


h4 {
    padding-top: 2em;
    padding-left: 1em;
}


h5 {
    padding-top: 2em;
    padding-left: 1em;
}


hr {
    margin: 0em 1em 0em 1em;
}


p {
    margin: 2em 1em 2em 1em;
}


a.external {
    background: url("/img/external_link.png");
    background-size: 1em 1em;
    background-position: right;
    background-repeat: no-repeat;
    padding-right: 1.2em;
}




div.header {
    display: flex;
    width: 100%;
    align-items: center;
}

div.header h2 {
    flex-grow: 4;
}

div.header a {
    margin: 1em 1em 1em 1em;
    height: 30px;  /* For some reason needed to get the anchor to match the image. */
}




/* Display the navbar like a table to make it
   horizontal and evenly spaced. */

div.nav ul {
    display: table;
    width: 100%;
    margin: 0.5em auto 0.5em auto;
    padding: 0;
}

div.nav ul li {
    display: table-cell;
    text-align: center;
    margin: 0;
    padding: 0;
    width: 20%;
}




/* Evenly spaced footer images. */

div.footer {
    display: flex;
    justify-content: center;
}

div.footer a {
    margin: 1em 1em 1em 1em;
}