@import url(github.css);
@font-face { font-family: "Bryce Serif"; src: url("/assets/BryceSerif-Regular.woff") format("woff"); }
@font-face { font-family: "overpass"; src: url("/assets/overpass/overpass-thin.woff") format("woff"); font-weight: 200; font-style: normal; }
@font-face { font-family: "overpass"; src: url("/assets/overpass/overpass-thin-italic.woff") format("woff"); font-weight: 200; font-style: italic; }
@font-face { font-family: "overpass"; src: url("/assets/overpass/overpass-extralight.woff") format("woff"); font-weight: 300; font-style: normal; }
@font-face { font-family: "overpass"; src: url("/assets/overpass/overpass-extralight-italic.woff") format("woff"); font-weight: 300; font-style: italic; }
@font-face { font-family: "overpass"; src: url("/assets/overpass/overpass-light.woff") format("woff"); font-weight: 400; font-style: normal; }
@font-face { font-family: "overpass"; src: url("/assets/overpass/overpass-light-italic.woff") format("woff"); font-weight: 400; font-style: italic; }
@font-face { font-family: "overpass"; src: url("/assets/overpass/overpass-regular.woff") format("woff"); font-weight: 500; font-style: normal; }
@font-face { font-family: "overpass"; src: url("/assets/overpass/overpass-regular-italic.woff") format("woff"); font-weight: 500; font-style: italic; }
@font-face { font-family: "overpass"; src: url("/assets/overpass/overpass-semibold.woff") format("woff"); font-weight: 600; font-style: normal; }
@font-face { font-family: "overpass"; src: url("/assets/overpass/overpass-semibold-italic.woff") format("woff"); font-weight: 600; font-style: italic; }
@font-face { font-family: "overpass"; src: url("/assets/overpass/overpass-bold.woff") format("woff"); font-weight: 700; font-style: normal; }
@font-face { font-family: "overpass"; src: url("/assets/overpass/overpass-bold-italic.woff") format("woff"); font-weight: 700; font-style: italic; }
@font-face { font-family: "overpass"; src: url("/assets/overpass/overpass-extrabold.woff") format("woff"); font-weight: 800; font-style: normal; }
@font-face { font-family: "overpass"; src: url("/assets/overpass/overpass-extrabold-italic.woff") format("woff"); font-weight: 800; font-style: italic; }
@font-face { font-family: "overpass"; src: url("/assets/overpass/overpass-heavy.woff") format("woff"); font-weight: 900; font-style: normal; }
@font-face { font-family: "overpass"; src: url("/assets/overpass/overpass-heavy-italic.woff") format("woff"); font-weight: 900; font-style: italic; }
@font-face { font-family: "Fantasque Sans Mono"; src: url("/assets/fantasque_sans_mono/FantasqueSansMono-Bold.woff") format("woff"); font-weight: 700; font-style: normal; }
@font-face { font-family: "Fantasque Sans Mono"; src: url("/assets/fantasque_sans_mono/FantasqueSansMono-BoldItalic.woff") format("woff"); font-weight: 700; font-style: italic; }
@font-face { font-family: "Fantasque Sans Mono"; src: url("/assets/fantasque_sans_mono/FantasqueSansMono-Italic.woff") format("woff"); font-weight: 400; font-style: italic; }
@font-face { font-family: "Fantasque Sans Mono"; src: url("/assets/fantasque_sans_mono/FantasqueSansMono-Regular.woff") format("woff"); font-weight: 400; font-style: normal; }
html { font-family: "overpass", "Avenir Next", "Avenir", Helvetica, Arial; }

h1, h2, h3, h4, h5, h6, .site-title { font-family: "Bryce Serif"; font-weight: normal; font-size: 2.5rem; }

h2 { font-size: 2rem; }

h3 { font-size: 1.8rem; }

h4 { font-size: 1.5rem; }

h5 { font-size: 1.2rem; }

h6 { font-size: 1rem; }

pre, code, tt { font-family: "Fantasque Sans Mono", consolas, "Lucida Mono", courier; }

main { font-size: 1.2em; }
main .post-header h1 { margin: 0; }
main .post-header time { font-family: "Bryce Serif"; font-size: 2.5em; }

body { padding: 0; margin: 0; }

header { margin-bottom: 1rem; padding: 1rem; }

main { padding: 1rem; margin-bottom: 1rem; }
main img { max-width: 100%; height: auto; }
main .home ul.post-list { list-style-type: none; padding-left: 0; }
main .home ul.post-list li { display: grid; grid-template-columns: 8em auto; align-items: center; }
main .home ul.post-list li time { margin-right: 1em; min-width: 8em; }
main .home ul.post-list li h3 { font-size: 2em; margin-top: 0; margin-bottom: 0; }

footer .wrapper { padding: 1rem; }
footer .wrapper ul { list-style-type: none; padding-left: 0; }

@media (min-width: 60rem) { html { height: 100%; }
  body { display: grid; min-height: 100%; grid-template-rows: auto 1fr auto; }
  header, main { margin: 0 auto; padding: 1em; max-width: 60rem; min-width: 40rem; }
  body > header { margin-top: -4em; padding-top: 4em; transform: rotateZ(-1.2deg); }
  main { max-width: 50rem; }
  main .post-header { display: grid; grid-template-columns: auto auto; }
  main .post-header h1 { grid-column: 1; grid-row: 1; overflow: wrap; }
  main .post-header time { grid-column: 2; grid-row: 1; text-align: right; border-left: 1px solid; padding-left: 0.25em; }
  main .post-header p.post-meta { grid-column-start: 1; grid-column-end: 2; grid-row: 2; }
  footer { overflow: hidden; margin: 0 auto 0; max-width: 50em; }
  footer .wrapper { margin: 0 auto; padding: 1em; width: 40em; transform: rotateZ(2.4deg) translateY(3em); padding-bottom: 6em; }
  footer .wrapper .footer-col-wrapper { display: grid; grid-template-columns: auto auto auto; } }
html, body { background-color: #010; }

body > header, footer .wrapper { background: #edeaf1; background: linear-gradient(to right, #edeaf1 0%, #b3ada1 100%); box-shadow: 2px 2px 4px black; }

main { background: #e8e8e8; background: linear-gradient(to right, #fefcff 0%, #e8e8e8 2%, #bcb9a8 100%); box-shadow: 2px 2px black; }

main h1, main h2, main h3, main h4, main h5, main h6, main time { color: #09263c; }
main time { border-color: #09263c; }
main .footnotes { border-top: 1px solid #084b64; }

.post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6 { margin-bottom: 0; }
.post-content blockquote { border-left: 4px solid #084b64; margin-left: 2em; padding-left: 2em; }
.post-content dl.conversation { display: grid; grid-template-columns: auto auto; }
.post-content dl.conversation dt { grid-column: 1; align-self: stretch; justify-self: end; }
.post-content dl.conversation dd { grid-column: 2; justify-self: start; }
.post-content .photos.mini { max-width: 30%; }
.post-content .photos.right { float: right; margin-left: 2em; }
.post-content .photos.left { float: left; margin-right: 2em; }
.post-content .photos.fourup img { max-width: 49%; height: auto; }

.old-warning { box-shadow: 2px 2px black; margin: 1rem 4rem 2rem; padding: 1rem; background-color: #edeaf1; transform: rotateZ(0.8deg); }
.old-warning h1 { font-size: 1.5rem; }

aside, .aside { box-shadow: 2px 2px black; margin: 1rem 4rem 2rem; padding: 1rem; background-color: #edeaf1; transform: rotateZ(0.8deg); }
aside h1, .aside h1 { font-size: 1.5rem; }

aside .social, .aside .social { transform: none; }

.social { box-shadow: 2px 2px black; margin: 1rem 4rem 2rem; padding: 1rem; background-color: #edeaf1; transform: rotateZ(-0.8deg); display: grid; grid-template-areas: "avatar screenname" "avatar username" "content content" " attachments attachments" "timestamp timestamp" "credit credit"; grid-template-columns: 4rem auto; grid-template-rows: minmax(2rem, auto) minmax(2rem, auto) auto auto; column-gap: 1rem; }
@media (min-width: 60rem) { .social { grid-template-columns: 4rem auto auto; grid-template-areas: "avatar screenname screenname" "avatar username username" "content content content" "attachments attachments attachments" "timestamp timestamp credit"; } }
.social p { margin: 0; padding: 0; }
.social a:link, .social a:visited { text-decoration: none; }
.social a:hover { text-decoration: underline; }
.social .avatar { grid-area: avatar; }
.social .avatar.round img { border-radius: 2rem; }
.social .avatar img { height: 4rem; width: 4rem; object-fit: contain; max-width: none; }
.social .screenname { grid-area: screenname; align-self: end; }
.social .username { grid-area: username; align-self: start; }
.social .content { grid-area: content; }
.social .content .content-note::before { content: "Content Note:"; margin-right: 1ch; }
.social .content .content-warning::before { content: "Content Warning:"; margin-right: 1ch; }
.social .content .content-note, .social .content .content-warning { background-color: #b3ada1; padding: 0.5rem; border-radius: 1rem; }
.social .content p { margin-bottom: 1rem; }
.social .content a:link, .social .content a:visited { text-decoration: underline; }
.social ul.attachments { grid-area: attachments; list-style-type: none; padding-left: 0; display: flex; }
.social ul.attachments li { display: inline-block; margin: auto; }
.social .timestamp { grid-area: timestamp; font-size: 0.8rem; }
.social .credit { grid-area: credit; font-size: 0.8rem; text-align: right; }

figure { border-bottom: 1px solid #010; text-align: center; }

figure video, figure img { filter: drop-shadow(0 0.25em 0.5em black); width: 100%; }

figure.comparison img { width: 90%; vertical-align: middle; margin: 0.25rem; }

figure figcaption { font-size: 0.9rem; font-style: italic; }

@media (min-width: 60rem) { figure.comparison img { width: 45%; } }
.minigallery img { width: 25%; }
.minigallery img.bigger { width: 50%; }