@import url("https://use.typekit.net/zdm8nbh.css");
@import url("spectre.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.6 "ff-tisa-web-pro", Georgia, serif; font-weight: 400; font-style: normal; color: #233142; text-rendering: optimizeLegibility; position: relative; background-color: #E3E3E3; -webkit-font-smoothing: subpixel-antialiased; -moz-font-smoothing: subpixel-antialiased; -o-font-smoothing: subpixel-antialiased; font-feature-settings: "liga" 1, "lnum" 1 }
@media (min-width: 841px) {
    body { font-size: 2rem; line-height: 1.6 }
}

ul { line-height: inherit; margin-bottom: 3.2rem; margin-left: 0 }
li { list-style: none; margin-bottom: 0 }

a:link, a:visited, a:active { color: inherit; text-decoration: underline; text-decoration-color: rgba(249,89,89,0.6) }
a:hover { color: #F95959 }

.avatar.avatar-xxl { font-size: 1.8rem; width: 4rem; height: 4rem }
.avatar-xxl { margin-bottom: 3.2rem }
@media (min-width: 841px) {
    .avatar.avatar-xxl { font-size: 1.8rem; width: 4.8rem; height: 4.8rem }
}

h1, h2, h3, h4, .social, .btn, .tooltip:after { font-family: "soleil", sans-serif; font-style: normal; font-weight: 500 }

h1 { font-size: 4.8rem; line-height: 1.3; letter-spacing: 0.1rem; text-transform: uppercase; color: #F95959 }
h1 span { display: block; color: rgba(255,255,255,0.8); font-size: 1.8rem; margin-top: 1.6rem }
@media (min-width: 841px) {
    h1 { font-size: 6.4rem }
    h1 span { font-size: 3.2rem }
}

h2 { font-size: 3.6rem; line-height: 1.2; margin: 0 }
@media (min-width: 841px) {
    h2 { font-size: 4.8rem; line-height: 1.3 }
}

h3 { font-size: 2rem; color: #F95959 }
@media (min-width: 841px) {
    h3 { font-size: 2.8rem }
}

h4 { font-size: 1.6rem; letter-spacing: 0.1rem; text-transform: uppercase; color: #F95959; margin-bottom: 0 }
@media (min-width: 841px) {
    h4:first-of-type { margin-top: 0.6rem }
}

.tooltip:after { font-size: 1.2rem; background-color: rgba(48,75,110,0.9); color: #E3E3E3; padding: 0.4rem 0.8rem; transition-delay: 0.5s }
#further .tooltip:after { transform: translate(-50%,2.4rem) }
#further .tooltip:focus::after, #further .tooltip:hover::after { transform: translate(-50%,4.8rem) }

.btn, .btn:focus, .btn:active { font-size: 1.4rem; border-radius: 2.4rem; height: 3.2rem; line-height: 3.2rem; background-color: #F95959; color: #E3E3E3 !important; padding: 0 2rem; border: none !important }
.btn:hover { background-color: #f84848 }
@media (min-width: 841px) {
    .btn, .btn:focus, .btn:active { font-size: 1.8rem; border-radius: 2.4rem; height: 4.8rem; line-height: 4.8rem; padding: 0 3.2rem }
}

p { display: block }
p:not(:last-of-type) { margin-bottom: 3.2rem }

em, i, q { font-style: italic }

q { quotes: none; display: block }

.px-1 { padding-left: 0.4rem !important; padding-right: 0.4rem !important }
@media (min-width: 841px) {
    .px-1 { padding-left: 0.8rem !important; padding-right: 0.8rem !important }
}

.px-1 img { border-radius: 2px }


/* Helper classes
---------------------------------------------------- */

.bg-platinum { background-color: #E3E3E3 }
.bg-yankeesblue { background-color: #1F272E; color: #E3E3E3 }
.bg-columbiablue { background-color: #C9D4E2 }

/* Turn off aliasing because light text on a dark background appears too heavy in macOS */
.bg-yankeesblue p { -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -o-font-smoothing: antialiased; }

/* Intra/inter block spacing */
.mt-full, .mt-2x { margin-top: 3.2rem }
.mt-sm-qtr, .mt-md-qtr { margin-top: 1.6rem }
.mt-sm-half { margin-top: 3.2rem }
.mt-sm-full, .mt-md-full { margin-top: 6.4rem }
@media (min-width: 601px) {
    .mt-sm-full, .mt-sm-half, .mt-sm-qtr { margin-top: 0 }
    .mt-full { margin-top: 6.4rem }
    .mt-half { margin-top: 3.2rem }
    .mt-qtr { margin-top: 2.4rem }
    .mt-2x { margin-top: 12.8rem }
    .vc { margin-top: 4.8rem } /* Visual correction for a button that follows a paragraph */
}
@media (min-width: 841px) {
    .mt-md-full, .mt-md-qtr { margin-top: 0 }
}

.centered { text-align: center }

@media (min-width: 601px) {
    .break-lg { display: block }
    .row-reverse { flex-direction: row-reverse !important }
}


/* Theme styles
---------------------------------------------------- */

.social { font-size: 1.4rem; display: block }
.social li { display: inline-block }
.social li:not(:last-child) { margin-right: 1.6rem }
.social li:not(:last-child):after { content:"\00d7"; color: rgba(255,255,255,0.25); margin-left: 1.6rem }
.social a { color: rgba(255,255,255,0.6); text-decoration: none }
@media (min-width: 841px) {
    .social { font-size: 1.6rem }
}

section, header, footer { padding: 6.4rem 0 }
@media (min-width: 841px) {
    section, header, footer { padding: 12.8rem 0 }
}

#header { position: relative }
#header .container { position: relative; z-index: 2 }
#header p { font-size: 1.8rem; font-style: italic }
@media (min-width: 841px) {
    #header { padding: 12rem 0 16rem 0 }
    #header p { font-size: 2.4rem }
}

#dp { box-sizing: content-box }

#hbg { display: block; position: absolute; z-index: 1; top: 0; left: 0; right: 0; bottom: 0; background-color: #1F272E; background-position: center top; background-repeat: no-repeat; opacity: 0; transition: opacity 3s; transition-delay: 1s }

#title:before { content: ""; display: block; width: 0.1rem; height: 4rem; background-color: rgba(255,255,255,0.25); margin: 0 auto 1.6rem auto }
@media (min-width: 841px) {
    #title:before { height: 4.8rem }
}

#portfolio { padding-bottom: 0 }

.side-project { flex-direction: column-reverse }
@media (min-width: 601px) {
    .side-project { flex-direction: row; padding-bottom: 3.2rem }
}

.details { display: block; font-style: italic; color: #737373 }

.writing-row { border-top: 1px solid rgba(0,0,0,0.125); padding: 3.2rem 0 }
.writing-row img { display: block; width: 100% }
.writing-row time { color: #737373; display: block; margin-top: 8px }

h3 a { text-decoration: none !important }

p cite { font-style: italic }

@media (min-width: 841px) {
    .writing-row time { text-align: right }
}

#about { color: #F95959; margin-top: 3.2rem }
#about:before { display: block; width: 0.1rem; height: 6.4rem; margin: 0 auto 3.2rem auto; content: ""; background-color: rgba(255,255,255,0.25) }
@media (min-width: 841px) {
    #about { margin-top: 6.4rem }
    #about:before { height: 12.8rem }
}

footer .avatar { display: block; margin-left: auto; margin-right: auto }
footer q { margin-top: 1.6rem }
footer p, small { font-size: 1.4rem; color: #466284 }
@media (min-width: 841px) { 
    footer p { font-size: 1.6rem } 
}

.btn + small { display: block; margin-top: 1.6rem; font-style: italic; font-size: 1.6rem; }

.has-shadow { box-shadow: 0 0 3.6rem rgba(48,75,110,0.25) }

@media (min-width: 841px) {
    .photos + .photos { margin-top: 3.2rem }
}

.opl { display: inline-block; position: absolute; right: 0; top: 48px; width: 73px; height: 56px; z-index: 999999 }