@charset "UTF-8";
body { font-family: Helvetica, sans-serif; margin: 0; font-size: 16px; margin-bottom: 30px; }

a { text-decoration: none; color: #56BC8A; }
ul { margin: 0; padding: 0; }
li { list-style: none;  }

.sidebar { text-transform: lowercase; position: fixed; top: 0; left: 0; width: 15%;  }
.sidebar a { color: black;  font-weight: bold; }
.sidebar img { padding: 0 3px; border: 0; }
.sidebar section { padding: 30px; padding-bottom: 0; }
.sidebar .avatar img { padding: 0; margin-left: 2px; border-radius: 5px; }
.sidebar .sections a { padding: 3px 0; display: inline-block; }
.sidebar .sections a:hover { color: #56BC8A; }
.sidebar .sections li { margin-bottom: 5px; }
.sidebar .meta a { margin-right: 5px; color: black; }
.sidebar .meta a:hover { color: #56BC8A; }
.sidebar .meta .icon { margin-right: 5px; }

.content { margin-left: 15%; margin-right: 15%; margin-top: 30px; }
.content h1 { margin-top: 30px; font-size: 16px; color: #111; font-weight: bold; }
.content img { margin-left: -1px; padding: 1%; border: 1px solid #eeeeee; max-width: 98%; display: block; }
.content .byline { font-size: 12px; color: #777; }
//.content .byline:before { content: '— '; }
.content article { margin: 30px; }
.listing { column-count: 3; }
.listing a { margin: 0 30px 60px 30px;  display: block; }

@media (max-width: 768px) {
    .content { margin-right: 0; }
    .listing { column-count: 2; margin: 15px; }
    .listing a { margin: 0 15px 30px 15px; }
}

@media (max-width: 576px) {
    .sidebar { position: relative; top: 0; left: 0; width: 100%; text-align: center; }
    .content { margin-left: 0; }
    .listing { column-count: 1; }

}