@font-face {
  font-family: "optica-icons";
  src: url("data:application/x-font-woff;charset=utf-8;base64,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") format("woff");
}

:root {
  --aside-width: 280px;
  --post-width: 530px;
  --post-margin: 15px;
  --post-padding: 15px;
  --sidebar-padding: 15px;

  --title: rgb(var(--rgbtitle));
  --accent: rgb(var(--rgbaccent));

  --title-10percent: rgba(var(--rgbtitle), 0.1);
}

/* Global */

* {
  max-width: 100%;
}

a {
  text-decoration: none;
}

pre {
  overflow-x: scroll;
}

iframe {
  display: block;
}

/* Overall layout */

body {
  font-size: 14px;
  background-color: var(--background);
  background-image: linear-gradient(var(--title-10percent), var(--title-10percent));
  background-position: center;
  background-size: cover;
  background-attachment: fixed;

  color: var(--title);
  font-family: var(--font-family);
}

#base-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  margin: auto;
}

aside {
	position: sticky;
	top: 0;
	width: var(--aside-width);
  margin-left: var(--post-margin);
  padding-bottom: var(--post-margin);
}

body.tmblr-iframe-pushdown aside {
  top: 54px;
}

@media (max-width: /* (--aside-width * 2) + --post-width + (--post-margin * 4) = */ 1150px) {
	aside:empty {
		display: none;
	}
}

@media (max-width: /* --aside-width + --post-width + (--post-margin * 3) = */ 850px) {
  #base-container {
    flex-direction: column;
    align-items: center;
  }
  aside {
    position: static;
    width: var(--post-width);
    margin-left: 0;
    padding-bottom: 0;
  }
  #widget {
    display: none;
  }
}

main {
	min-width: 250px;
	width: var(--post-width);
	margin: 0 var(--post-margin);
  padding-bottom: var(--post-margin);
}

main > h3 {
  text-align: center;
  text-shadow: 0 0 1px var(--background);
  margin: 0;
  margin-top: var(--post-margin);
}

/* Blog Card */

#blog-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  background-color: var(--background);
  padding-bottom: var(--sidebar-padding);
  margin-top: var(--post-margin);
  border-radius: 3px;
  overflow: hidden;
}

#search {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  height: 1em;
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
  margin: var(--sidebar-padding) 0;
  padding: 0 var(--sidebar-padding);
}

#search:not(.search-enabled),
body.tmblr-iframe-pushdown #search {
  visibility: hidden;
}

#search::before {
  content: "\EA0B";
  font-family: "optica-icons";
}

#search input,
#search input::placeholder {
  color: var(--title);
}

#search input {
  flex-grow: 1;
  background: none;
  border: none;
  margin-left: 1ch;
}

#search input:focus {
  outline: none;
}

#header {
  display: block;
  width: 100%;
}

#header.stretch {
  height: 140px;
  object-fit: cover;
  margin-top: calc(-1em - (var(--sidebar-padding) * 2));
}

#header.no-stretch {
  height: calc(140px - 1em - (var(--sidebar-padding) * 2));
  object-fit: contain;
}

#avatar {
  height: 64px;
  width: 64px;
  background-color: var(--background);
  border: 5px solid var(--background);
}

#avatar.circle {
  border-radius: 64px;
}
#avatar.square {
  border-radius: 6px;
}

#header + #avatar {
  margin-top: -55px;
}

#title {
  color: var(--title);
  font-family: var(--title-font);
  font-weight: var(--title-font-weight);
  font-size: 20px;
  padding: 0 var(--sidebar-padding);
  margin-top: 12px;
  margin-bottom: 0;
}

#avatar + #title {
  margin-top: 7px;
}

#description {
  font-size: 12px;
  line-height: 16px;
  word-wrap: break-word;
  padding: 0 var(--sidebar-padding);
  margin-top: 8px;
}

#title:empty,
#description:empty {
  display: none;
}

#description p {
  margin: 0;
}

#top-photos {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;
  height: 80px;
  overflow-y: hidden;
  padding: 0 5px;
  margin-top: var(--sidebar-padding);
}

#top-photos a {
  height: 80px;
  width: 80px;
  border-radius: 3px;
  overflow: hidden;
  margin: 0 5px;
}

#top-photos a img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/* Navigation */

nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 var(--sidebar-padding);
  margin-top: var(--sidebar-padding);
}

nav a {
  font-weight: bold;
  word-wrap: break-word;
  margin: 0.5ch 1ch;
}

/* Pagination */

#pagination {
  text-align: center;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--post-margin);
}

#page-number {
  text-shadow: 0 0 1px var(--background);
}

#previous-link, #next-link {
  padding: 1ch;
  line-height: 1;
  color: var(--background);
  background-color: var(--accent);
  border-radius: 3px;
}

#previous-link:not(:link),
#next-link:not(:link) {
  visibility: hidden;
}

#previous-link {
  margin-right: 1ch;
}

#next-link {
  margin-left: 1ch;
}

#previous-link::before, #next-link::after {
  font-family: "optica-icons";
  content: "\EA01";
  display: inline-block;
}

#previous-link::before {
  margin-right: 5px;
  transform: rotate(180deg);
}

#next-link::after {
  margin-left: 5px;
}

/* === */

blockquote,
li.note .answer_content {
  padding-left: 1em;
  margin: 1em 0;
  border-left: 3px solid;
}
#widget {
  margin-top: 15px;
}
article {
  word-wrap: break-word;
  padding: 15px;
  margin-top: var(--post-margin);
  border-radius: 3px;
}
article header {
  margin-bottom: 1em;
}
article header a {
  white-space: nowrap;
}
.reblog-icon::before {
  content: "\EA09";
  font-size: 1.5em;
  font-weight: normal;
  font-family: "optica-icons";
  line-height: 1rem;
  vertical-align: text-bottom;
}
.published::before {
  content: "submitted by";
}
.sourcelogo {
  display: inline-block;
  float: right;
  margin: 0 0 0 1em;
}
.timestamp {
  display: block;
  font-size: 12px;
  margin-top: 5px;
}

article section.media:first-child {
  margin-top: -15px;
}
article section.media:last-child {
  margin-bottom: -15px;
}

.tmblr-lightbox .lightbox-image {
  max-width: none;
}
article.quote section.media,
article.chat section.media {
  line-height: 1.5;
}
article.quote section.body,
article.chat section.body {
  display: none;
}
article.photo section.media img {
  margin: auto;
}
iframe.tumblr_audio_player {
  max-height: 85px;
}
.ask-item {
  margin: 1em 0;
  display: grid;
  grid-template-columns: auto 40px;
  grid-column-gap: 1em;
}
.ask-item > * {
  border-radius: 3px;
}
.ask-item > div {
  padding: 15px 15px 0;
}
.ask-item .user a {
  font-weight: bolder;
}
.ask-item > div > blockquote {
  border: none;
  padding: 0;
}

article figure {
  margin: 0 0 4px;
}
figure img {
  display: block;
  height: auto;
}
figure.tmblr-full img {
  width: 100%;
}
article.post div.npf_row {
  margin-left: 0;
  margin-right: 0;
}

section.body {
  line-height: 1.5;
}
section.body .reblog .user {
  margin: 10px 0;
}
section.body .reblog .user + * {
  margin-top: 10px;
}
section.body .reblog .user .avatar {
  height: 25px;
  vertical-align: middle;
  border-radius: 2px;
}
section.body .reblog .user .username {
  font-size: 13px;
  vertical-align: middle;
}
section.body .reblog:hover .user .username.deactivated::after {
  content: "deactivated";
  opacity: 0.5;
  margin-left: 1ch;
}
section.body .reblog + .reblog {
  border-top: 1px solid;
}
section.body .reblog + .original {
  display: none;
}

.tmblr-attribution {
  margin-top: 0;
}
article footer, section.controls {
  margin-top: 1em;
}
section.tags a.tag {
  margin-right: 0.5em;
  font-weight: normal;
}
section.tags a.tag::before {
  content: "#";
}
#notes {
  width: 500px;
  max-height: 700px;
  margin-top: 1em;
  overflow-x: hidden;
  overflow-y: auto;
}
ol.notes {
  display: flex;
  flex-direction: column-reverse;
  padding: 0; margin: 0;
  list-style-type: none;
}
li.note {
  flex: none;
  padding: 5px 0;
}
li.note:not(.more_notes_link_container) {
  max-width: 465px;
}
li.note blockquote a {
  font-weight: normal;
  color: inherit;
}
li.note .avatar_frame {
  display: inline-block;
  width: 16px;
  position: relative;
  top: 3px;
  margin-right: 1ch;
}
li.note .avatar {
  border-radius: 2px;
}
li.note blockquote,
li.note .answer_content {
  margin: 10px 31px 5px;
}
li.note .answer_content {
  display: block;
  padding-left: 1em;
}
li.note .retags {
  margin-left: 26px;
  margin-bottom: 0;
}
.controls .like_button,
.controls .reblog_button {
  float: right;
  margin-left: 12px;
}
.controls .like_button iframe,
.controls .reblog_button svg {
  opacity: 0.000000001;
  z-index: 1;
}
.controls .like_button::before,
.controls .reblog_button::before {
  font-family: "optica-icons";
  font-size: 24px;
  font-weight: normal;
  position: absolute;
  margin: -5px 0 0 -3px;
}
.controls .reblog_button::before {
  content: "\EA08";
}
.controls .reblog_button:visited::before {
  color: #00cf35;
}
.controls .like_button::before {
  content: "\EA04";
}
.controls .like_button.liked::before {
  content: "\EA05";
  color: #ff492f;
}

/* Credit link */

#credit {
  position: fixed;
  right: 5px;
  bottom: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 1ch;
  border-radius: calc(1em + 2ch);
}

#credit:hover {
  background-color: var(--background);
}

#credit span {
  font-weight: bold;
  margin-left: 0.5ch;
  margin-right: 1ch;
}

#credit:not(:hover) span {
  display: none;
}

@media (max-width: /* --post-width + (--post-margin * 2) + 32px = */ 592px) {
  #credit {
    display: none;
  }
}