body {
    font-family: Ubuntu,Helvetica,Arial,sans-serif;
    margin: 0px;
}

.header {
    margin: 1ex;
}

.title-img {
    float: left;
    margin-right: 1ex;
    max-width: 30vw;
}

.title {
    float: left;
}

.title > span {
    font-family: 'Oleo Script Swash Caps', serif;
    margin: 0;
    font-size: 20pt;
}

.title .blurb {
    margin-top: 0;
}

.title .nav {
    margin-top: 3ex;
    margin-bottom: 1ex;
}

hr {
    height: 0px;
    border: none;
    border-bottom: 1px dashed rgba(200, 200, 200, 0.8);
}

a {
    text-decoration-style: dashed;
}

.content {
    margin-top: 1ex;
    margin-left: 5ex;
    margin-right: 3ex;
    max-width: 90ex;
}

.content .body {
    margin-top: 2ex;
    margin-bottom: 2ex;
}

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

.content-header h1 {
    margin-bottom: 0px;
}

.content-header {
    margin-bottom: 2ex;
}

.footnotes {
    margin-top: 10ex;
    color: rgb(180, 180, 180);
}

.date {
    white-space: nowrap;
    margin-top: 0px;
    color: rgb(180, 180, 180);
}

.shortdate {
    display: none;
}

.mistake a {
    color: rgb(210, 210, 210);
}

.mistake {
    float: right;
    font-style: italic;
}

.photo {
    max-width: 85ex;
    margin: 0 auto;
}

.photo img {
    max-width: 95%
}

.photo:not(:first-child) {
    margin-top: 2em;
}

@media screen and (max-width: 500px) {
    .title h1 {
        font-size: 7.5vw;
    }

    .blurb, .nav {
        font-size: 3vw;
    }
}

@media screen and (max-width: 600px) {
    .longdate { display: none; }
    .shortdate { display: initial; }
}