/* 
 * Credit to HTML5 Boilerplate v5.0 (main.css 2.0.0) for some styles
 */

/* -----
   Fonts
   ----- */

@font-face {
  font-family: "ISO";
  src: url("/assets/fonts/ISOv0.7-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ISO";
  src: url("/assets/fonts/ISOv0.7-RegularItalic.woff2") format("woff2");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "ISO";
  src: url("/assets/fonts/ISOv0.7-Bold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* ----------------
   Generic elements
   ---------------- */

:root {
  color-scheme: light dark; /* Tells browsers the site supports light and dark modes */
  /* See media query section for dark mode styles */
}

html {
  --obs-black:            hsl(0, 0%, 13%);

  --background-color:     hsl(0, 0%, 100%);
  --text-color:           hsl(0, 0%, 13%);
  --text-color-lighter:   hsl(0, 0%, 58%);
  --button-color:         hsl(0, 0%, 13%);
  --button-text-color:    hsl(0, 0%, 100%);
  
  --accent-color:         hsl(87, 47%, 52%);
  --accent-color-hue:     87;
  --accent-color-sat:     47%;
  --accent-color-lness:   52%;

  --border-radius: 0.235rem;
  --spacing-unit: 1.875rem;
  --max-width: 640px;

  --obs-icon: url("data:image/svg+xml;utf8,<svg width='48px' height='48px' xmlns='http://www.w3.org/2000/svg'><g fill-rule='nonzero' fill='hsl(0, 0%, 13%)'><path d='M30.666 24c0-3.608-2.984-6.533-6.666-6.533-3.682 0-6.666 2.925-6.666 6.533 0 3.608 2.984 6.533 6.666 6.533 3.68-.005 6.66-2.927 6.666-6.533zM24 27.653c-2.059 0-3.727-1.636-3.727-3.653 0-2.017 1.668-3.653 3.727-3.653s3.727 1.636 3.727 3.653c-.002 2.016-1.67 3.65-3.727 3.653zM24 15.22c.812 0 1.47-.644 1.47-1.44V9.323c2.154-.706 3.468-2.839 3.103-5.036C28.208 2.088 26.272.474 24 .474c-2.272 0-4.208 1.614-4.573 3.812-.365 2.197.95 4.33 3.104 5.036v4.459c0 .795.657 1.44 1.469 1.44zm0-11.86c.936 0 1.695.744 1.695 1.66 0 .918-.759 1.662-1.695 1.662s-1.695-.744-1.695-1.661S23.064 3.36 24 3.36zM25.47 38.678V34.22c0-.795-.658-1.44-1.47-1.44-.812 0-1.47.645-1.47 1.44v4.46c-2.154.705-3.468 2.838-3.103 5.035.365 2.198 2.301 3.812 4.573 3.812 2.272 0 4.208-1.614 4.573-3.812.365-2.197-.95-4.33-3.104-5.036zM24 44.64c-.936 0-1.695-.744-1.695-1.66 0-.918.759-1.662 1.695-1.662s1.695.744 1.695 1.661S24.936 44.64 24 44.64zM37.714 15.115c2.071.002 3.892-1.344 4.46-3.296.567-1.952-.256-4.036-2.017-5.105a4.707 4.707 0 0 0-5.561.505A4.477 4.477 0 0 0 33.57 12.6l-3.218 3.154c-.393.359-.555.9-.422 1.41.133.51.54.908 1.06 1.038s1.072-.028 1.438-.413l3.218-3.154c.642.315 1.35.479 2.067.48zm-1.2-5.712a1.72 1.72 0 0 1 1.847-.36 1.66 1.66 0 0 1 1.047 1.534 1.66 1.66 0 0 1-1.047 1.534 1.72 1.72 0 0 1-1.847-.36 1.64 1.64 0 0 1-.505-1.171 1.64 1.64 0 0 1 .49-1.177h.015zM17.667 30.206a1.49 1.49 0 0 0-2.077 0l-3.223 3.154a4.71 4.71 0 0 0-5.338.85 4.474 4.474 0 0 0-.336 6.059c1.483 1.807 4.118 2.228 6.11.976 1.993-1.252 2.703-3.774 1.646-5.85l3.218-3.153a1.42 1.42 0 0 0 0-2.036zm-6.167 8.39a1.717 1.717 0 0 1-1.66.479c-.6-.15-1.07-.61-1.222-1.199a1.64 1.64 0 0 1 .487-1.626 1.72 1.72 0 0 1 2.353.041c.645.632.664 1.651.042 2.306zM35.628 33.36l-3.218-3.154a1.491 1.491 0 0 0-2.04.036 1.42 1.42 0 0 0-.037 2l3.218 3.153a4.478 4.478 0 0 0 .867 5.232c1.672 1.644 4.339 1.788 6.184.334a4.48 4.48 0 0 0 .998-5.991c-1.279-1.953-3.854-2.648-5.972-1.61zm3.262 5.232a1.72 1.72 0 0 1-1.847.361 1.66 1.66 0 0 1-1.047-1.535 1.66 1.66 0 0 1 1.047-1.534 1.72 1.72 0 0 1 1.847.36c.32.312.5.735.5 1.176.001.441-.177.865-.495 1.177l-.005-.005zM13.582 7.368C11.91 5.726 9.245 5.583 7.4 7.035a4.48 4.48 0 0 0-1 5.988c1.276 1.954 3.849 2.65 5.967 1.617l3.218 3.154a1.491 1.491 0 0 0 2.041-.036 1.42 1.42 0 0 0 .036-2l-3.213-3.153a4.464 4.464 0 0 0-.867-5.237zM9.11 11.75a1.637 1.637 0 0 1-.368-1.81c.262-.62.88-1.026 1.566-1.026.685 0 1.303.405 1.566 1.026.262.621.116 1.336-.369 1.81a1.697 1.697 0 0 1-1.2.495c-.451 0-.884-.179-1.2-.495h.005zM43.367 19.46c-1.998-.005-3.774 1.244-4.409 3.1h-4.53c-.812 0-1.47.645-1.47 1.44 0 .795.658 1.44 1.47 1.44h4.55c.752 2.193 3.067 3.48 5.373 2.987 2.307-.493 3.865-2.607 3.617-4.908-.247-2.3-2.221-4.05-4.582-4.06h-.02zm0 6.2c-.936 0-1.695-.743-1.695-1.66 0-.917.759-1.66 1.695-1.66.935 0 1.694.743 1.694 1.66 0 .917-.759 1.66-1.694 1.66zM0 24c-.006 2.229 1.64 4.132 3.885 4.49 2.244.358 4.422-.935 5.137-3.05h4.55c.812 0 1.47-.645 1.47-1.44 0-.795-.658-1.44-1.47-1.44h-4.55c-.715-2.115-2.893-3.408-5.137-3.05C1.64 19.868-.006 21.771 0 24zm6.328 0c0 .917-.759 1.66-1.695 1.66-.935 0-1.694-.743-1.694-1.66 0-.917.759-1.66 1.694-1.66.935.002 1.69.745 1.69 1.66h.005z'/><path d='M24.612 22.56h-1.224c-.812 0-1.47.645-1.47 1.44 0 .795.658 1.44 1.47 1.44h1.224c.812 0 1.47-.645 1.47-1.44 0-.795-.658-1.44-1.47-1.44z'/></g></svg>");
  --star-icon: url("data:image/svg+xml;utf8,<svg width='10' height='10' xmlns='http://www.w3.org/2000/svg'><path d='M4.766 9.824a.243.243 0 0 0 .468 0c.871-3.032 1.558-3.719 4.59-4.59a.243.243 0 0 0 0-.468c-3.032-.871-3.719-1.558-4.59-4.59a.244.244 0 0 0-.468 0c-.871 3.032-1.558 3.719-4.59 4.59a.243.243 0 0 0 0 .468c3.032.871 3.719 1.558 4.59 4.59z' fill='hsl(0, 0%, 13%)' fill-rule='nonzero'/></svg>");

  font-size: 1em; /* rem calculations assume 16px browser default */
}

body {
  font-family: "ISO", "Monaco", "Courier", "Courier New", monospace;
  font-size: 1.0625em; /* 17px when browser default is 16px; split out from html font-size so that rem units can refer to the typical 16px browser default, making calculations more elegant */
  line-height: 1.35em;
  margin: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 5.333);
  background: var(--background-color);
  color: var(--text-color);
}

body.obs {
  animation: pageStart 0.25s; /* Animate only on observations home */
}

a {
  color: inherit;
  text-decoration: none;
}

/* For accessibility */
a:focus {
  outline: 0.25rem solid var(--accent-color);
  outline-offset: 0.25rem;
}

a:hover {
  text-decoration: underline;
}

small {
  font-size: 0.88em;
  color: var(--text-color-lighter);
}

mark {
  background-color: var(--accent-color);
  padding: 0.25rem;
  border-radius: var(--border-radius);
  color: var(--obs-black);
}

blockquote {
  position: relative;
  margin: 0 0 0 1.3em;
}

blockquote:before {
  content: ""; /* Required in order for element to display */
  display: block;
  height: 100%;
  width: 0.125rem;
  position: absolute;
  background: var(--text-color); /* Equivalent of a border-color style, so should be same as text color */
  border-radius: 0.0625rem;
  left: -1.2em;
}

hr {
  display: block;
  height: 1px; /* px value is okay because it's just a nonzero value in order for the border to render */
  border: 0;
  border-top: 0.0625rem solid var(--text-color);
  opacity: 0.3;
  margin: 1.5em 0;
  padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

textarea {
  resize: vertical;
}

th, td {
  padding-right: 1em;
}

/* -------------
   Header styles
   ------------- */

header#site-header {
  position: relative;
}

header#site-header h1 {
  text-transform: uppercase;
  font-weight: normal;
  font-size: 2.375rem;
}

header#site-header h1 a {
  text-decoration: none;
}

header#site-header a.site-logo-link {
  position: absolute;
  left: -4.875rem;
  top: -0.9375rem;
}

header#site-header svg.site-logo {
  animation: rotate 30s linear infinite;
}

header#site-header section#site-subtitle {
  margin-top: var(--spacing-unit);
  margin-bottom: -1em;
}

header#site-header section#site-subtitle p {
  float: left;
  margin: 0 calc(var(--spacing-unit) * 2) 1em 0;
}

header#site-header section#site-subtitle a {
  text-decoration: underline;
}

header#site-header a.subscribe-button {
  text-decoration: none;
}

header#site-header a.subscribe-button:hover span {
  text-decoration: underline;
}

header#site-header a.subscribe-button span {
  animation-name: colorScroll;
  animation-duration: 4.572s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(1,end);
}

header#site-header a.subscribe-button span:nth-of-type(7n+2) {
  animation-delay: 0.143s;
}

header#site-header a.subscribe-button span:nth-of-type(7n+3) {
  animation-delay: 0.286s;
}

header#site-header a.subscribe-button span:nth-of-type(7n+4) {
  animation-delay: 0.429s;
}

header#site-header a.subscribe-button span:nth-of-type(7n+5) {
  animation-delay: 0.571s;
}

header#site-header a.subscribe-button span:nth-of-type(7n+6) {
  animation-delay: 0.714s;
}

header#site-header a.subscribe-button span:nth-of-type(7n+7) {
  animation-delay: 0.857s;
}

header#site-header a.subscribe-button span:nth-of-type(7n+8) {
  animation-delay: 1.000s;
}

header#site-header a.subscribe-button span:nth-of-type(7n+9) {
  animation-delay: 1.143s;
}

/* -------------------
   Main section styles
   ------------------- */

main#site-content {
  margin-top: calc(var(--spacing-unit) * 3);
}

header#page-header {
  margin-bottom: calc(var(--spacing-unit) * 2);
}

header#page-header h1 {
  font-size: 1.4em;
  line-height: 1.35em;
}

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

article.post {
  position: relative; /* For children's absolute positioning */
  margin-bottom: calc(var(--spacing-unit) * 2);
}

article.post header h1 {
  text-transform: uppercase;
  font-size: 1.1875rem;
  font-weight: normal;
  display: inline-block;
  margin: 0;
}

article.post header h1:after {
  content: ""; /* Required in order for element to display */
  display: block;
  width: 100%;
  height: 0.125rem;
  margin: 0.25rem 0;
  background: var(--text-color); /* Equivalent of a border-color style, so should be same as text color */
  border-radius: 0.0625rem;
}

article.post header h1 a {
  text-decoration: none;
}

article.post h2 {
	font-size: 1.4em;
	line-height: 1.35em;
}

article.post h3 {
	font-size: 1em;
	text-transform: uppercase;
}

section.post-content {
  margin: calc(var(--spacing-unit) / 2) 0;
  width: 75%;
  max-width: var(--max-width);
  text-align: justify;
}

section.post-content a {
  text-decoration: underline;
}

/* The special link styles! */

section.post-content .pol, section.post-content .prose, section.post-content .music {
  text-decoration: none;
  border-radius: var(--border-radius);
  padding: 0.1em;
}

section.post-content .pol {
  background: hsla(30, 90%, 60%, 0.65);
}

section.post-content .prose {
  background: hsla(200, 90%, 60%, 0.65);
}

section.post-content .music {
  background: hsla(340, 90%, 60%, 0.65);
}

section.post-content ul, section.post-content ol {
  margin: 0;
  padding-inline-start: 1.5625rem;
}

section.post-content ul {
  list-style-image: var(--star-icon);
}

/* The 'div > ul' selector here is for the 'Archive' page search results */
section.post-content > ul, section.post-content div > ul {
  padding: 0;
}

section.post-content li {
  margin: 1em 0;
  padding: 0;
}

aside.post-aside {
  position: absolute;
  top: calc(var(--spacing-unit) * 1.5);
  right: 0;
  padding-left: calc(var(--spacing-unit) * 2);
  box-sizing: border-box;
  width: 25%;
  min-width: calc(100% - var(--max-width));
  transform: rotate(2deg);
}

article.post:nth-child(even) aside.post-aside {
  transform: rotate(-2deg); /* Rotate post asides for even posts */
}

aside.post-aside:hover {
  z-index: 999; /* In case they are overlapping due to absolute positioning */
}

aside.post-aside img {
  width: calc(var(--max-width) / 2);
  max-width: 100%;
  display: block;
  margin: -50% auto 0;
  border-radius: var(--border-radius);
}

aside.post-aside p {
  width: calc(var(--max-width) / 2);
  max-width: 100%;
  margin: 0.5em auto;
}

/* -------------
   Footer styles
   ------------- */

footer#site-footer {
  margin-top: calc(var(--spacing-unit) * 2);
  font-size: 0.88em;
  color: var(--text-color-lighter);
}

footer#site-footer img {
  display: block;
  margin: 0.4em 0 0;
  width: 1.5rem;
}

footer#site-footer p {
	margin-top: 0;
	margin-bottom: 0;
}

footer#site-footer nav a:not(:last-of-type):after {
  content: "•";
  margin-left: 0.5em;
  display: inline-block;
}

/* -----------
   Form styles
   ----------- */

input[type="text"], input[type="email"] {
  background-color: var(--background-color);
	border: 0.125rem solid var(--button-color);
	border-radius: var(--border-radius);
	padding: 0.6em 0.7em 0.5em;
  line-height: 1.35rem;
  color: var(--text-color);
}

input[type="submit"], button[type="submit"] {
	background-color: var(--button-color);
	color: var(--button-text-color);
	border: 0.125rem solid var(--button-color);
	border-radius: var(--border-radius);
	padding: 0.6em 0.7em 0.5em;
  line-height: 1.35rem;
  cursor: pointer;
}

input[type="submit"]:active, button[type="submit"]:active {
  transform: translateY(0.0625rem);
}

/* ----------------
   Reusable classes
   ---------------- */

.inline-logo {
  /*margin-left: 1.4em;
  margin-right: 1.4em;*/
  position: relative;
  top: 0.09em;
  display: inline-block;
  width: 0.888em;
  height: 0.888em;
  background-size: 0.888em 0.888em;
  background-image: var(--obs-icon);
}

.arrow {
  font-family: monospace;
  font-size: 1.2em;
}

/* ---------------
   Pseudo elements
   --------------- */

::-moz-selection {
  background: var(--text-color);
  color: var(--background-color);
  text-shadow: none;
}

::selection {
  background: var(--text-color);
  color: var(--background-color);
  text-shadow: none;
}

/* ----------
   Animations
   ---------- */

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes pageStart {
  0% { transform: scaleX(0.95) translateY(10vh); opacity: 0; }
  100% { transform: scaleX(1) translateY(0); opacity: 1; }
}

@keyframes fadeIn {
	0% { opacity: 0; cursor: default; }
	100% { opacity: 1; cursor: pointer; }
}

@keyframes colorScroll {
    0% { color: var(--accent-color); }
    5% { color: hsl(var(--accent-color-hue), var(--accent-color-sat), calc(var(--accent-color-lness) * (1 + (1 * 0.12)))); }
   10% { color: hsl(var(--accent-color-hue), var(--accent-color-sat), calc(var(--accent-color-lness) * (1 + (2 * 0.12)))); }
   15% { color: hsl(var(--accent-color-hue), var(--accent-color-sat), calc(var(--accent-color-lness) * (1 + (3 * 0.12)))); }
   20% { color: hsl(var(--accent-color-hue), var(--accent-color-sat), calc(var(--accent-color-lness) * (1 + (4 * 0.12)))); }
   25% { color: hsl(var(--accent-color-hue), var(--accent-color-sat), calc(var(--accent-color-lness) * (1 + (5 * 0.12)))); }
   30% { color: var(--text-color); }
  100% { color: var(--text-color); }
}

/* ------------------
   Media query styles
   ------------------ */

@media (prefers-color-scheme: dark) {
  html {
    --background-color:     hsl(0, 0%, 9%);
    --text-color:           hsl(0, 0%, 95%);
    --text-color-lighter:   hsl(0, 0%, 44%);
    --button-color:         hsl(0, 0%, 17%);
    --button-text-color:    hsl(0, 0%, 95%);

    --obs-icon: url("data:image/svg+xml;utf8,<svg width='48px' height='48px' xmlns='http://www.w3.org/2000/svg'><g fill-rule='nonzero' fill='hsl(0, 0%, 87%)'><path d='M30.666 24c0-3.608-2.984-6.533-6.666-6.533-3.682 0-6.666 2.925-6.666 6.533 0 3.608 2.984 6.533 6.666 6.533 3.68-.005 6.66-2.927 6.666-6.533zM24 27.653c-2.059 0-3.727-1.636-3.727-3.653 0-2.017 1.668-3.653 3.727-3.653s3.727 1.636 3.727 3.653c-.002 2.016-1.67 3.65-3.727 3.653zM24 15.22c.812 0 1.47-.644 1.47-1.44V9.323c2.154-.706 3.468-2.839 3.103-5.036C28.208 2.088 26.272.474 24 .474c-2.272 0-4.208 1.614-4.573 3.812-.365 2.197.95 4.33 3.104 5.036v4.459c0 .795.657 1.44 1.469 1.44zm0-11.86c.936 0 1.695.744 1.695 1.66 0 .918-.759 1.662-1.695 1.662s-1.695-.744-1.695-1.661S23.064 3.36 24 3.36zM25.47 38.678V34.22c0-.795-.658-1.44-1.47-1.44-.812 0-1.47.645-1.47 1.44v4.46c-2.154.705-3.468 2.838-3.103 5.035.365 2.198 2.301 3.812 4.573 3.812 2.272 0 4.208-1.614 4.573-3.812.365-2.197-.95-4.33-3.104-5.036zM24 44.64c-.936 0-1.695-.744-1.695-1.66 0-.918.759-1.662 1.695-1.662s1.695.744 1.695 1.661S24.936 44.64 24 44.64zM37.714 15.115c2.071.002 3.892-1.344 4.46-3.296.567-1.952-.256-4.036-2.017-5.105a4.707 4.707 0 0 0-5.561.505A4.477 4.477 0 0 0 33.57 12.6l-3.218 3.154c-.393.359-.555.9-.422 1.41.133.51.54.908 1.06 1.038s1.072-.028 1.438-.413l3.218-3.154c.642.315 1.35.479 2.067.48zm-1.2-5.712a1.72 1.72 0 0 1 1.847-.36 1.66 1.66 0 0 1 1.047 1.534 1.66 1.66 0 0 1-1.047 1.534 1.72 1.72 0 0 1-1.847-.36 1.64 1.64 0 0 1-.505-1.171 1.64 1.64 0 0 1 .49-1.177h.015zM17.667 30.206a1.49 1.49 0 0 0-2.077 0l-3.223 3.154a4.71 4.71 0 0 0-5.338.85 4.474 4.474 0 0 0-.336 6.059c1.483 1.807 4.118 2.228 6.11.976 1.993-1.252 2.703-3.774 1.646-5.85l3.218-3.153a1.42 1.42 0 0 0 0-2.036zm-6.167 8.39a1.717 1.717 0 0 1-1.66.479c-.6-.15-1.07-.61-1.222-1.199a1.64 1.64 0 0 1 .487-1.626 1.72 1.72 0 0 1 2.353.041c.645.632.664 1.651.042 2.306zM35.628 33.36l-3.218-3.154a1.491 1.491 0 0 0-2.04.036 1.42 1.42 0 0 0-.037 2l3.218 3.153a4.478 4.478 0 0 0 .867 5.232c1.672 1.644 4.339 1.788 6.184.334a4.48 4.48 0 0 0 .998-5.991c-1.279-1.953-3.854-2.648-5.972-1.61zm3.262 5.232a1.72 1.72 0 0 1-1.847.361 1.66 1.66 0 0 1-1.047-1.535 1.66 1.66 0 0 1 1.047-1.534 1.72 1.72 0 0 1 1.847.36c.32.312.5.735.5 1.176.001.441-.177.865-.495 1.177l-.005-.005zM13.582 7.368C11.91 5.726 9.245 5.583 7.4 7.035a4.48 4.48 0 0 0-1 5.988c1.276 1.954 3.849 2.65 5.967 1.617l3.218 3.154a1.491 1.491 0 0 0 2.041-.036 1.42 1.42 0 0 0 .036-2l-3.213-3.153a4.464 4.464 0 0 0-.867-5.237zM9.11 11.75a1.637 1.637 0 0 1-.368-1.81c.262-.62.88-1.026 1.566-1.026.685 0 1.303.405 1.566 1.026.262.621.116 1.336-.369 1.81a1.697 1.697 0 0 1-1.2.495c-.451 0-.884-.179-1.2-.495h.005zM43.367 19.46c-1.998-.005-3.774 1.244-4.409 3.1h-4.53c-.812 0-1.47.645-1.47 1.44 0 .795.658 1.44 1.47 1.44h4.55c.752 2.193 3.067 3.48 5.373 2.987 2.307-.493 3.865-2.607 3.617-4.908-.247-2.3-2.221-4.05-4.582-4.06h-.02zm0 6.2c-.936 0-1.695-.743-1.695-1.66 0-.917.759-1.66 1.695-1.66.935 0 1.694.743 1.694 1.66 0 .917-.759 1.66-1.694 1.66zM0 24c-.006 2.229 1.64 4.132 3.885 4.49 2.244.358 4.422-.935 5.137-3.05h4.55c.812 0 1.47-.645 1.47-1.44 0-.795-.658-1.44-1.47-1.44h-4.55c-.715-2.115-2.893-3.408-5.137-3.05C1.64 19.868-.006 21.771 0 24zm6.328 0c0 .917-.759 1.66-1.695 1.66-.935 0-1.694-.743-1.694-1.66 0-.917.759-1.66 1.694-1.66.935.002 1.69.745 1.69 1.66h.005z'/><path d='M24.612 22.56h-1.224c-.812 0-1.47.645-1.47 1.44 0 .795.658 1.44 1.47 1.44h1.224c.812 0 1.47-.645 1.47-1.44 0-.795-.658-1.44-1.47-1.44z'/></g></svg>");
    --star-icon: url("data:image/svg+xml;utf8,<svg width='10' height='10' xmlns='http://www.w3.org/2000/svg'><path d='M4.766 9.824a.243.243 0 0 0 .468 0c.871-3.032 1.558-3.719 4.59-4.59a.243.243 0 0 0 0-.468c-3.032-.871-3.719-1.558-4.59-4.59a.244.244 0 0 0-.468 0c-.871 3.032-1.558 3.719-4.59 4.59a.243.243 0 0 0 0 .468c3.032.871 3.719 1.558 4.59 4.59z' fill='hsl(0, 0%, 87%)' fill-rule='nonzero'/></svg>");
  }
}

@media only screen and (max-width: 960px) {
  section.post-content {
    width: 100%;
  }

  aside.post-aside {
    position: static;
    margin: calc(var(--spacing-unit) / 2) 0;
    width: 100%;
    padding-left: 0;
  }

  aside.post-aside, article.post:nth-child(even) aside.post-aside {
    transform: none;
  }

  aside.post-aside img, aside.post-aside p {
    width: calc(var(--max-width) / 2);
    max-width: 100%;
    margin: 0.5em 0;
  }
}

@media only screen and (max-width: 800px) {
  body {
    margin: calc(var(--spacing-unit) * 2);
  }

  header#site-header a.site-logo-link {
    position: static;
  }

  main#site-content {
    margin-top: calc(var(--spacing-unit) * 2);
  }
}

@media only screen and (max-width: 460px) {
  body {
    margin: calc(var(--spacing-unit) * 2) var(--spacing-unit);
  }

  section.post-content {
  	text-align: left;
  }

  input[type="text"], input[type="email"] {
  	display: block;
  	margin: 0.5em 0;
  	width: 100%;
  	box-sizing: border-box;
  }

  input[type="submit"], button[type="submit"] {
  	display: block;
  	width: 100%;
  	box-sizing: border-box;
  }
}

/* --------------------------------
   HTML5 Boilerplate helper classes
   -------------------------------- */

/*
 * Hide visually and from screen readers
 */

.hidden {
  display: none !important;
}

/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
*  causes content to wrap 1 word per line:
*  https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
* Extends the .sr-only class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/

.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
* Hide visually and from screen readers, but maintain layout
*/

.invisible {
  visibility: hidden;
}

/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
*  contenteditable attribute is included anywhere else in the document.
*  Otherwise it causes space to appear at the top and bottom of elements
*  that receive the clearfix class.
* 2. The use of table rather than block is only necessary if using
*  :before to contain the top-margins of child elements.
*/

.clearfix:before,
.clearfix:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.clearfix:after {
  clear: both;
}

/* ------------------------------
   HTML5 Boilerplate print styles
   ------------------------------ */

/* 
 * Inlined to avoid the additional HTTP request:
 * https://www.phpied.com/delay-loading-your-print-css/
 */

@media print {
  *,
  *:before,
  *:after {
  background: transparent !important;
  color: #000 !important;
  /* Black prints faster */
  box-shadow: none !important;
  text-shadow: none !important;
  }
  a,
  a:visited {
  text-decoration: underline;
  }
  a[href]:after {
  content: " (" attr(href) ")";
  }
  abbr[title]:after {
  content: " (" attr(title) ")";
  }
  /*
   * Don't show links that are fragment identifiers,
   * or use the javascript: pseudo protocol
   */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
  content: "";
  }
  pre {
  white-space: pre-wrap !important;
  }
  pre,
  blockquote {
  border: 1px solid #999;
  page-break-inside: avoid;
  }
  /*
   * Printing Tables:
   * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
   */
  thead {
  display: table-header-group;
  }
  tr,
  img {
  page-break-inside: avoid;
  }
  p,
  h2,
  h3 {
  orphans: 3;
  widows: 3;
  }
  h2,
  h3 {
  page-break-after: avoid;
  }

  /* -------------------
     Custom print styles
     ------------------- */

  body {
    margin: 30px 90px 60px 60px;
    font-size: 14px;
  }

  header#site-header a.site-logo-link {
    position: static;
  }

  main#site-content {
    margin-top: 60px;
  }

  section.post-content {
    width: 100%;
    max-width: 100%;
    text-align: left;
  }

  article.post header h1 {
    text-decoration: underline;
  }

  article.post header h1:after {
    display: none;
  }

  section.post-content ul {
    list-style-type: disc;
  }

  aside.post-aside {
    position: static;
    margin: 15px 0;
    width: 100%;
    padding-left: 0;
  }

  aside.post-aside, article.post:nth-child(even) aside.post-aside {
    transform: none;
  }

  aside.post-aside img, aside.post-aside p {
    width: 320px;
    max-width: 100%;
    margin: 0.5em 0;
  }
}