html {
    font-family:sans-serif;
    color:#080808
}
body {
    max-width:1366px;
    margin:0 auto;
    padding:1rem;
    background: #ded7db;
    color: black;
    font-size: 18px;
}

div .pgp {
    background: #cfc6cb;
    border: 15px solid;
    border-color: transparent;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
}

h2 a {
    color: green;
    text-decoration: none;
}

h2 {
    color: #45818e;
}

h3 {
    color: #45818e;
}

h4 {
    color: #45818e;
}

a {
    color: green;
    text-decoration: none;
}

a:visited {
    color: green;
    text-decoration: none;
}

ul a:link {
    color: green;
    text-decoration: none;
}

ul a:visited {
    color: green;
    text-decoration: none;
}

ul a:hover {
    color: #1fd149;
}

img {
    max-width: 90%;
}

.index {
    display:flex;
    flex-direction:row
}
.index .article-list {
    flex-grow:1
}
.index .article-list .article {
    margin-bottom:1rem
}
.index .article-list .date {
    display:block;
    color:#333
}
.index aside {
    width:40%
}
.index aside img {
    display:block;
    margin:0 auto 1rem;
    border-radius:5px
}
.index aside dt {
    font-size:.9rem
}
.index aside dd {
    margin-left:0
}
.index aside dd:not(:last-child) {
    margin-bottom:.5rem
}
@media(max-width:640px) {
    .index aside {
        display:none
    }
}
article {
    margin:0 auto;
    max-width:720px;
    line-height:1.3
}
article img,
article video,
article iframe {
    display:block!important;
    margin:0 auto!important;
    max-width:90%
}
@media(max-width:640px) {
    article img,
    article video,
    article iframe {
        max-width:calc(100% - 2rem)
    }
}
article .comment {
    margin:2rem auto 0;
    max-width:80%;
    color:#333
}
.footnotes {
    font-size:.85rem
}
footer {
    margin-top:2rem;
    text-align:center;
    font-size:.8rem;
    color:#333
}
.float-img {
    float:right;
    display:inline;
    padding-left:1rem
}
@media(max-width:640px) {
    .float-img {
        display:block;
        float:none;
        padding-left:inherit
    }
}

pre {
    max-width: 50%;
    font-family: monospace;
    background: #f4f4f4;
    border: 1px solid #ddd;
    border-left: 3px solid #45818e;
    color: #665;
    page-break-inside: avoid;
    line-height: 1.8;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1em 1.5em;
    display: block;
    word-wrap: break-word;
}
pre .cp {
    color:#800
}
pre .about {
    color: black;
}

pre .k {
    color:#008
}
pre .kt,
pre .kd,
pre .kc {
    color:#44f
}
pre .s {
    color:#484;
    font-style:italic
}
pre .cm,
pre .c1 {
    color:#333;
    font-style:italic
}
pre .gi {
    color:green
}
pre .gd {
    color:red
}
pre .gu {
    color:blue
}
.webring {
    margin-top:2rem
}
.webring h2 {
    font-size:1.2rem
}
.webring .articles {
    display:flex
}
@media(max-width:640px) {
    .webring .articles {
        flex-direction:column
    }
}
.webring .title {
    margin:0
}
.webring .article {
    flex:1;
    display:flex;
    flex-direction:column;
    background:#eee;
    padding:.5rem;
    margin:0 .5rem
}
@media(max-width:640px) {
    .webring .article {
        margin:.5rem 0
    }
}
.webring .article:first-child {
    margin-left:0
}
.webring .article:last-child {
    margin-right:0
}
.webring .summary {
    font-size:.8rem;
    flex:1
}
.webring .attribution {
    float:right;
    font-size:.8rem;
    color:#555;
    line-height:3
}
.webring .date {
    color:#000
}
summary {
    cursor:pointer;
    background-color:#eee;
    padding:.25rem 1rem;
    margin:0 -1rem
}
details[open] {
    border-bottom:1rem solid #eee;
    margin:0 -1rem 1rem;
    padding:0 1rem
}
.text-center {
    text-align:center
}
blockquote {
    border-left:5px solid #bbb;
    background-color:#eee;
    padding:0 1rem;
    margin-left:calc(-1rem - 5px);
    margin-right:-1rem
}
blockquote blockquote {
    margin-right:0;
    margin-left:0
}
dl {
    display:grid;
    grid-template-columns:auto 1fr;
    grid-gap:.2rem 1rem
}
dl dt {
    font-weight:700;
    grid-column-start:1
}
dl dd {
    grid-column-start:2;
    margin:0
}
.alert {
    padding:.5rem;
    border:1px solid transparent;
    margin-bottom:1rem
}
.alert.alert-danger {
    background:#f8d7da;
    color:#721c24;
    border-color:#f5c6cb
}
.alert.alert-info {
    background:#d1ecf1;
    color:#0c5460;
    border-color:#bee5eb
}