.site-header { padding: 3% 6%; }
@media (max-width: 1000px) { .site-header { padding: 3%; } }

.content, .banner, .site-footer { padding: 2.5% 20%; }
@media (max-width: 1000px) { .content, .banner, .site-footer { padding: 7.5% 12.5%; } }

.icon:hover { border-radius: 100%; color: #0b1a26; fill: #0b1a26; transform: scale(1.25); transition: background-color .25s, transform .25s ease-out; }

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain)
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

table { border-collapse: collapse; border-spacing: 0; }

* { box-sizing: border-box; }

body { color: #333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neu", Arial, sans-serif; font-size: 16px; line-height: 1.6; word-wrap: break-word; }

.site-title { font-size: 30px; font-size: 1.875rem; color: #0b1a26; text-decoration: none; }

a { color: #c60000; font-weight: 600; text-decoration: none; }
a:hover, a:focus { color: #c60000; text-decoration: underline; }

.footnote { font-size: smaller; vertical-align: super; }

.footnotes ol li { margin-left: 1rem; }

blockquote { border-left: 5px solid #ccc; margin: 15px 0; padding: 5px 30px 5px 25px; }
blockquote p { color: #333; margin-bottom: 0; text-indent: -.4em; }
blockquote p::before { content: '\201C'; }
blockquote p::after { content: '\201D'; }

.post ol { list-style-type: decimal; margin: 1rem .5rem; }
.post ul { list-style-type: square; margin: 1rem .5rem; }
.post li { margin-left: .5rem; }
.post p { font-size: 20px; font-size: 1.25rem; margin: 1rem 0; }
.post p em { font-style: italic; }
.post p strong { font-weight: 700; }

code, pre { font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

code { background-color: #ccc; border-radius: 3px; color: #000; font-size: .9rem; padding: .25em .5em; }

pre { background-color: #ccc; display: block; font-size: .8rem; line-height: 1.4; margin-bottom: 1rem; margin-top: 0; padding: 1rem; white-space: pre-wrap; word-break: break-all; word-wrap: break-word; }
pre code { background-color: transparent; color: inherit; font-size: 100%; padding: 0; }

table { border-collapse: collapse; }

tr { border-bottom: 1px solid #ccc; }

th, td { padding: 4px; text-align: left; }

h1, h2, h3, h4, h5, h6 { color: #333; font-weight: 700; line-height: 1.25; margin-bottom: .5rem; text-rendering: optimizeLegibility; }

h1 { font-size: 50px; font-size: 3.125rem; }

h2 { font-size: 36px; font-size: 2.25rem; margin-top: 1rem; }

h3 { font-size: 28px; font-size: 1.75rem; margin-top: 1.5rem; }

h4, h5, h6 { font-size: 24px; font-size: 1.5rem; margin-top: 1rem; }

.u-url { color: #333; text-decoration: none; }

.post-date { font-size: 20px; font-size: 1.25rem; color: #ccc; text-transform: uppercase; }

.h-card h2 { color: #fff; margin-left: em; }

.soc { display: block; font-size: 0; list-style: none; margin: 0; padding: 1.5rem; text-align: center; }
.soc li { display: inline-block; margin: 1em; }
.soc a, .soc svg { display: block; }
.soc a { height: 4rem; position: relative; width: 4rem; }

svg { height: 100%; width: 100%; }

.icon { color: #ccc; fill: #ccc; }
.icon:hover { background: #ccc; }

iframe, img, embed, object, video { max-width: 100%; }

.site-header { align-items: center; display: flex; width: 100%; }
@media (max-width: 600px) { .site-header { flex-wrap: wrap; }
  .site-header .site-nav { flex-basis: 100%; order: 2; text-align: center; }
  .site-header .site-nav a { font-size: 24px; font-size: 1.5rem; color: #0b1a26; letter-spacing: 2px; text-decoration: none; } }

.site-nav { flex: 1; text-align: right; }
.site-nav > ul { display: inline-flex; list-style: none; margin: 0; padding: 0; }
.site-nav a { font-size: 18px; font-size: 1.125rem; display: inline-block; padding: 20px; text-decoration: none; text-transform: uppercase; }

.content { display: inline-block; width: 100%; }
.content article { margin-bottom: 5rem; }

.post-title a { color: #0b1a26; }
.post-title a:hover { color: #c60000; text-decoration: none; }

.banner { background-color: #0b1a26; background-size: cover; color: #fff; display: inline-block; font-size: 1.2em; text-align: center; width: 100%; }
.banner .u-photo { border: #ccc 3px solid; border-radius: 50%; height: 10rem; overflow: hidden; width: 10rem; }

.entry-header { margin-bottom: 1em; }

.pagination { border-top: 1px solid #ccc; color: #ccc; font-weight: bold; margin-top: 40px; overflow: hidden; text-align: center; }
.pagination a:hover { background-color: #333; color: #ccc; text-decoration: none; }

@media (min-width: 990px) { .pagination { border: 1px solid #ccc; margin-bottom: 60px; } }
.pagination a, .pagination span { float: left; padding: 20px; width: 50%; }

.pagination a:first-child, .pagination span:first-child { border-right: 1px solid #ccc; }

.entry-footer { align-items: center; background: rgba(204, 204, 204, 0.1); display: flex; flex-direction: column; width: 100%; }
@media (min-width: 800px) { .entry-footer { flex-direction: row; } }
.entry-footer .h-card { flex: 0 auto; padding: 1rem; }
.entry-footer .h-card .u-photo { border: #ccc 3px solid; border-radius: 50%; display: block; height: 5rem; margin: auto; }
.entry-footer .meta-wrap { font-size: 18px; font-size: 1.125rem; flex: 1; padding: 1rem; }
.entry-footer .post-date { text-transform: none; }

.webmention-mention { display: flex; flex-direction: row; margin-bottom: 2rem; width: 100%; }
@media screen and (max-width: 600px) { .webmention-mention { flex-direction: column; } }
.webmention-mention .webmention-author { flex: 0 auto; height: 7rem; }
.webmention-mention .webmention-author a { text-align: center; }
.webmention-mention .webmention-author img { display: block; height: 4rem; margin: auto; }
.webmention-mention .webmention-summary { flex: 1; padding: 1rem; }

.site-footer { display: inline-block; text-align: center; width: 100%; }