Create a new version of paste:

<!--
 
    theme 03: capricorn // @freddie-mercurys
 
    credits
    -   base code - @seyche
    -   icon fonts - https://phosphoricons.com
    -   css photosets - @annasthms and @eggdesign
    -   npf photoset fix - @glenthemes
    -   custom audio player - @annasthms
    -   dark mode button inspired by @22mm
    -   tippy.js tooltips - atomiks
    -   fade in effect - cory laviska
    -   remove tumblr redirects - @magnusthemes
    -   responsive iframes - @nouvae
    -   custom like and reblog button inspired by @shythemes
    -   notecount shortener - @shythemes
    -   time ago plugin - @bychloethemes
 
    please don't remove credit or take parts of this code :)
 
-->

<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<title>{Title} {block:TagPage}/ #{Tag}{/block:TagPage}{block:PostSummary}: {PostSummary}{/block:PostSummary}</title>
 
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!--variables and options-->

<meta name="image:header" content=""/>

<meta name="color:background" content="#ffffff"/>
<meta name="color:secondary background" content="#f6f6f6"/>
<meta name="color:text" content="#333333"/>
<meta name="color:link" content="#bbbbbb"/>
<meta name="color:accent" content="#71d3d7"/>
<meta name="color:borders" content="#eeeeee"/>
<meta name="color:dark mode background" content="#212121"/>
<meta name="color:dark mode secondary background" content="#333333"/>
<meta name="color:dark mode text" content="#f6f6f6"/>
<meta name="color:dark mode link" content="#cccccc"/>
<meta name="color:dark mode accent" content="#71d3d7"/>
<meta name="color:dark mode borders" content="#444444"/>

<meta name="select:post width" content="400px" title="400px"/>
<meta name="select:post width" content="450px" title="450px"/>
<meta name="select:post width" content="500px" title="500px"/>
<meta name="select:post width" content="540px" title="540px"/>

<meta name="if:show post borders" content="1"/>
<meta name="if:rounded corners" content="1"/>
<meta name="if:show pop up description" content="1"/>
<meta name="if:show pop up stats" content="1"/>

<meta name="text:title" content="blog title"/>
<meta name="text:font" content="Inter"/>
<meta name="text:font size" content="13"/>
<meta name="text:post margin" content="150"/>

<meta name="text:home link" content="home"/>
<meta name="text:ask link" content="contact"/>
<meta name="text:archive link" content="archive"/>
<meta name="text:popup link" content="more"/>
<meta name="text:popup title" content="pop-up title"/>
<meta name="text:popup description" content="Popup text goes here! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."/>
<meta name="text:blog status" content="type your blog status here"/>
<meta name="text:currently reading" content="type what you're reading here"/>
<meta name="text:currently watching" content="type what you're watching here"/>
<meta name="text:currently listening to" content="type what you're listening to here"/>
<meta name="text:link 1 URL" content="/"/>
<meta name="text:link 1" content="link 1"/>
<meta name="text:link 2 URL" content="/"/>
<meta name="text:link 2" content="link 2"/>
<meta name="text:link 3 URL" content="/"/>
<meta name="text:link 3" content="link 3"/>
<meta name="text:link 4 URL" content="/"/>
<meta name="text:link 4" content="link 4"/>
<meta name="text:link 5 URL" content="/"/>
<meta name="text:link 5" content="link 5"/>
<meta name="text:link 6 URL" content="/"/>
<meta name="text:link 6" content="link 6"/>
<meta name="text:link 7 URL" content="/"/>
<meta name="text:link 7" content="link 7"/>
<meta name="text:link 8 URL" content="/"/>
<meta name="text:link 8" content="link 8"/>

<!--jquery-->
<script src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
<!--google fonts-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family={text:font}:wght@400;600&display=swap" rel="stylesheet">
<!--icon fonts-->
<script src="https://unpkg.com/phosphor-icons"></script>
<!--tooltips-->
<script src="https://unpkg.com/popper.js@1"></script>
<script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
<link rel="stylesheet" href="https://unpkg.com/tippy.js@5/animations/perspective.css"/>
<!--photoset fixes-->
<link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
<!--
        NPF images fix v3.0 by @glenthemes [2021]
        💌 git.io/JRBt7
--->
<script src="//npf-images-v3.github.io/script.js"></script>
<link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
<style tmblr-npf>
:root {
    --NPF-Caption-Spacing:2em;
    --NPF-Image-Spacing:1px;
}
</style>
<link rel="stylesheet" media="screen" href="//assets.tumblr.com/client/prod/standalone/blog-network-npf/index.build.css">
<!--time ago-->
<script type="text/javascript" src="https://static.tumblr.com/i5s2zks/9Acok8oo2/bct-timeago.min.js"></script>
<!-- responsive iframes -->
<script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
<!--custom audio player-->
<script src="https://cdn.jsdelivr.net/gh/annasthms/customaudio@latest/customaudio.min.js"></script>
<!--smooth scroll-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.min.js" integrity="sha512-HaoDYc3PGduguBWOSToNc0AWGHBi2Y432Ssp3wNIdlOzrunCtB2qq6FrhtPbo+PlbvRbyi86dr5VQx61eg/daQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>const storedTheme = localStorage.getItem("theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
if (storedTheme) document.documentElement.setAttribute("data-theme", storedTheme); </script>

<style type="text/css">

:root {
    --google-font: {text:font};
    --font-size: {text:font size}px;
    --post-width: {select:post width};
    --post-margin: {text:post margin}px;
    --caption-spacing: 2em;
    {block:ifroundedcorners}
    --rounded-corners: 10px;
    {/block:ifroundedcorners}
    {block:ifnotroundedcorners}
    --rounded-corners: 0em;
    {/block:ifnotroundedcorners}
}
    
:root, html[data-theme='light'] {
    --LightOn: block;
    --LightOff: none;
    --background-color: {color:background};
    --secondary-color: {color:secondary background};
    --text-color: {color:text};
    --link-color: {color:link};
    --accent-color: {color:accent};
    --border-color: {color:borders};
}

html[data-theme='dark'] {
    --LightOn: none;
    --LightOff: block; 
    --background-color: {color:dark mode background};
    --secondary-color: {color:dark mode secondary background};
    --text-color: {color:dark mode text};
    --link-color: {color:dark mode link};
    --accent-color: {color:dark mode accent};
    --border-color: {color:dark mode borders};
}

html.theme-transition,
html.theme-transition *,
html.theme-transition *:before,
html.theme-transition *:after {
  transition: 0s !important;
  transition-delay: 0 !important;
}

/*-- basic styling --*/

* {box-sizing: border-box;}

body {
    font-family: var(--google-font);
    font-size: var(--font-size);
    -webkit-font-smoothing: antialiased;
    color: var(--text-color);
    background-color: var(--background-color);
    line-height: 180%;
    word-wrap: break-word;
    letter-spacing: 0.2px;
    margin: 0;
    padding: 0;
    transition: 0.3s opacity;
}
 
body.fade-out {
    opacity: 0;
    transition: none;
}

a {
    color: var(--link-color); 
    text-decoration: none;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

a:hover {
    color: var(--accent-color);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

blockquote {
    padding: 0 0 0 1.5em;
    border-left: 1px solid var(--border-color);
    margin: 1.5em 0 1.5em 1.5em;
}

h1, h2, h3, h4, h5, .title {font-weight: 600;}

h1, .title {
    font-size: calc(var(--font-size) + 3px);
    letter-spacing: 0.5px;
}

h2, h3, h4, h5 {font-size: var(--font-size);}

small, big {font-size: var(--font-size);}

hr {
    height: 1px;
    border: none;
    box-shadow: none;
    background-color: var(--border-color);
}

pre {
    line-height: inherit;
    font-size: inherit;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}

/*--scrollbar--*/

::-webkit-scrollbar {
    width:17px;
    height:17px;
    background-color:var(--background-color);
}

::-webkit-scrollbar-track {
    border: 8px solid var(--background-color); 
    background-color: var(--border-color); 
}

::-webkit-scrollbar-thumb {
    border: 8px solid var(--background-color); 
    background-color:var(--text-color); 
    min-height:100px;
    min-width:100px;
}

/*--tooltips--*/
 
.tippy-tooltip.custom-theme {
    background: transparent;
    color: var(--text-color);
    font-size: var(--font-size);
    text-transform: lowercase;
    text-align: center;
}

/*-- controls --*/

#controls-icon {
    cursor: pointer;
    font-size: calc(var(--font-size) + 10px);
    color: var(--text-color);
    vertical-align: middle;
}

body.controls-click .tmblr-iframe {
    position: fixed;
    opacity: 0.8;
    visibility: visible;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

.tmblr-iframe-compact .tmblr-iframe--unified-controls {
    z-index: 999999!important;
    top: 93px !important;
    right: 20px !important;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.8);
    transform-origin: 100% 0;
    -webkit-transform: scale(0.8);
    -webkit-transform-origin: 100% 0;
    -o-transform: scale(0.8);
    -o-transform-origin: 100% 0;
    -moz-transform: scale(0.8);
    -moz-transform-origin: 100% 0;
    -ms-transform: scale(0.8);
    -ms-transform-origin: 100% 0;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

.tmblr-iframe--app-cta-button {display: none!important;}

/*-- top bar --*/

#top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    height: 80px;
    background: var(--background-color);
    border-bottom: 1px solid var(--border-color);
    z-index: 1;
}

#top-bar a {color: var(--text-color);}
#top-bar a:hover {color: var(--accent-color);}

.title-wrap {
    display: flex;
    align-items: center;
    grid-gap: var(--caption-spacing);
}

#header-img {
    width: 80px; 
    height: 80px;
    background: var(--accent-color);
}

nav {margin-right: 15px;}
nav a {margin-left: 2em;}

/*-- pop-up --*/

#pop-up {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    z-index: 9999999;
    background: var(--background-color);
    display: none;
}

.fade {
    top:0;
    left:0;
    position:fixed;
    z-index:99999999;
    width:100%;
    height:100%;
}

.pop-up-content-outer {
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    position: fixed;
    border: 1px solid var(--border-color);
    z-index:99999999;
    width: var(--post-width); 
    border-radius: var(--rounded-corners);
    overflow: hidden;
}

.pop-up-content-inner {
    padding:var(--caption-spacing); 
    max-height: var(--post-width);
    overflow-y: auto;
}

.popup-title-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--caption-spacing);
    padding-bottom: var(--caption-spacing);
    border-bottom: 1px dashed var(--border-color);
}

#pop-up-close-icon {
    cursor: pointer;
    float: right;
    font-size: calc(var(--font-size) + 8px);
    background: var(--secondary-color);
    color: var(--text-color);
    padding: 10px;
    border-radius: var(--rounded-corners);
    vertical-align: middle;
    margin-left: 0.5em;
}

.pop-up-description, .pop-up-stats {
    margin: var(--caption-spacing) 0;
    padding-bottom: var(--caption-spacing);
    border-bottom: 1px dashed var(--border-color);
}

.pop-up-stats {text-align: center;}
.pop-up-stats p {margin: 0;}

.pop-up-links {width: 100%; border: 0;}
.pop-up-links tr {text-align: center;}

.find {
    margin: var(--caption-spacing) auto 0 auto;
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    width: 75%;
}
 
.find input {
    border: 0;
    outline: 0;
    background: var(--background-color);
    font-family: inherit;
    color: var(--text-color);
    font-size: var(--font-size);
}
 
.find input[type=text] {
    font-size: var(--font-size);
    color: var(--text-color);
    vertical-align: middle;
}

#search-icon {
    font-size: calc(var(--font-size) + 5px);
    color: var(--text-color);
    vertical-align: middle;
}

/*-- posts --*/

main {
    position: relative;
    width: var(--post-width);
    margin: auto;
}

article {
    width: 100%;
    position: relative;
    margin: var(--post-margin) auto;
}

{block:ifShowPostBorders}
.posts {
    border: 1px solid var(--border-color);
    border-radius: var(--rounded-corners);
    padding: var(--caption-spacing);
}
{/block:ifShowPostBorders}

.posts li, .posts blockquote, figure, video, iframe, .video, .video iframe, figure.tmblr-embed.tmblr-full, figure.tmblr-embed.tmblr-full iframe, .caption iframe {max-width: 100%;}

/*-- captions --*/

.caption {margin: var(--caption-spacing) 0;}
.caption:last-of-type {margin-bottom: 0;}
.text-caption:first-of-type {margin-top: 0;}

.user-icon {
    display: inline-block;
    vertical-align: middle;
    width: 2.5em; 
    height: 2.5em;
    border-radius: 100%;
    padding: 2px;
    border: 1px solid var(--border-color);
    margin-right: 1em;
}

.username {
    display: inline-block;
    vertical-align: middle;
}
.username a {
    color: var(--text-color);
    font-weight: 600;
}
.username a:hover {color: var(--accent-color);}

.deactive::after {
    content: '(deactivated)';
    margin-left: 1em;
    opacity: 0.75;
    color: var(--text-color);
}

p.tmblr-attribution {margin-top: var(--caption-spacing) !important;}

/*-- text ---*/

h1.post-title {margin-top: 0;}

/*-- link --*/

.link {
    display: flex;
    align-items: center;
    grid-gap: var(--caption-spacing);
    font-size: calc(var(--font-size) + 3px);
    font-weight: 600;
    letter-spacing: 0.5px;
    padding-bottom: var(--caption-spacing);
    border-bottom: 1px dashed var(--border-color);
}

.link a {color: var(--text-color);}
.link a:hover {color: var(--accent-color);}

#link-icon {
    cursor: pointer;
    font-size: calc(var(--font-size) + 5px);
    padding: 8px;
    border-radius: var(--rounded-corners);
    background: var(--accent-color);
    color: var(--background-color);
    vertical-align: middle;
}

.npf-link-block {
    border: 0;
    padding: 0;
    background-color: inherit;
    color: inherit;
}

.npf-link-block.no-poster .title {
    font-size: calc(var(--font-size) + 3px);
    font-weight: 600;
    letter-spacing: 0.5px;
    padding :0;
}
.npf-link-block.no-poster .bottom {display: none;}

/*-- photo/video --*/

img {
    margin: 0;
    display: block;
    height: auto;
    max-width: 100%;
}
 
.photo {border-radius: var(--rounded-corners); overflow: hidden;}
.photo img {width: 100%;}
.vignette, #vignette {opacity: 0;}
.tmblr-lightbox, #tumblr_lightbox {background-color: rgba(130, 130, 130, 0.75) !important;}
 
.lightbox-image, #tumblr_lightbox img {
    box-shadow: none !important;
    border-radius: 0 !important;
    max-width: none;
}

#tumblr_lightbox_caption, .lightbox-caption {
    color: #fff !important;
    font-family: inherit;
    margin-top: 1em !important;
}

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

.video, figure.tmblr-embed.tmblr-full {border-radius: var(--rounded-corners); overflow: hidden;}

figure.tmblr-embed.tmblr-full iframe {max-width: 100%;}

/*-- photoset --*/

[photoset-layout] {
    grid-gap: 1px;
    border-radius: var(--rounded-corners);
    overflow: hidden;
}

[photoset-layout] div {cursor: pointer;}

.npf_inst {
    border-radius: var(--rounded-corners);
    overflow: hidden;
}

/*-- quote --*/

.quote, p.npf_quote {
    display: flex;
    align-items: center;
    grid-gap: var(--caption-spacing);
    font-family: inherit;
    font-size: calc(var(--font-size) + 3px); 
    font-weight: 600;
    letter-spacing: 0.5px;
}

#quote-icon {
    cursor: pointer;
    font-size: calc(var(--font-size) + 5px);
    padding: 8px;
    border-radius: var(--rounded-corners);
    background: var(--accent-color);
    color: var(--background-color);
    vertical-align: middle;
}

.quote p:first-of-type {margin-top: 0;}
.quote p:last-of-type {margin-bottom: 0;}

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

/*-- chat --*/

.chat {padding: 0; margin: 0;}
.chat li, p.npf_chat {list-style-type: none; margin-top: var(--caption-spacing);}
.chat li:first-of-type {margin-top: 0;}
.chatter, p.npf_chat b {font-weight: 600;}

p.npf_chat, p.npf_chat b {font-family: inherit;}

/*-- answer --*/

.ask-wrap {
    padding-bottom: var(--caption-spacing); 
    border-bottom: 1px dashed var(--border-color);
}

.asker-wrap {
    display: flex;
    align-items: center;
    grid-gap: var(--caption-spacing);
}

#question-icon {
    cursor: pointer;
    font-size: calc(var(--font-size) + 5px);
    padding: 8px;
    border-radius: var(--rounded-corners);
    background: var(--accent-color);
    color: var(--background-color);
    vertical-align: middle;
}

.asking {
    display: flex;
    flex-direction: column;
    grid-gap: -1em;
    font-weight: 600;
    text-transform: lowercase;
    
}
.asking a {color: var(--text-color);}
.asking a:hover {color: var(--accent-color);}

.sent {font-weight: 400;}

.question {margin-top: 1em;}
.question p:first-of-type {margin-top: 0;}
.question p:last-of-type {margin-bottom: 0;}

/*-- audio --*/
 
.audio_post {
    display:flex;
    justify-content: space-between;
    align-items: center;
}

.custom_audio_wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
 
.album-art{
    width: 100px;
    height: 100px;
    border-radius: var(--rounded-corners);
    overflow: hidden;
}

.audio-info-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-gap: var(--caption-spacing);
    margin-bottom: var(--caption-spacing);
}

.player {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.audio_info p {margin: 0;}

.track {
    font-size: calc(var(--font-size) + 3px);
    font-weight: 600;
}

#audio-player-icon {
    cursor: pointer;
    font-size: calc(var(--font-size) + 10px);
    background: var(--secondary-color);
    color: var(--text-color);
    padding: 15px;
    border-radius: 100%;
    vertical-align: middle;
    margin-right: 1em;
}

.custom_audio_seekbar {
    height: 12px;
    flex-grow: 1;
    background: var(--secondary-color);
    border-radius: 1em;
    cursor: pointer;
}

.custom_audio_seekbar_progress {
    width: 0;
    height: 100%;
    background: var(--text-color);
    border: 5px solid var(--secondary-color);
    border-radius: 1em;
}

.spotify_audio_player, .soundcloud_audio_player {
    max-height: 80px; 
    border-radius: var(--rounded-corners);
}

/*-- post info --*/

.bottom-info, .top-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bottom-info {
    margin-top: var(--caption-spacing);
    padding-top: var(--caption-spacing);
    border-top: 1px dashed var(--border-color);
}

.top-info {
    margin-bottom: var(--caption-spacing);
    padding-bottom: var(--caption-spacing);
    border-bottom: 1px dashed var(--border-color);
}

.bottom-info a, .top-info a {color: var(--text-color);}
.bottom-info a:hover, .top-info a:hover {color: var(--accent-color);}

.bottom-info-left, .bottom-info-right, .top-info-left, .top-info-right {
    display: flex;
    align-items: center;
    grid-gap: 1em;
}

.dot {
    content:"";
    width: 5px;
    height: 5px;
    border-radius: 100%;
    vertical-align: middle;
    background: var(--border-color);
}

.time-ago, .notecount {text-transform: lowercase; font-weight: 600;}

.like {position: relative;}
 
.like .like_button {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
 
.like .like_button iframe {
    width: 100%!important; 
    height: 100%!important;
}
 
.like_button.liked + #post-info-icon {color: #dc143c!important;}

.tags {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    margin-top: calc(var(--caption-spacing) / 2);
    grid-gap: 1em;
}

#pinned-post-icon {
    cursor: pointer;
    font-size: calc(var(--font-size) + 7px);
    vertical-align: middle;
    color: var(--accent-color);
}

#post-info-icon {
    cursor: pointer;
    font-size: calc(var(--font-size) + 7px);
    vertical-align: middle;
    color: var(--text-color);
}

/*-- post notes --*/

.notes {margin-top: var(--caption-spacing);}

ol.notes {
    max-width: 100%;
    padding: 0;
    margin-top: var(--caption-spacing);;
}

ol.notes li.note {
    padding: 0.5em 0; 
    list-style-type: none;
}

ol.notes li.note img.avatar {display: none;}

ol.notes li.reblog::before, ol.notes li.like::before, ol.notes li.reply::before {
    font-family: 'phosphor';
    font-size: calc(var(--font-size) + 3px);
    vertical-align: middle;
    margin-right: 1em;
}

ol.notes li.reblog::before {content: "\f267"; color: var(--text-color);}
ol.notes li.like::before {content: "\f460"; color:#dc143c;}
ol.notes li.reply::before {content: "\f339"; color: var(--text-color);}
ol.notes li.original_post:before {content: "\f613"; color: var(--text-color);}

/*--pagination--*/

#page-navigation {
    display: flex;
    justify-content: space-between;
    align-content: center;
}

#page-icon {
    font-size: calc(var(--font-size) + 5px);
    color: var(--text-color);
    vertical-align: middle;
}

.pages a {color: var(--text-color);}
.pages a:hover {color: var(--accent-color);}

.current-page {font-weight: 600; color: var(--accent-color);}

/*--bottom buttons--*/

#bottom-buttons {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 15px;
    right: 15px;
    z-index: 999999;
    grid-gap: var(--caption-spacing);
}

#buttons-icon {
    cursor: pointer;
    color: var(--text-color);
    font-size: calc(var(--font-size) + 8px);
    vertical-align: middle;
}

button#theme-toggle {
    outline: none;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.light-on{
    display: var(--LightOn);
}
.light-off{
    display: var(--LightOff); 
}

/*-- ness --*/

/*--- for mobile devices ---*/

@media only screen and (max-width: 720px) {
    main, .pop-up-content-outer {width: 80vw;}
    .pop-up-content-inner {max-height: 80vh;}
    
    #controls {display:none;}
    
    #top-bar .title {display:none;}
}

/*---- END OF MEDIA QUERIES -----*/

{CustomCSS}

</style>
</head>

<!-- html -->

<body>

<script>document.body.className += ' fade-out';</script>

<!--pop up content-->

<div id="pop-up"> <div class="fade"></div>
    <div class="pop-up-content-outer">
    <div class="pop-up-content-inner">
        <div class="popup-title-wrap">
            <h1 class="pop-up-title">{text:popup title}</h1>
            <a title="close" class="closepopup"><i class="ph-x" id="pop-up-close-icon"></i></a>
        </div>
        {block:ifshowpopupdescription}<div class="pop-up-description">{text:popup description}</div>{/block:ifshowpopupdescription}
        {block:ifshowpopupstats}<div class="pop-up-stats">
            <p><b>currently:</b> {text:blog status}</p>
            <p><b>reading:</b> {text:currently reading}</p>
            <p><b>watching:</b> {text:currently watching}</p>
            <p><b>listening to:</b> {text:currently listening to}</p>   
        </div>{/block:ifshowpopupstats}
        <table class="pop-up-links">
        <tr>
        <td>{block:ifLink1}<a href="{text:Link 1 URL}">{text:Link 1}</a>{/block:ifLink1}</td>
        <td>{block:ifLink2}<a href="{text:Link 2 URL}">{text:Link 2}</a>{/block:ifLink2}</td>
        </tr>
        <tr>
        <td>{block:ifLink3}<a href="{text:Link 3 URL}">{text:Link 3}</a>{/block:ifLink3}</td>
        <td>{block:ifLink4}<a href="{text:Link 4 URL}">{text:Link 4}</a>{/block:ifLink4}</td>
        </tr>
        <tr>
        <td>{block:ifLink5}<a href="{text:Link 5 URL}">{text:Link 5}</a>{/block:ifLink5}</td>
        <td>{block:ifLink6}<a href="{text:Link 6 URL}">{text:Link 6}</a>{/block:ifLink6}</td>
        </tr>
        <tr>
        <td>{block:ifLink7}<a href="{text:Link 7 URL}">{text:Link 7}</a>{/block:ifLink7}</td>
        <td>{block:ifLink8}<a href="{text:Link 8 URL}">{text:Link 8}</a>{/block:ifLink8}</td>
        </tr>
        </table>
        <form action="/search" method="get" class="find" name="sform">
            <i class="ph-magnifying-glass" id="search-icon"></i>
            <input type="text" name="q" placeholder="search..." value="{SearchQuery}" value autocomplete="off" class="upper"/>
        </form>
    </div>
    </div>
</div>

<main><!-- main = main container -->

<!--top bar-->

<aside id="top-bar">
    <div class="title-wrap">
        <img src="{image:Header}" id="header-img" alt="header image"/></a>
        <div class="title"><a href="/">{text:title}</a></div>
    </div>
    <nav>
        {block:ifHomeLink}<a href="/" title="{text:Home Link}"><i class="ph-house" id="controls-icon"></i></a>{/block:ifHomeLink}
        {block:ifAskLink}<a href="/ask" title="{text:Ask Link}"><i class="ph-chat-teardrop" id="controls-icon"></i></a>{/block:ifAskLink}
        {block:ifArchiveLink}<a href="/archive" title="{text:Archive Link}"><i class="ph-clock-counter-clockwise" id="controls-icon"></i></a>{/block:ifArchiveLink}
        <a href="#!" class="click" title="{text:Popup Link}"><i class="ph-list-plus" id="controls-icon"></i></a>
    <!--tumblr controls-->
    <a id="controls" title="show controls"><i class="ph-toggle-left" id="controls-icon" onclick="myFunction(this)"></i></a>
    </nav>
</aside>

<!-- posts -->

{block:posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
<article class="posts" id="{PostID}" post-type="{PostType}">

<!-- top post info -->

{block:Date}
<div class="top-info">

<div class="top-info-left">
    {block:PinnedPostLabel}<a href="{Permalink}" class="pinned-post"><i class="ph-push-pin" id="pinned-post-icon"></i></a>{/block:PinnedPostLabel}
    <i class="ph-map-pin" id="post-info-icon"></i> <a class="time-ago" href="{Permalink}">{Timestamp}</a>
</div>

<div class="top-info-right">
{block:RebloggedFrom}<a href="{ReblogParentURL}" title="via {ReblogParentName}"><i class="ph-arrow-u-up-right" id="post-info-icon"></i></a>
<div class="dot"></div>
<a href="{ReblogRootURL}" title="posted by {ReblogRootName}"><i class="ph-user-circle" id="post-info-icon"></i></a>
{/block:RebloggedFrom}
{block:NotReblog}
<a href="{Permalink}" title="posted by {Name}"><i class="ph-user-circle" id="post-info-icon"></i></a>
{/block:NotReblog}
</div>

</div>
{/block:Date}

{block:Text}
{block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
{block:NotReblog}
    <div class="caption text-caption">
        <div class="comment">{Body}</div>
    </div>
{/block:NotReblog}
{block:RebloggedFrom}
    {block:Reblogs}
        <div class="caption text-caption">
            <div class="commenter source-head"><img src="{PortraitURL-64}" class="user-icon">
            <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
            </div>
            <div class="comment">{Body}</div>
        </div>
    {/block:Reblogs}
{/block:RebloggedFrom}
{/block:Text}

{block:Link}
<div class="link">
    <i class="ph-arrow-square-out" id="link-icon"></i> 
    <a href="{URL}">{Name}</a>
</div>
{block:Description}
    {block:NotReblog}
        <div class="caption">
            <div class="comment">{Description}</div>
        </div>
    {/block:NotReblog}
{/block:Description}
{block:RebloggedFrom}
    {block:Reblogs}
        <div class="caption">
            <img src="{PortraitURL-64}" class="user-icon">
            <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
            <div class="comment">{Body}</div>
        </div>
    {/block:Reblogs}
{/block:RebloggedFrom}
{/block:Link}

{block:Photo}
<div class="photo">
    {LinkOpenTag}<a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"></a>{LinkCloseTag}
</div>
{block:Caption}
    {block:NotReblog}
        <div class="caption">
            <div class="comment">{Caption}</div>
        </div>
    {/block:NotReblog}
    {block:RebloggedFrom}
        {block:Reblogs}
            <div class="caption">
                <img src="{PortraitURL-64}" class="user-icon">
                <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
                <div class="comment">{Body}</div>
            </div>
        {/block:Reblogs}
    {/block:RebloggedFrom}
{/block:Caption}
{/block:Photo}

{block:Photoset}
<div class="photoset-grid" photoset-layout="{PhotosetLayout}">{block:Photos}<div data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-lowres="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}" onclick="lightbox(this)"><img src="{PhotoURL-HighRes}" /></div>{/block:Photos}</div>
{block:Caption}
    {block:NotReblog}
        <div class="caption">
            <div class="comment">{Caption}</div>
        </div>
    {/block:NotReblog}
    {block:RebloggedFrom}
        {block:Reblogs}
            <div class="caption">
                <img src="{PortraitURL-64}" class="user-icon">
                <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
                <div class="comment">{Body}</div>
            </div>
        {/block:Reblogs}
    {/block:RebloggedFrom}
{/block:Caption}
{/block:Photoset}

{block:Video}
<div class="video">{Video-500}</div>
{block:Caption}
    {block:NotReblog}
        <div class="caption">
            <div class="comment">{Caption}</div>
        </div>
    {/block:NotReblog}
    {block:RebloggedFrom}
        {block:Reblogs}
            <div class="caption">
                <img src="{PortraitURL-64}" class="user-icon">
                <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
                <div class="comment">{Body}</div>
            </div>
        {/block:Reblogs}
    {/block:RebloggedFrom}
{/block:Caption}
{/block:Video}

{block:Quote}
<div class="quote">
    <i class="ph-quotes" id="quote-icon"></i>
    {Quote}
</div>
{block:Source}<div class="source">{Source}</div>{/block:Source}
{/block:Quote}

{block:Chat}
{block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
<ul class="chat">{block:Lines}
    <li>
        {block:Label}<div class="chatter">{Label}</div>{/block:Label}
        {Line}
    </li>
{/block:Lines}</ul>
{/block:Chat}

{block:Answer}
<div class="ask-wrap">
    <div class="asker-wrap">
        <i class="ph-chat-teardrop-dots" id="question-icon"></i>
        <div class="asking">
            {Asker} 
            <div class="sent">sent a message</div>
        </div> 
    </div>
    <div class="question">{Question}</div>
</div>
{block:Answerer}
    <div class="caption">
        <img src="{AnswererPortraitURL-64}" class="user-icon">
        <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Answerer}</a></div>
        <div class="comment">{Answer}</div>
    </div>
{/block:Answerer}
{block:NotReblog}
    <div class="caption">
        {Replies}
    </div>
{/block:NotReblog}
{block:RebloggedFrom}
    {block:Reblogs}
        <div class="caption">
            <img src="{PortraitURL-64}" class="user-icon">
            <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
            <div class="comment">{Body}</div>
        </div>
    {/block:Reblogs}
{/block:RebloggedFrom}
{/block:Answer}

{block:Audio}
{block:AudioPlayer}
{AudioPlayer}
<div class="audio_post">
    <div class="custom_audio_wrapper">
        <div class="audio-info-wrapper">
            {block:AlbumArt}
            <img src="{AlbumArtURL}" class="album-art">
            {/block:AlbumArt}
		    <div class="audio_info">
			    {block:TrackName}<p><div class="track">{TrackName}</div></p>{/block:TrackName}
			    {block:ifnotTrackName}<p><div class="track">Listen</div></p>{/block:ifnotTrackName}
		        {block:Artist}<p>{Artist}</p>{/block:Artist}
	        </div>
	    </div>
	    <div class="player">
	        <div class="custom_audio_buttons"></div>
	        <div class="custom_audio_seekbar"></div>
	    </div>
	</div>
</div>
{/block:AudioPlayer}
{block:Caption}
    {block:NotReblog}
        <div class="caption">
            <div class="comment">{Caption}</div>
        </div>
    {/block:NotReblog}
    {block:RebloggedFrom}
        {block:Reblogs}
            <div class="caption">
                <img src="{PortraitURL-64}" class="user-icon">
                <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
                <div class="comment">{Body}</div>
            </div>
        {/block:Reblogs}
    {/block:RebloggedFrom}
{/block:Caption}
{/block:Audio}

<!-- bottom post info -->

{block:Date}
<div class="bottom-info">

<div class="bottom-info-left">
    <i class="ph-activity" id="post-info-icon"></i> <a class="notecount" href="{block:NoteCount}{Permalink}{/block:NoteCount}">{NoteCountwithLabel}</a>
</div>

<div class="bottom-info-right">
<a href="{ReblogURL}" target="_blank" title="reblog this post"><i class="ph-arrow-clockwise" id="post-info-icon"></i></a>
<div class="dot"></div>
   <a class="like" title="like this post">{LikeButton}<i class="ph-heart" id="post-info-icon"></i></a>
</div>

</div>
{/block:Date}

<!-- tags -->

{block:HasTags}
<div class="tags">
    filed under: {block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}
</div>
{/block:HasTags}

<!-- post notes -->

{block:PermalinkPage}{block:Date}
{block:NoteCount}{block:PostNotes}
<div class="notes">
    {PostNotes-64}
</div>
{/block:PostNotes}{/block:NoteCount}
{/block:Date}{/block:PermalinkPage}

</article>
{/block:Posts}

<!-- pagination -->

{block:Pagination}
<article id="page-navigation">
    <a class="prev-page" href="{block:PreviousPage}{PreviousPage}{/block:PreviousPage}" title="go to previous page"><i class="ph-arrow-left" id="page-icon"></i></a>
    {block:JumpPagination length="5"}
    <div class="pages">
        {block:CurrentPage}<span class="current-page">{PageNumber}</span>{/block:CurrentPage}
            {block:JumpPage}<a href="{URL}">{PageNumber}</a>{/block:JumpPage}
    </div>
    {/block:JumpPagination}
    <a class="next-page" href="{block:NextPage}{NextPage}{/block:NextPage}" title="go to next page"><i class="ph-arrow-right" id="page-icon"></i></a>
</article>
{/block:Pagination}

</main><!-- end of main container -->

<!--bottom buttons-->

<div id="bottom-buttons">
    <button id="theme-toggle" aria-label="toggle dark or light mode" type="button">
    <span class="light-on" title="dark mode"><i class="ph-moon" id="buttons-icon"></i></span>
    <span class="light-off" title="light mode"><i class="ph-sun-dim" id="buttons-icon"></i></span>
    </button>
    <a href="#" title="back to top" id="scrollup"><i class="ph-arrow-up" id="buttons-icon"></i></a>
    <a href="https://freddie-mercurys.tumblr.com" title="theme by @freddie-mercurys" id="credit"><i class="ph-smiley" id="buttons-icon"></i></a>
</div>

<script>

//fade effect
$(function() {
    $('body').removeClass('fade-out');
});

//time ago
$(".time-ago").timeAgo({
    time: "short", // can be "letter" "short" or "word"
    spaces: true, // adds spaces between words and numbers
    words: false, // turns numbers to words
    prefix: "", // adds a prefix to the outputted string. could be "~" or "about"
    suffix: "ago", // adds a suffix to the outputted string. could be "ago"
});

//dark mode button
const toggle = document.getElementById("theme-toggle");

toggle.onclick = function () {
    document.documentElement.classList.add("theme-transition");

    let currentTheme = document.documentElement.getAttribute("data-theme");
    let targetTheme = "light";

    if (currentTheme === "light") {
        targetTheme = "dark";
    }

    window.setTimeout(function () {
        document.documentElement.classList.remove("theme-transition");
    }, 50);

    document.documentElement.setAttribute("data-theme", targetTheme);
    localStorage.setItem("theme", targetTheme);
};

//pop-up
$(document).ready(function(){
    $('.click,.fade').click(function() {
        $('#pop-up').fadeIn();
    });
    $(".closepopup").click(function() {
		$("#pop-up").fadeOut();
	});
});

//show controls
$(document).ready(function(){
   $('#controls').click(function(){
       $('body').toggleClass('controls-click');
   });
});

function myFunction(x) {
  x.classList.toggle("ph-toggle-right");
}

//tooltips
tippy('[title]', {
    theme: 'custom',
    arrow: false,
    followCursor: true,
    delay: 100,
    placement: 'top',
    zIndex: 9999999999,
    maxWidth: 200,
    animation: 'perspective',
 
    content(reference) {
        const title = reference.getAttribute('title');
        reference.removeAttribute('title');
        return title;
    },
 });

//notecount shortener
    var $container = $('article');
   $container.find('.notecount').each(function(){
       var n = $(this).html().split(' ')[0].replace(/,/g, '');
       if (n > 999) {
           n = Math.floor(n / 100) / 10;
           $(this).text(n + 'k notes');
       }
   });
   
 //scroll to top
$("#scrollup").click(function(){
    $("html, body").animate({scrollTop : 0},800);
    return false;
});

//custom audio player
customAudio({
	post: "article",
	wrappers: {
		audio: ".custom_audio_wrapper",
		buttons: ".custom_audio_buttons",
		duration: ".custom_audio_duration",
		timeCurrent: ".custom_audio_current_time",
		timeLeft: ".custom_audio_time_left",
		seekbar: ".custom_audio_seekbar"
	},
	default: false,
	pauseAll: true,
	playButton: "<i class='ph-play-fill' id='audio-player-icon'></i>",
	pauseButton: "<i class='ph-pause-fill' id='audio-player-icon'></i>",
	errorIcon: "<i class='ph-x-fill' id='audio-player-icon'></i>",
	hideInfoIfError: true,
}).create();
 
//photosets
function gatherData(images, arr) {
  for (let i = 0; i < images.length; i++) {
    let currentData = {
      "width": images[i].getAttribute('data-width'),
      "height": images[i].getAttribute('data-height'),
      "low_res": images[i].getAttribute('data-lowres'),
      "high_res": images[i].getAttribute('data-highres')
    };
    arr.push(currentData);
  }
}
function getIndex(elem) {
  let i = 0;
  while( (elem = elem.previousElementSibling) != null ) i++;
  return i;
}
function lightbox(elem) {
  let currentPhotoset = elem.parentNode;
  let photosetPhotos = currentPhotoset.getElementsByTagName('div');
  let data = [];
  gatherData(photosetPhotos, data);
  Tumblr.Lightbox.init(data, getIndex(elem) + 1);
}

// responsive iframes
$(document).ready(function() {
    flexibleFrames($(".video"));
});

//remove redirects
function noHrefLi(){
    var linkSet = document.querySelectorAll('a[href*="href.li/?"]');
    Array.prototype.forEach.call(linkSet,function(el,i){
        var theLink = linkSet[i].getAttribute('href').split("href.li/?")[1];
        linkSet[i].setAttribute("href",theLink);
    });
}
noHrefLi();

</script>


</body>
</html>