html {
   background-color: #4c5260;
}
body, a, a:hover {
   color: #eee;
}
a[href], .link {
   color: #aaa;
   cursor: pointer;
}
a[href]:hover, .link:hover {
   text-shadow: 0 0 .7rem rgba(255,255,255,0.7);
   color: #fff;
}
h1, h2, h3, h4, h5, h6 {
   font-weight: 100;
}
::-webkit-input-placeholder {
    color: #fff;
}
::-moz-placeholder {
    color: #fff;
}
:-ms-input-placeholder {
    color: #fff;
}
p {
    padding:  0 1rem;
}

.wrap {
    max-width: 1200px;
}


.site-title {
   height: 4rem;
   font-size: 3rem;
   margin: 3rem 0;
   font-family: "Roboto Mono";
}
.site-title .import-statement {
   display: none;
}
@media (min-width: 40rem) {
   .site-title .import-statement {
      display: inline;
   }
}

.site-nav-enable {
    font-weight: normal;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: block;
    margin-bottom: 2rem;
    padding: .6rem;
}
#site-nav-enable-checkbox {
    display: none;
}
#site-nav-enable-checkbox:not(:checked) ~ .site-nav {
    display: none;
}
#site-nav-enable-checkbox:not(:checked) ~ .site-nav-enable::before {
    content: "Show ";
}
#site-nav-enable-checkbox:checked ~ .site-nav-enable::before {
    content: "Hide ";
}
.site-nav {
   padding: 0;
}
.site-nav ul {
   list-style: none;
   margin: 0;
   padding: 0;
   margin-bottom: 2rem;
}
.site-nav li {
   margin-top: 0;
   margin-bottom: 0;
   padding: .6rem;
}
.site-nav li:not(.list-heading):not(:last-child) {
   border-bottom: 1px solid #4c5260;
}
.site-nav li:not(.list-heading), .site-nav-enable {
   background-color: #323742;
}
.site-nav li.list-heading + li:not(.list-heading), .site-nav li:not(.list-heading):first-child, .site-nav-enable {
   border-top-left-radius: .4rem;
   border-top-right-radius: .4rem;
}
.site-nav li:not(.list-heading):last-child, .site-nav-enable {
   border-bottom-left-radius: .4rem;
   border-bottom-right-radius: .4rem;
}
.site-nav a {
   display: block;
   padding: .3rem;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
@media (min-width: 40rem) {
   .site-nav {
       padding-right: 2rem;
   }
   .site-nav-enable {
       display: none;
   }
    #site-nav-enable-checkbox:not(:checked) ~ .site-nav {
        display: block;
    }
}

.post-summary h2 {
   line-height: 1;
}
.post-summary h2 a {
   font-size: 3rem;
   color: #eee;
}
.post-summary time {
   font-size: 2rem;
   color: #ddd;
}
.post-summary time::before, h1 time::before {
    content: "(";
}
.post-summary time::after, h1 time::after {
    content: ")";
}

h1 time {
    color: #ddd;
    font-size: 3rem;
}

pre > code {
    font-family: monospace;
    color: #f4f5f6;
    max-height: 20rem;
    background-color: #4c5260;
    overflow: scroll;
    overflow-x: auto;
    overflow-y: auto;
}

aside {
    text-align: center;
    margin: 2em 0;
}

aside img {
    max-width: 80%;
    display: block;
    margin: 0 auto;
}

aside em {
    font-style: italic;
}

input {
    color: #eee;
}

label {
    font-weight: normal;
}
code {
    background-color: #323742;
}