@import url("https://use.typekit.net/nzu2ffe.css");
@import url("spectre.min.css");
@import url("reset.css");
@import url("aos.min.css");


/* Hold off animations until all content loads
---------------------------------------------------- */
.js-loading *, .js-loading *:before, .js-loading *:after { animation-play-state: paused !important }


/* Spectre overrides
---------------------------------------------------- */

.container { padding-left: 2rem; padding-right: 2rem; box-sizing: border-box }

html { font-size: 62.5% }

body { margin: 0; font: 1.6rem/1.5 "jaf-bernino-sans", sans-serif; font-weight: 400; font-style: normal; color: #233142; text-rendering: optimizeLegibility; position: relative; background-color: #FFFFFF; -webkit-font-smoothing: subpixel-antialiased; -moz-font-smoothing: subpixel-antialiased; -o-font-smoothing: subpixel-antialiased; font-feature-settings: "liga" 1, "lnum" 1; background: url("../images/theme/body.jpg") center bottom no-repeat; background-attachment: fixed; background-size: cover; overflow-y: scroll }
@media (min-width: 841px) {
    body { font-size: 1.8rem }
}

ul, ol { list-style-position: outside }
ul li, ol li { padding-left: 16px }

ul, ol { margin-left: 20px }
ul li:not(:last-child), ol li:not(:last-child) { margin-bottom: 8px }

ul.social { padding-top: 12px; margin-left: 0 }
ul.social .icon { width: 24px; height: 24px }
ul.social li { list-style: none; display: inline-block; padding-left: 0 }
ul.social a { padding: 0 16px; display: inline-block }

em, cite { font-style: italic }

img { border-radius: 8px }

a:link, a:active, a:visited { color: #F95959; text-decoration: none }
a:not(.nou):hover { text-decoration: underline }

figcaption { font-style: italic; font-size: 1.4rem; color: #888888; display: block; text-align: center; padding-top: 0.8rem }
@media (min-width: 841px) {
    figcaption { font-size: 1.6rem }

}

h1, h2, h3, h4, .journal-post .content blockquote, #link-about { font-family: "abril-titling", serif; font-weight: 600 }


/* Layout blocks
---------------------------------------------------- */

.container { position: relative }

#header { position: fixed; top: 0; left: 0; right: 0; width: 100vw; padding-top: 6.4rem; color: rgba(255,255,255,0.8) }

#header h1 { font-size: 3.2rem; color: #F95959 }

#header p { padding-bottom: 3.2rem; font-weight: 600 }

#header:after { display: block; width: 2px; height: 64px; margin: 32px auto 0 auto; background-color: rgba(255,255,255,0.25); content: "" }

#dp { display: block; margin: 0 auto 32px auto }
#dp img { border-radius: 100%; display: inline-block; width: 48px; height: 48px }
.is-entry #dp { margin-bottom: 0 }

#content { position: relative }

#footer { font-size: 1.6rem; line-height: 1.6; color: #888888; background-color: #EAEAEA; margin-bottom: 6.4rem }
@media (min-width: 841px) {
    #footer { font-size: 1.6rem }
}
#footer a:link, #footer a:active, #footer a:visited { color: inherit; text-decoration: underline }

.pagination { display: block; margin: 0 auto }
.paginate { display: inline-block; padding: 1.6rem }
.paginate .icon { width: 36px; height: 36px }


/* Utils
---------------------------------------------------- */

.pad-l { padding-left: 3.2rem }
.pad-r { padding-right: 3.2rem }
.pad-t { padding-top: 9.6rem }
.pad-t-half { padding-top: 3.2rem }
.pad-t-qtr { padding-top: 3.2rem }
.pad-b { padding-bottom: 9.6rem }
.pad-b-half { padding-bottom: 3.2rem }
.pad-b-qtr { padding-bottom: 3.2rem }
@media (min-width: 841px) {
    .pad-l { padding-left: 12.8rem }
    .pad-r { padding-right: 12.8rem }
    .pad-t { padding-top: 16rem }
    .pad-t-half { padding-top: 6.4rem }
    .pad-t-qtr { padding-top: 3.2rem }
    .pad-b { padding-bottom: 16rem }
    .pad-b-half { padding-bottom: 6.4rem }
    .pad-b-qtr { padding-bottom: 3.2rem }

}

/* Post styles
---------------------------------------------------- */

hr { display: block; width: 120px; height: 2px; border: 0; border-top: 1px solid #ABABAB; margin: 0 auto; padding-bottom: 2.4rem; margin-top: 0.8rem }
@media (min-width: 841px) {
    hr { margin-top: 1.6rem; padding-bottom: 4.8rem }
}

.icon-tag { display: block; width: 24px; height: 24px; margin: 0 auto }
@media (min-width: 841px) {
    .icon-tag { width: 32px; height: 32px }
}
.kf-external-link { width: 32px; height: 32px; margin-bottom: 16px }
.kf-back { position: absolute; top: 2px; left: 20px }

.callout { background-color: #EAEAEA; color: #466284; padding: 2.4rem !important; border-radius: 8px; margin-bottom: 3.2rem }

.now-playing { color: #999999; text-transform: uppercase; display: block; margin-bottom: 0.8rem; font-weight: 600 }

.journal-post .content h2 { font-size: 2rem; padding-top: 0.8rem; padding-bottom: 2.4rem }
@media (min-width: 841px) {
    .journal-post .content h2 { font-size: 2.8rem; padding-top: 2.4rem; padding-bottom: 3.2rem }
}

.journal-post .content h3 { font-size: 2rem; padding-top: 0.8rem; padding-bottom: 2.4rem }
@media (min-width: 841px) {
    .journal-post .content h3 { font-size: 2.2rem; padding-top: 2.4rem }
}

.journal-post { background-color: #FFFFFF; margin-bottom: -24px; border-radius: 16px; display: block; position: relative; border: 4px solid #DEDEDE; box-shadow: 0 -8px 24px rgba(0,0,0,0.125); box-sizing: border-box }

.journal-post h1 { font-size: 2.8rem }
@media (min-width: 841px) {
    .journal-post h1 { font-size: 4.4rem }
}

.journal-post header img, .journal-post iframe { border-radius: 12px 12px 0 0 }

.journal-post .content p, #footer p, .journal-post .content ul, .journal-post .content ol { display: block; padding-bottom: 2.4rem }
.journal-post .content figure { padding-bottom: 3rem; padding-top: 1.6rem }
.journal-post .content *:last-child { padding-bottom: 0 !important }
@media (min-width: 841px) {
    .journal-post .content p, #footer p, .journal-post .content ul { padding-bottom: 3.2rem }
    .journal-post .content figure { padding-bottom: 4rem }
}

.journal-post .content blockquote { font-size: 2rem; display: block; border-left: 4px solid #DADADA; padding-left: 2.4rem; padding-bottom: 0.8rem; margin-bottom: 2.4rem }
@media (min-width: 841px) {
    .journal-post .content blockquote { font-size: 3.2rem; line-height: 1.4; margin-bottom: 3.2rem }
}
.journal-post .content blockquote cite { font-family: "jaf-bernino-sans", sans-serif; font-size: 1.6rem; display: block; font-weight: 600; margin-top: 1.6rem; font-style: normal }
@media (min-width: 841px) {
    .journal-post .content blockquote cite { font-size: 2rem }
}
.journal-post .content blockquote cite:before { content: "\2014"; display: inline-block; padding-right: 0.8rem; color: #ADADAD }
.journal-post .content blockquote p { padding-bottom: 0 }

.journal-post time { text-transform: uppercase; margin-bottom: 1.6rem; display: block; letter-spacing: 1px }

.journal-post footer .posted { font-size: 1.4rem; font-weight: 600 }
@media (min-width: 841px) {
    .journal-post footer .posted { font-size: 1.6rem }
}