/* custom tooltip
*************************/

.custom-tooltip {
	position: absolute;
	display: none;
	background: var(--color-accent);
	color: #fff;
	padding: 6px 10px;
	border-radius: 3px;
	font-size: 14px;
	pointer-events: none;
	z-index: 1000;
	max-width: 300px;
	white-space: normal;
	word-break: break-word;
}

/* tumblr lightbox
*************************/

.tmblr-lightbox {
	background-color: hsl(0deg 0% 100% / 42%) !important;
	backdrop-filter: blur(5px) !important;
}
.tmblr-lightbox .vignette {
	background-image: none !important;
}
.tmblr-lightbox .lightbox-image {
	box-shadow: 0 4px 30px #a7a7a7 !important;
}

/* general
*************************/

* {
	box-sizing: border-box;
}

body {
	font-family: var(--font-name);
	font-size: var(--font-size);
	letter-spacing: .7px;
	color: var(--text-color);
	background-image: url(https://dl.dropboxusercontent.com/scl/fi/qyb94cs7e34a87u1mtkrk/diagonal-lines.svg?rlkey=2q3rudkaum0dr9x990jbkhqqh&st=vfjla2li&dl=0);
	background-attachment: fixed;
	background-repeat: repeat;
	background-color: #f7f6f6;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
	border-radius: var(--border-radius);
}

.photo.legacy .post-image img {
	width: 100%;
}

a {
	color: var(--color-accent);
	text-decoration: none;
}

ul, ol {
	margin: 0;
	padding: 0 0 0 27px;
}

pre {
	white-space: normal;
}

p, pre {
	margin: 0;
}

p+p {
	margin-top: 5px;
}

hr {
    border-style: solid;
    border-color: var(--border-color);
}

blockquote {
	border-radius: var(--border-radius);
	margin: 0;
	padding: 10px var(--post-gaps);
	background: var(--lighter-grey);
}

.reblog-list .comment.reblog blockquote {
	background: var(--light-grey);
}

blockquote blockquote {
	border-radius: 0;
	padding: 0 0 0 var(--post-gaps);
	border-left: 1px solid var(--border-color);
}

h1, h2, h3, h4, h5, h6 {
	font-size: 15px;
	margin: 0;
}

h2.post-title {
	font-size: 20px;
	line-height: 120%;
}

iframe, video {
	width: 100%;
	max-width: 540px;
	border-radius: var(--border-radius);
	overflow: hidden;
	display: block;
}

p.tmblr-attribution,
.tmblr-alt-text-helper {
	width: unset !important;
	margin: 4px 0 0 0;
	background: var(--light-grey);
	padding: 5px var(--post-gaps);
	border-radius: 3px;
}

p.tmblr-attribution a,
.tmblr-alt-text-helper a {
	color: var(--text-color) !important;
}
 
small, sub, sup, pre, .npf_quirky, .npf_chat, .npf_quote {
	font-size: var(--font-size) !important;
	font-family: var(--font-name) !important;
}

figure.tmblr-full img {
	width: 100%;
}

/* main content wrapper
*************************/

main {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 50px;
	margin: 80px auto;
}

/* side
*************************/

#side {
	width: 250px;
	position: sticky;
	top: 60px;
}

.side-top {
	border: 2px solid var(--border-color);
	background-color: var(--post-background-color);
	border-radius: var(--border-radius);
	box-shadow: 5px 5px 0 var(--post-shadow-color);
	padding: var(--post-gaps);
}

.side-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 2.2/3;
	object-fit: cover;
	border-radius: var(--border-radius);
}

.side-title {
	font-weight: 900;
	font-size: 17px;
	color: var(--color-accent);
	margin: 10px 0 5px 0;
}

.side-links {
	display: flex;
	justify-content: space-between;
	align-items: center;
	agap: var(--gaps);
	margin: 5px 0;
}

.side-links a {
	display: flex;
	width: 20px;
	height: auto;
	aspect-ratio: 1/1;
	background-color: var(--color-accent);
	opacity: .4;
	border-radius: 5px;
	transition: 300ms;
}

.side-links a:hover {
	opacity: 1;
}

.side-links svg {
	width: var(--icon-size);
	color: var(--color-accent);
	opacity: .6;
}

.side-bottom {
	display: flex;
	gap: var(--post-gaps);
	margin-top: var(--post-gaps);
}

.side-bottom a {
	color: var(--color-text);
	display: flex;
	justify-content: center;
	align-items: center;
	border: 2px solid var(--border-color);
	background-color: var(--post-background-color);
	border-radius: var(--border-radius);
	box-shadow: 5px 5px 0 var(--post-shadow-color);
	padding: 8px 10px;
	width: 50%;
}

.side-bottom a svg {
	width: var(--icon-size);
}

/* posts
*************************/

#posts {
	width: 574px;
}

.post {
	padding: var(--post-gaps);
}

.pinned {
	background-color: var(--light-grey);
}

.post-wrapper {
	margin: 0 0 40px 0;
	border: 2px solid var(--border-color);
	background-color: var(--post-background-color);
	border-radius: var(--border-radius);
	box-shadow: 5px 5px 0 var(--post-shadow-color);
}

.post-wrapper:last-of-type {
	margin-bottom: 0;
}

.post-header {
	padding: var(--post-gaps);
	border-bottom: 1px solid var(--border-color);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.post-info {
	border-top: 1px solid var(--border-color);
	display: flex;
	align-items: center;
}

.index-page .post-info {
	justify-content: space-between;
}

.permalink-page .post-info {
	justify-content: flex-end;
}

.post-header-permalink,
.post-reblog-perma a,
.post-reblog-perma div,
.blog-name-wrapper {
	display: flex;
	gap: 5px;
	align-items: center;
	color: var(--text-color);
}

.post-header-permalink svg,
.post-reblog-perma svg {
	display: flex;
	width: 14px;
	height: auto;
	aspect-ratio: 1/1;
}

.post-reblog-perma {
	display: flex;
}

.post-reblog-perma a,
.post-reblog-perma div {
	border-left: 1px solid var(--border-color);
	padding: 13px var(--post-gaps);
}

.post-tags {
	padding: 0 var(--post-gaps);
	color: #cbcbcb;
	white-space: nowrap;
	width: 100%;
	text-overflow: ellipsis;
	overflow: hidden;
}

/* reblog list
*************************/

.reblog-list+*,
*+.reblog-list,
.not-reblog+*,
*+.not-reblog {
	margin-top: var(--gaps);
}

.reblog-list .comment.reblog {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	gap: var(--post-gaps);
	position: relative;
}

.normal-reblogs .reblog-list .comment+.comment.reblog,
*+.reblog-list .comment.reblog:first-of-type {
	margin-top: var(--post-gaps);
	padding-top: var(--post-gaps);
}
	
.normal-reblogs .reblog-list .comment+.comment.reblog::before,
.normal-reblogs *+.reblog-list .comment.reblog::before {
	content: '';
	position: absolute;
	width: calc(100% + (var(--post-gaps)*2));
	height: 1px;
	background-color: var(--border-color);
	top: 0;
	left: calc(var(--post-gaps)*-1);
}

.simple-reblogs .reblog-list .comment.reblog {
	margin-top: var(--gaps);
}

.simple-reblogs .reblog-list .comment.reblog:first-of-type {
    margin-top: 0;
}

.simple-reblogs .reblog-list .comment.original+.comment.reblog,
.simple-reblogs *+.reblog-list .comment.reblog:first-of-type {
	margin-top: var(--post-gaps);
	padding-top: var(--post-gaps);
}

.simple-reblogs .reblog-list .comment.original+.comment.reblog::before,
.simple-reblogs *+.reblog-list .comment.reblog:first-of-type::before {
	content: '';
	position: absolute;
	width: calc(100% + (var(--post-gaps)*2));
	height: 1px;
	background-color: var(--border-color);
	top: 0;
	left: calc(var(--post-gaps)*-1);
}

.reblog-list .comment.reblog .reblog-body {
	width: 100%;
	padding: 10px;
	border: 1px solid var(--lighter-border-color);
	border-radius: var(--border-radius);
	background-color: var(--lighter-grey);
}

.reblog-header a {
	display: block;
}

.reblog-header img,
.reblog-header span {
	display: block;
	border: 3px solid var(--border-color);
	border-radius: 100px;
	width: 30px;
	max-width: 30px;
	height: auto;
	aspect-ratio: 1 / 1;
}

.blog-name-wrapper svg {
	width: var(--icon-size);
	height: var(--icon-size);
}

.reblog-header span {
	background-color: var(--border-color);
}

/* permalink post info
*************************/

.permalink-postinfo {
	margin-bottom: 40px;
	border: 2px solid var(--border-color);
	background-color: var(--post-background-color);
	border-radius: var(--border-radius);
	box-shadow: 5px 5px 0 var(--post-shadow-color);
}

.permalink-postinfo div {
	padding: 10px var(--post-gaps);
}

.permalink-postinfo div:not(:last-of-type) {
	border-bottom: 1px solid var(--border-color);
}

.permalink-postinfo a {
	color: #b5b4b4;
}

/* ask post
*************************/

.question, .answer {
	display: flex;
	gap: var(--post-gaps);
	position: relative;
	z-index: 99;
}

.answer::before {
	content: '';
	position: absolute;
	width: calc(100% + (var(--post-gaps)*2));
	height: 1px;
	background-color: var(--border-color);
	top: 0;
	left: calc(var(--post-gaps)*-1);
}

.question::before {
	content: '';
	width: calc(100% + 30px);
	height: calc(100% + 30px);
	left: calc(var(--post-gaps)*-1);
	top: calc(var(--post-gaps)*-1);
	position: absolute;
	background-color: var(--lighter-grey);
	z-index: -12;
}

.answer {
	position: relative;
	padding-top: var(--post-gaps);
	margin-top: var(--post-gaps);
}

.ask-icon span {
	text-transform: uppercase;
	font-weight: 700;
	display: flex;
	width: 28px;
	height: 28px;
	background-color: var(--text-color);
	justify-content: center;
	align-items: center;
	border-radius: 100px;
	color: #fff;
}

.question .ask-icon span {
	background-color: var(--color-accent);
}

.post.ask .ask-user-wrapper+* {
	margin-top: 5px;
}

.ask .ask-user-wrapper {
	font-weight: 600;
}

.ask .ask-user-wrapper a {
	color: var(--text-color);
}

/* photoset
** https://github.com/Spacetchi/tumblr-flexible-photoset
*************************/

.photo-row {
	padding:2px 0;
	display:flex;
}

.media--image--container {
	cursor:pointer;
	padding:0 2px;
	flex-grow:1;
}

.media--image--container:first-child {
	padding-left:0;
}

.media--image--container:last-child {
	padding-right:0;
}

.media--image {
	width:100%;
	height:100%;
	object-fit:cover;
}

.photo-row:first-of-type {
	padding-top: 0;
}

.photo-row:last-of-type {
	padding-bottom: 0;
}

.photo-row-2 .media--image--container {
	width:50%;
}

.photo-row-3 .media--image--container {
	width:33.33333333%;
}

/* audio post
*************************/

.npf-audio-wrapper {
	--NPF-Audio-Buttons-Size: 1.4rem;
	--NPF-Audio-Buttons-Color: var(--grey);
	--NPF-Audio-Buttons-Spacing: 1.3rem;
	--NPF-Audio-Image-Size: 85px;
	--NPF-Audio-Image-Spacing: 5px;
}

.post.audio.legacy iframe {
	width: 100%;
	display: block;
}

.aaudio-player {
	background-color: var(--light-grey);
	color: var(--grey);
}

.npf-audio-background {
	background-color: var(--light-grey);
	padding: 1.5rem;
	border-radius: var(--border-radius);
}

.npf-audio-title-label,
.npf-audio-artist-label,
.npf-audio-album-label {
	font-weight: bold;
}

.npf-audio-title,
.npf-audio-artist {
	color:  var(--grey);
}

.npf-audio-album {
	display: none;
}

/* quote post
*************************/

.quote, .npf_quote {
	font-size: 20px !important;
	font-style: italic !important;
	font-weight: 600 !important;
	line-height: 120% !important;
}

.source {
	margin-top: var(--gaps);
}

.npf_quote::before {
	content: '“';
}

.npf_quote::after {
	content: '”';
}

.npf_quote,
.npf_chat {
	font-family: var(--font-name);
	font-size: var(--font-size);
}

/* link post
*************************/

.post a.link-wrap {
	display: flex;
	align-items: center;
	gap: 5px;
	color: #fff;
}

div.npf-link-block,
.post a.link-wrap {
	padding: 6px var(--post-gaps);
	border-radius: var(--border-radius);
	background-color: var(--border-color);
	transition: 300ms;
}

div.npf-link-block:hover,
.post a.link-wrap:hover {
	background-color: var(--grey);
}

.post .link-title {
	font-weight: 600;
	font-size: 20px;
	white-space: pre;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 65%;
}

.post .link-title::before,
div.npf-link-block .title::before {
	content: '';
	display: inline-block;
	width: 21px;
	height: 21px;
	margin: 0 8px -5px 0;
	background-image: url(https://dl.dropboxusercontent.com/scl/fi/5ez7bdkzzokhqy85ws5w0/link-2.svg?rlkey=2jhpweukg44me1d7hg8xh8fhu&st=y9n34o4n&dl=0);
	background-repeat: no-repeat;
	background-size: contain;
}

.post .link-host {
	color: #fff;
	width: 100%;
	font-size: 13px;
	text-transform: uppercase;
	opacity: 1;
	font-weight: 400;
	width: 30%;
	text-align: right;
}

div.npf-link-block {
	border: 0 none;
	margin: 0;
}

div.npf-link-block .title {
	position: static;
	text-align: left;
	padding: 0 !important;
	margin: 0;
	font-weight: 600;
	font-size: 20px;
	color: #fff;
	line-height: normal;
	max-height: unset;
	white-space: pre;
	flex: auto;
}

div.npf-link-block .poster .title {
	position: relative;
	text-align: left;
	font-weight: 600;
	color: inherit;
}

div.npf-link-block .bottom {
	padding: 0;
	margin: 0;
	width: 30%;
	text-align: right;
}

div.npf-link-block .bottom .description {
	display: none;
}

div.npf-link-block .bottom .site-name {
	font-size: 13px;
	margin-top: 0;
	color: #fff;
	opacity: 1;
}

div.npf-link-block .poster {
	background-image: url() !important;
	height: auto !important;
	display: block;
	border-bottom: 0 none;
	width: 70%;
}

div.npf-link-block .poster:before {
	display: none;
}

div.npf-link-block>a {
	color: #fff;
	display: flex;
	align-items: center;
}

/* poll post
*************************/

.poll-post a.poll-row {
	width: unset !important;
}

.poll-post a.poll-row {
	background-color: var(--border-color);
	border-radius: var(--border-radius);
	justify-content: flex-start;
	color: #fff;
	margin: 0 0 5px;
}

.poll-post a.poll-row:hover {
	background-color: var(--color-accent);
}

.poll-post .poll-question {
	font-size: 20px;
	margin-bottom: 10px;
}

/* chat post
*************************/

ul.npf_chat,
ul.chat-wrap {
	list-style: none;
	padding: 0;
	border-radius: var(--border-radius);
	overflow: hidden;
}

ul.npf_chat li,
ul.chat-wrap li {
	padding: 8px 10px;
	background-color: var(--light-grey);
}

ul.npf_chat li:not(:last-of-type),
ul.chat-wrap li:not(:last-of-type) {
	margin-bottom: 5px;
}

ul.npf_chat strong,
ul.chat-wrap strong {
	color: #939393;
}

/* post notes
*************************/

.post-notes ol {
	padding: 0;
	list-style: none;
}

.post-notes {
	border: 2px solid var(--border-color);
	background-color: var(--post-background-color);
	border-radius: var(--border-radius);
	box-shadow: 5px 5px 0 var(--post-shadow-color);
}

.post-notes a {
	color: #b5b4b4;
}

.post-notes li:not(.more_notes_link_container) {
	border-bottom: 1px solid var(--border-color);
	padding: 10px var(--post-gaps) 10px 60px;
	position: relative;
}

.post-notes li.more_notes_link_container {
	padding: 10px var(--post-gaps);
}

.post-notes li.reblog:before,
.post-notes li.like:before,
.post-notes li.reply:before {
	content: '';
	position: absolute;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 35%;
	width: 40px;
	height: 100%;
	top: 0;
	left: 0;
	border-right: 1px solid var(--border-color);
}

.post-notes li.reblog:before {
	background-image: url(https://dl.dropboxusercontent.com/scl/fi/kh0kn3iolc62pwyxia0jh/repeat.svg?rlkey=uu1cgd6gnqomq18dvp3acwjnb&st=qwtnvhuy&dl=0);
}

.post-notes li.reblog.original_post:before {
	background-image: url(https://dl.dropboxusercontent.com/scl/fi/7jicozh1kzfgplwcln86d/corner-down-right.svg?rlkey=qv7mkjmgklxol2chiiej2f9aw&st=mzwjajj2&dl=0);
}

.post-notes li.like:before {
	background-image: url(https://dl.dropboxusercontent.com/scl/fi/h1lnhgby70id5o8nw937y/heart.svg?rlkey=1608fvfohw59fujxz454vyhvl&st=wix3q21a&dl=0);
}

.post-notes li.reply:before {
	background-image: url(https://dl.dropboxusercontent.com/scl/fi/sp12tunwzkw59ei0c2epo/message-circle.svg?rlkey=8ku4dnrsi6pwqsjv2ze7r4tlj&st=gfy732wk&dl=0);
}

.post-notes a.avatar_frame {
	display: none;
}

/* random stuff
***************/

.post-content .crt-video+div.npf_row, .post-content div.npf_row+.crt-video, .post-content div.npf_row+p, .post-content p+div.npf_row, .post .crt-video+div.npf_row, .post div.npf_row+.crt-video, .post div.npf_row+p, .post p+div.npf_row, body .crt-video+div.npf_row, body div.npf_row+.crt-video, body div.npf_row+p, body p+div.npf_row {
	margin-top: 12px;
}

.npf_row+*, *+.npf_row, *+figure, figure+*, *+.npf_chat, .npf_chat+*, p+*, *+p, blockquote+*, *+blockquote, *+ul, *+ol, div.npf-link-block+*, *+div.npf-link-block {
	margin-top: var(--gaps);
}

.npf-audio-wrapper+*, *+.npf-audio-wrapper, .poll-post+*, *+.poll-post {
	margin-top: var(--gaps) !important;
}

figure+figure {
	margin-top: 4px;
}