body {
    /*margin: 4em 8em;*/
    /*margin: 50px;*/
    /*width: 44em;
    max-width: 90%;*/
    /*margin: 50px auto;*/
    /*font-family: helvetica, arial, sans-serif;*/
    font-family: georgia;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

h1, h2, h3 { font-family: helvetica; }

h1 { color: #555; font-size: 140%; margin-top: 2em; margin-bottom: 0.5em; }
h2 { color: #777; font-size: 120%; margin-top: 2em; margin-bottom: 0.5em; }
h3 { font-size: 110%; }

pre {
    background-color: #f6f8fa; padding: 16px;
    font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
    border-radius: 3px;
}

/*article a {
    background-color: #f0f0f0;
    padding: 2px 4px;
    border: 1px solid #eaeaea;
    border-radius: 3px;
    text-decoration: none;
    color: inherit;
}

article a:visited {
    background-color: #fafafa;
    border: 1px solid #f0f0f0;
}

article a:hover {
    background-color: rgb(0, 0, 238);
    color: white;
}

article a:visited:hover {
    background-color: rgb(85, 26, 139);
}*/

/*mark { background-color: #eee; font-weight: bold; color: #666; }*/
mark { background-color: inherit; font-weight: bold; }

/* maybe different levels of this based on different browser widths */
body { max-width: 1280px; /*font-size: 1.8vw;*/ }
body { margin-bottom: 100px; overflow: overlay; }
figure { margin: 0; }
figure > img { max-width: 100%; margin: auto; }

figcaption, .caption { color: #666; font-style: italic; font-size: 90%; }
.caption { margin: 0; }


.logo { float: right; width: 56px; height: 20px; }

@media (min-width: 1280px) {
    body { font-size: 1.5em; }
}

@media (max-width: 800px) {
    body { font-size: 1em; }
}

@media (min-width: 800px) and (max-width: 1280px) {
    body { font-size: 2vw; }
}

p.emoji { font-size: 200%; margin: 0; }

figcaption cite { font-weight: bold; }

figcaption em { font-weight: bold; }

ul { list-style-type: none; }

ul { list-style-type: none; margin-left: 0; padding-left: 0; margin-bottom: 2em; }

.contents h3 { margin-top: 0; }

.contents li { /*clear: right;*/ margin-bottom: 2em; /*overflow: auto;*/ }

/*.contents li a img {
    margin-left: 1em;
    float: right;
}*/

/*
.contents li a { outline: 1px solid black; position: relative; display: block; minimum-height: ;}

.contents li a img { position: absolute; top: 0; right: 0; }
*/

.home .intro { margin-bottom: 100px; margin-top: 0; }

.thought { font-style: italic; }
body { max-width: none; /*width: auto;*/ margin-top: 0; }
figure.f1 { overflow: hidden; }
figure.f1 img { width: 100%; }


.home header, article, footer { max-width: 44em; margin-left: auto; margin-right: auto; }
.home header { margin-top: 100px; margin-bottom: 80px; }

.home header div img { vertical-align: bottom; }

@media screen and (max-width: 420px) and (min-width: 100px) {
    figure.f1 { max-height: 500px; }
    .home header, article, footer { max-width: 360px; }
    .home header div img { max-width: 340px; }
    body { width: auto; margin-left: auto; margin-right: auto; }
    .home header { margin-top: 60px; margin-bottom: 40px; }
    .home .intro { margin-bottom: 40px; }
    .home .contents li a img { margin-left: 0; float: none; }

    ul.contents li a img { float: none; margin: 0; width: 100%; display: block; }
}

@media screen and (max-height: 960px) and (min-height: 41px) {
    figure.f1 { max-height: 500px; }
}

@media screen and (max-height: 1200px) and (min-height: 961px) {
    figure.f1 { max-height: 800px; }
}