body {
    max-width: 800px;

    margin: 30px auto;
 
    font-family: sans-serif;
    font-size: 14pt;

    line-height: 150%;
}

.date {
    color: grey;
    font-size: 10pt;
    font-family: sans-serif;
    text-decoration: none;
}

img {
    display: block;
    margin-left: auto;
    margin-right: auto 
}

code {
    font-family: monospace;
    font-weight: normal;
    font-size: 14pt; 
    margin: 0pt;
}

code.context {
    font-size: 10pt; 
}

pre {
    margin: 0 0 0 1em;
}

sup { vertical-align: top;
      font-size: 0.6em; }

h1 {
    font-size: 24pt;
    font-weight: normal;
}

h2 {
    font-size: 20pt;
    font-weight: normal;
}

h3 {
    font-size: 16pt;
    font-weight: normal;
}

@media
only screen
and (max-device-width: 768px) {
    body {  margin: 10px; font-size: 1em; min-width: 300px; line-height: 150%; }
    h1 { font-size: 2.5em; line-height: 1; }
    h2 { font-size: 1.5em; }
    .date {
        font-size: 1.5em;
    }

     ul.nav {
        list-style-type: none;
        margin: 10px;
        padding: initial;
        text-align: initial;
    }

     .email {
         font-size: 1.25em;
     }

     ul.nav li { display: inline; float: left; width: 50%; margin: 5px auto; text-align: center;}

     ul.pubs {
         margin: 0;
         padding: 0;
     }

     ul.pubs li {
         margin: 15px auto;
     }

     .non-mobile-break {
         display: none;
     }

     pre {
         margin: 0pt;
     }

     code {
         font-family: monospace;
         font-weight: normal;
         font-size: 1em;
         margin: 0pt
     }

     code.context {
         font-size: 10pt; 
     }

}