@import url(https://fonts.googleapis.com/css?family=Alegreya+Sans:400,500); 

:root, :root[theme="light"] {
  --accent: rgb(193,69,67);
  --background: #ffffff;
  --verylight: #eee;
  --lighttext: #bbb;
  --blockquote: #666;
  --text: #2a2a2a;
  --darktext: #000;
  --emphasis: #836fff;
}
:root .theme-toggle .sun, :root[theme="light"] .theme-toggle .sun, .light .theme-toggle .sun {
    display: none;
}
:root .theme-toggle .moon, :root[theme="light"] .theme-toggle .moon, .light .theme-toggle .moon {
    display: inline-block;
}

@media (prefers-color-scheme: dark) {
    :root:not([theme="light"]) {
    --accent: #e2564c;
    --background: #121212;
 	--verylight: #2a2a2a;
    --lighttext: #444;
    --blockquote: #aaa;
    --text: #dadada;
    --darktext: #eee;
    --emphasis: #836fff;
  }
	:root:not([theme="light"]) .theme-toggle .moon { display: none; }
	:root:not([theme="light"]) .theme-toggle .sun { display: inline-block; }
	:root:not([theme="light"]) body.scrolled nav.post-nav { box-shadow: 0 2px 2px -2px rgba(255,255,255,.2); }
}

:root[theme="dark"] {
    --accent: #e2564c;
    --background: #121212;
 	--verylight: #2a2a2a;
    --lighttext: #444;
    --blockquote: #aaa;
    --text: #dadada;
    --darktext: #eee;
    --emphasis: #836fff;
}

:root[theme="dark"] body.scrolled nav.post-nav { box-shadow: 0 2px 2px -2px rgba(255,255,255,.2); }
:root .theme-toggle .moon, :root[theme="dark"] .theme-toggle .moon, .dark .theme-toggle .sun {
    display: none;
}
:root .theme-toggle .sun, :root[theme="dark"] .theme-toggle .sun, .light .theme-toggle .sun {
    display: inline-block;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Alegreya Sans",Helvetica,Arial,Verdana,serif;
	font-weight: 500;
}
p, li, aside {
	line-height: 1.8;
}
img, video, iframe {
  max-width: 100%;
  height: auto;
}
img.new {
  height: 12px;
  width: 28px;
}
h2 time {
	font-family: "Avenir Next", Avenir, "-apple-system", Helvetica, Arial, sans-serif;
}
.post-body h1, .post-body h2, .post-body h3, .post-body h4, .post-body h5, .post-body h6 {
	margin-top: 1.5em;
}
/* External links */
.post-body a:not([href*='nominal.net']):not([href^='#']):not([href^='/']):after {
    content: " ↗️";
    font-size: 14px;
}

/* Theme Switcher */
svg:not(:root) {
  overflow: hidden;
}
.theme-toggle:hover svg {
	stroke: var(--accent);
}
.theme-toggle {
	cursor: pointer;
	display: flex;
}
.theme-toggle svg {
    width: 1.5em;
    height: 1.5em;
    stroke: var(--text);
    transition: stroke .4s;
}

/* Colors */

body {
	font-size: 18px;
	background-color: var(--background);
	color: var(--text);
}
nav.main-nav {
	background: transparent;
}
.dates {
	color: var(--lighttext);
}
h1, h2, h3, a, #post-meta div span.dark {
	color: var(--darktext);
}
blockquote {
	color: var(--blockquote);
}
input {
	background: var(--background);
	color: var(--text);
}
tr:nth-child(2n+1) > td {
	background: var(--verylight);
}
tr > td {
	border-color: var(--lighttext);
}
thead th, th {
	border-color: var(--lighttext);
	color: var(--darktext);
}
blockquote, #post-meta, #search input.field {
	border-color: var(--verylight);
}
#post-meta img.avatar {
  box-shadow: 0 0 0 3px var(--background), 0 0 0 4px var(--verylight);
}
span.divider, hr {
	background-color: var(--verylight);
	width: 100%;
}
nav.main-nav a, #footer a, #post-nav a, p a, .post-body a, .conversation-on-mb {
	color: var(--darktext);
	box-shadow: none;
	border-bottom: 1px solid var(--accent);
	transition: color .2s,border-color .2s;
}
.photos-grid-container a {
	border-bottom: 0;
}
p a.img {
	border-bottom:0!important;
}
nav.main-nav a:hover, #footer a:hover, #post-nav a:hover, p a:hover, .post-body a:hover, conversation-on-mb:hover {
	box-shadow: none;
	color: var(--accent);
}
i, em {
	color: var(--emphasis);
	font-style: normal;
	font-weight: 500;
}
b,strong {
	color: #20B2AA;
}

::-moz-selection {
    background: #fe57a1;
    color: #fff;
    text-shadow: none;
}

::selection {
    background: #fe57a1;
    color: #fff;
    text-shadow: none;
}
/* Aside */
aside:not(.dates):not(.bigfoot-footnote) {
	padding: 12px 24px;
	margin: 20px 0px 40px;
	border: 2px solid #20B2AA;
	box-shadow: 8px 6px 0 0 #20B2AA;
	color: #20B2AA;
}
aside.accent {
	border-color: var(--accent)!important;
	box-shadow: 8px 6px 0 0 var(--accent)!important;
	color: var(--accent)!important;
}
aside.text {
	border-color: var(--text)!important;
	box-shadow: 8px 6px 0 0 var(--text)!important;
	color: var(--text)!important;
}
aside.em {
	border-color: var(--emphasis)!important;
	box-shadow: 8px 6px 0 0 var(--emphasis)!important;
	color: var(--emphasis)!important;
}
/* Footnotes */
.e-content {
	counter-reset: footnote;
}
.bigfoot-footnote {
	background: var(--background)!important;
	border-color: var(--accent)!important;
	border-radius:0!important;
	box-shadow: 8px 6px 0 0 var(--accent)!important;
}
.bigfoot-footnote__wrapper {
	background: var(--background)!important;
	border-color: var(--accent)!important;
	border-radius:0!important;
}
.bigfoot-footnote__content {
	background: transparent!important;
	padding: 14px!important;
	color: var(--text);
}
.bigfoot-footnote__tooltip {
	background: var(--background)!important;
	border-color: var(--accent)!important;
}
.bigfoot-footnote__button {
	color: var(--background)!important;
	background:var(--accent)!important;
	top: -8px!important;
	border-radius: 100%!important;j
	width: 19px;
	height: 19px;
}
.bigfoot-footnote__button:after {
 	 counter-increment: footnote;
	content: counter(footnote)!important ;
	position: relative;
	top: 2px;
}
.bigfoot-footnote__button.is-active,
.bigfoot-footnote__button:hover {
	background: var(--text)!important;
}
.bigfoot-footnote__button__circle {
	display:none!important;
}
/* Simple Lightbox simplelightbox.com */
.sl-overlay {
	background: var(--background)!important;
	opacity: 1!important;
}
.sl-image img {
	border-radius: 10px!important;
}
.sl-caption {
	background: rgba(0,0,0,0.7)!important;
	border-bottom-right-radius: 10px!important;
	border-bottom-left-radius: 10px!important;
}
.sl-wrapper .sl-counter, .sl-wrapper .sl-close, .sl-wrapper .sl-navigation button {
	color: var(--darktext)!important;
}
/* Layout adjustments from default css */
.profile #wrapper {
	padding: 80px 0 40px;
}
#post-list h2 {
	margin-top: 1em;
}
.microblog_conversation {
	margin-top: 30px;
	border-top: 1px solid var(--verylight);
}
.conversation {
	margin-top: 40px;
	border-top: 1px solid var(--verylight);
}
.conversation-on-mb {
	display: inline-block;
	padding-top: 30px;
}
footer {
	margin-bottom: 60px;
}
blockquote {
	margin-bottom: 15px;
}
input {
  width: 270px;
  height: 34px;
  font-size: 13px;
  font-weight: 400;
  padding-left: 12px;
  border: 2px solid var(--verylight);
  margin-top: 20px;
  border-radius: 17px;
  -webkit-appearance: none;
	background: var(--background);
	color: var(--text);
}
input[type=submit] {
	background: var(--text);
	color: var(--background);
}

/* Nav */
nav.main-nav.post-nav {
	position: fixed;
	width: 100%;
    display: flex;
    justify-content: space-between;
	align-items: center;
	padding: 10px 20px;
	z-index: 12;
}
nav.main-nav a.back {
	font-size: 20px;
}
nav.main-nav.post-nav a {
	margin-left: 0;
	border-bottom: 0!important;
	width: 20px;
}
nav.main-nav h1 {
	visibility:hidden;
}
@media screen and (max-width: 540px) {
  body.scrolled-m nav.post-nav {
    background-color: var(--background);
    border-bottom: 1px solid var(--verylight);
    box-shadow: 0 2px 2px -2px rgba(0,0,0,.2);
  }
  body.scrolled-m nav.post-nav h1 {
  	visibility: visible;
  }
}
body.scrolled nav.post-nav {
  background-color: var(--background);
  border-bottom: 1px solid var(--verylight);
  box-shadow: 0 2px 2px -2px rgba(0,0,0,.2);
}
body.scrolled nav.main-nav h1 {
	visibility: visible;
}
#wrapper nav.main-nav {
	position: inherit;
	display: block;
	text-align: center;
}