body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

h1 {
    text-align:center;
}

h2 {
    padding:0;
    margin:0;
}

ul.breadcrumbs {
    list-style:none;
    text-align:center;
    margin:0 auto;
}
ul.breadcrumbs li {
    display:inline;
    margin:0 1em;
}

a img {
    border:0;
}

div.maincontent {
    max-width: 720px;
    margin: 0 auto;
}

@media screen and (max-width: 640px) {
    div.maincontent {
        width: 100%;
    }
}

@media screen and (min-width: 1200px) {
    div.maincontent {
        width: 1024px;
    }
}

div.comic {
    text-align:center;
}

div.comic img {
    width: 100%;
}

ul.nav {
    padding:0;
    margin:0;
}
ul.nav li {
    list-style:none;
    display:inline-block;
    padding:1ex 1ex 0;
}

div.description, div.transcript {
    position:relative;
    background:#eee;
    border:1px solid #ccc;
    padding:1em;
    margin-top:1ex;
    text-align:left;
}
div.description h4, div.transcript h4 {
    position:absolute;
    top:0;
    right:1ex;
    padding:0;
    margin:0;
    opacity:0.5;
}

div.navmenu {
    position:absolute;
    top:40px;
    left:10px;
    width:135px;
}

@media screen and (max-width: 640px) {
    div.navmenu {
        position: initial;
    }
}

div.navmenu ul {
    padding-left:0;
    list-style:none;
}

div.recently {
    position:absolute;
    top:40px;
    right:10px;
}

@media screen and (max-width: 640px) {
    div.recently {
        position: initial;
    }
}

div.recently ul {
    padding-left:0;
    list-style:none;
}

div.archive li.chapter {
    list-style:none;
    font-weight:bold;
    font-size:18pt;
}
div.archive li.chapter a {
    text-decoration:none;
}

pre.debug {
    background:#ccc;
    border:1px solid black;
    padding:1em;
}

div.message {
  margin: 16px 0;
  padding: 16px;
  border: 1px solid #999;
  background-color: #fefefe;
  border-radius: 4px;
}