Create a new version of paste:

<!--
    
    miranda by kosmique.tumblr.com
    
    ✧･ﾟ: *✧･ﾟ:*ﾟ✧*:･ﾟ✧

    * base code by sorrism
    * flexible frames by nouvae
    * pxu photoset and lightboxes by shythemes
    
    full credits list at kosmique.tumblr.com/credits
-->

<!DOCTYPE html>
<head>

<title>{block:PostSummary}{PostSummary} : {/block:PostSummary}{Title}</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 name="viewport" content="width=device-width, initial-scale=1">

<!--Default Variables-->

<meta name="image:Background image" content="https://static.tumblr.com/dj2anrv/w5mqlo62g/geometry.png"/>

<meta name="if:Infinite Scroll" content="1"/>
<meta name="if:Fixed background" content="1"/>
<meta name="if:Repeat bacground" content="1"/>

<meta name="color:Background" content="#f5f5f5"/>
<meta name="color:Text" content="#646464"/>
<meta name="color:Sub text" content="#000000"/>
<meta name="color:Link" content="#000000"/>
<meta name="color:Title" content="#000000"/>
<meta name="color:Borders" content="#f0f0f0"/>
<meta name="color:Shadows" content="#000000"/>
<meta name="color:Posts" content="#ffffff"/>
<meta name="color:Accent" content="#ffada6"/>
<meta name="color:Top menu background" content="#171717"/>
<meta name="color:Top menu link" content="#ffffff"/>
<meta name="color:Gradient color 1" content="#fff2b2"/>
<meta name="color:Gradient color 2" content="#ffada6"/>
<meta name="color:Gradient color 3" content="#95caed"/>

<meta name="select:Main font" content="Barlow"/>
<meta name="select:Main font" content="PT Sans"/>
<meta name="select:Main font" content="Asap"/>
<meta name="select:Main font" content="Roboto"/>
<meta name="select:Sub font" content="Barlow Condensed"/>
<meta name="select:Sub font" content="PT Sans Narrow"/>
<meta name="select:Sub font" content="Asap Condensed"/>
<meta name="select:Sub font" content="Roboto Condensed"/>

<meta name="text:Link one title" content="link one"/>
<meta name="text:Link one url" content="/"/>
<meta name="text:Link two title" content="link two"/>
<meta name="text:Link two url" content="/"/>
<meta name="text:Link three title" content="link three"/>
<meta name="text:Link three url" content="/"/>
<meta name="text:Link four title" content="link four"/>
<meta name="text:Link four url" content="/"/>
<meta name="text:Link five title" content="link five"/>
<meta name="text:Link five url" content="/"/>

<!--Scripts-->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
<script src="https://static.tumblr.com/dj2anrv/ZVmq8svlk/jquery.style-my-tooltips.js"></script>
<script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
<script src="//cdn.jsdelivr.net/gh/boscoxvi/npfphotosets/npfphotosets.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.js"></script>
<script src="https://cdn.rawgit.com/leafo/sticky-kit/v1.1.2/jquery.sticky-kit.js"></script>

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Asap+Condensed:ital,wght@0,400;0,700;1,400;1,700&family=Asap:ital,wght@0,400;0,700;1,400;1,700&family=Barlow+Condensed:ital,wght@0,400;0,700;1,400;1,700&family=Barlow:ital,wght@0,400;0,700;1,400;1,700&family=Inconsolata&family=PT+Sans+Narrow:wght@400;700&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Roboto+Condensed:ital,wght@0,400;0,700;1,400;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.jsdelivr.net/gh/boscoxvi/npfphotosets/npfphotosetstyle.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_o5hd5vvqpoqiwwmi.css">

<!--CSS customization here. -->

<style type="text/css">

*{box-sizing:border-box}

.icon {
    speak:none;
    line-height:1;
    font-style:normal;
    font-weight:normal;
    font-variant:normal;
    text-transform:none;
    font-family:'feather' !important;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

body{
    margin:0;
    width:100%;
    height:100%; 
    overflow-x:hidden;
    word-break:break-word;
    color:{color:text};
    {block:ifFixedBackground}background-attachment:fixed;{/block:ifFixedBackground}
    {block:ifRepeatBackground}background-repeat:repeat;{/block:ifRepeatBackground}
    background-color:{color:background};
    background-image:url('{image:background image}');
    font:400 13px/1.6 {select:main font}, sans-serif;
}

body.active{overflow-y:hidden;}

:focus{
    border:0;
    outline:0;
}

a, a:hover{
    cursor:pointer;
    transition:ease .3s;
    text-decoration:none;
    -moz-transition:ease .3s;
    -webkit-transition:ease .3s;
}

a{color:{color:link}}

b, strong{font-weight:700;}

b, i, strike, u{color:{color:accent}}

small,sub,sup{font-size:.7em;}

big{font-size:1.1em;}

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

h1, h2, h3, h4 {
    margin:1em 0;
    font-weight:700;
    font-size:1.05em;
}

blockquote{
    margin:.5em 0;
    padding:2px 10px;
    position:relative;
    font-style:italic;
}

blockquote:first-of-type, pre:first-of-type{margin-top:0;}

blockquote:last-of-type, pre:last-of-type{margin-bottom:0;}

blockquote::before{
    top:0;
    left:0;
    width:2px;
    content:'';
    height:100%;
    position:absolute;
    background:linear-gradient(to bottom,{color:gradient color 1} 0%, {color:gradient color 2} 50%, {color:gradient color 3} 100%);
}

pre{
    padding:15px;
    margin:.5em 0;
    display:block;
    user-select:all;
    border-radius:4px;
    -ms-user-select:all;
    white-space:pre-wrap;
    -webkit-user-select:all;
    font-family:var(--Pre-font);
    color:{color:background};
    background:{color:accent};
}

code{
    margin:0;
    display:inline;
    padding:3px 10px;
    border-radius:4px;
    font-family:inherit;
    color:{color:background};
    background:{color:accent};
}

h1:first-of-type, h2:first-of-type, h3:first-of-type, h4:first-of-type {margin-top:0;}

ul,ol{
    padding:0;
    margin:0;
    list-style:none;
}

.post ul, .post ol:not(.notes):not(.chat), .terms ul{padding-left:1em!important;}

.post ul li::before, .post ol:not(.notes):not(.chat) li::before, .terms ul li::before{
    width:5px;
    height:5px;
    content:"";
    margin-right:1em;
    position:relative;
    display:inline-block;
    vertical-align:middle;
    background:rgba({RGBcolor:accent},.5);
}

hr {
    width:30%;
    height:1px;
    border:none;
    box-shadow:0;
    margin:1em auto;
    background:{color:borders};
}

a.read_more{
    font-weight:600;
    text-transform:lowercase;
}

body > .credits{
    right:20px;
    bottom:20px;
    position:fixed;
}

body > .credits svg{
    width:1.1em;
    height:1.1em;
    color:{color:accent};
}

/*tumblr controls*/
/*
.iframe-controls--desktop {
    opacity:.4;
    top:0!important;
    margin-top:80px;
    filter:invert(1);
    z-index:12!important;
    right:15px!important;
    transform:scale(0.55);
    position:fixed!important;
    -moz-transform:scale(0.55);
    transform-origin:right top;
    -webkit-transform:scale(0.55);
    -moz-transform-origin:right top;
    -webkit-transform-origin:right top;
}
*/

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

/*lightboxes*/

img{
    height:auto;
    display:block;
    max-width:100%;
}

iframe{display:block;}

.vignette, #vignette {opacity:0;}

.lightbox-image, #tumblr_lightbox img {
    box-shadow:none !important;
    border-radius:0 !important;
    max-width:none;
}

.tmblr-lightbox, #tumblr_lightbox {background:rgba({RGBcolor:background},.9) !important;}

.lightbox-caption, #tumblr_lightbox_caption {visibility:hidden;}

.npf_row figure{cursor:pointer;}

.npf_row figure:focus{outline:0;}
 
/*tooltip*/
 
#s-m-t-tooltip{
  z-index:9999999;
  max-width:300px;
  padding:.3em 1em;
  position:relative;
  border-radius:3px;
  margin:0 14px 7px 30px;
  -moz-border-radius:3px;
  text-transform:lowercase;
  -webkit-border-radius:3px;
  color:{color:sub text};
  background:{color:accent};
  box-shadow:2px 2px 0 rgba({RGBcolor:shadows},.06);
}

#s-m-t-tooltip::before{
    top:50%;
    width:0;
    height:0;
    left:-5px;
    content:'';
    position:absolute;
    border-style:solid;
    transform:translatey(-50%);
    border-width:5px 5px 5px 0;
    border-color:transparent {color:accent} transparent transparent;

}

/*scrollbar*/

::-webkit-scrollbar{
    width:11px;
    height:11px;
    padding:2px;
    background-color:{color:background};
}

::-webkit-scrollbar-thumb {
    border-radius:10px;
    background:linear-gradient(to bottom,{color:gradient color 1} 0%, {color:gradient color 2} 50%, {color:gradient color 3} 100%);
    background-clip:padding-box;
    border:2px solid transparent;
}

/*pagination*/

{block:ifinfinitescroll}
#pagination {display:none;}

#infscr-loading {display:none!important;}
{/block:ifinfinitescroll}

{block:ifNotInfiniteScroll}
#pagination{
    margin-top:100px;
    text-align:center;
}

#pagination a{
    margin:0 10px;
    font-size:.9em;
    padding:5px 15px;
    position:relative;
    display:inline-block;
    text-transform:uppercase;
    font-family:{select:sub font};
    background:{color:posts};
    box-shadow:0 4px 6px -2px rgba({RGBcolor:shadows},.09);
}
{/block:ifNotInfiniteScroll}

/*fixed menu*/

#top{
    top:0;
    left:50%;
    z-index:9;
    height:70px;
    display:flex;
    padding:20px;
    position:fixed;
    align-items:center;
    width:calc(300px + 600px);
    transform:translatex(-50%);
    justify-content:space-between;
    color:{color:top menu link};
    background:{color:top menu background};
    box-shadow:0 0 6px 0 rgba({RGBcolor:shadows},.03);
}

#top::before {
    left:0;
    bottom:0;
    height:5px;
    content:'';
    width:100%;
    position:absolute;
    background:linear-gradient(62deg,{color:gradient color 1} 0%, {color:gradient color 2} 50%, {color:gradient color 3} 100%);
}

.search{
    display:flex;
    align-items:center;
}

.search::before{
    content:'\e8bd';
    margin-right:20px;
    font-family:'feather';
}

.search input{
    border:0;
    font:inherit;
    background:transparent;
}

.search input::placeholder{
    color:transparent;
    transition:ease .3s;
    -moz-transition:ease .3s;
    -webkit-transition:ease .3s;
}

#top .search input{color:{color:top menu link};}

#top .search input::placeholder{color:rgba({RGBcolor:top menu link},.7);}

.search input:focus::-webkit-input-placeholder, .search input:focus::-moz-placeholder {
    color:transparent;
    transition:ease .3s;
    -moz-transition:ease .3s;
    -webkit-transition:ease .3s;
}

#top nav .icon{color:{color:top menu link};}

#top nav a{
    font-size:1.2em;
    margin-left:20px;
}

#top nav a:first-of-type{margin-left:0;}

#top .open, #top .credits{display:none;}

/*overlay search */

.big-search{
    left:0;
    top:65px;
    width:100vw;
    display:none;
    position:fixed;
    align-items:center;
    transition:ease .3s;
    justify-content:center;
    -moz-transition:ease .3s;
    height:calc(100vh - 65px);
    backdrop-filter:blur(3px);
    -webkit-transition:ease .3s;
    background:rgba({RGBcolor:posts},.7);
}


.big-search .search{
    z-index:2;
    padding:20px 50px;
    position:relative;
    background:{color:posts};
    box-shadow:0 0 10px 0 rgba({RGBcolor:shadows},.08);
}

.close{
    top:0;
    left:0;
    z-index:1;
    width:100%;
    height:100%;
    position:absolute;
}

.big-search .search input{color:{color:sub text};}

.big-search .search input::placeholder{color:rgba({RGBcolor:sub text},.7);}

/*sidebar*/

aside{
    top:0;
    z-index:9;
    width:300px;
    padding:25px;
    position:fixed;
    background:{color:posts};
}

aside section {
    position:sticky;
    top:calc(70px + 25px);
    position:-webkit-sticky;
    width:calc(300px - 50px);
}

.blog-title{
    display:flex;
    align-items:center;
    margin-bottom:40px;
}

.sidebar-icon{
    width:45px;
    height:45px;
    display:flex;
    align-items:center;
    border-radius:100%;
    justify-content:center;
    background:linear-gradient(62deg,{color:gradient color 1} 0%, {color:gradient color 2} 50%, {color:gradient color 3} 100%);
}

.sidebar-icon img{
    width:41px;
    height:41px;
    padding:5px;
    border-radius:100%;
    background:{color:posts};
}

.blog-title a{
    display:flex;
    margin-left:30px;
    padding:10px 25px;
    position:relative;
    align-items:center;
    max-width:calc(100% - 75px);
    border:1px solid {color:borders};
}

.blog-title a .icon{
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    text-shadow:1px 1px 1px rgba({RGBcolor:shadows},.1);
    background-image:linear-gradient(to right,{color:gradient color 1} 0%, {color:gradient color 2} 50%, {color:gradient color 3} 100%);
}

.blog-title a span{
    max-width:100%;
    overflow:hidden;
    margin-left:20px;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.blog-title a::after, aside nav a::after{    
    width:0;
    right:0;
    bottom:0;
    z-index:9;    
    height:1px;
    content:'';
    display:block;
    position:absolute;
    transition:ease .3s;
    -moz-transition:ease .3s;
    -webkit-transition:ease .3s;
    background-image:linear-gradient(to right,{color:gradient color 1} 0%, {color:gradient color 2} 50%, {color:gradient color 3} 100%);
}

.blog-title a:hover::after, aside nav a:hover::after{
    left:0;
    width:100%;
    transition:ease .3s;
    -moz-transition:ease .3s;
    -webkit-transition:ease .3s;
}

.blog-description{
    padding:20px;
    margin:0 -25px;
    font-style:italic;
    border-left:0!important;
    border-right:0!important;
    border:1px solid {color:borders};
}

aside nav{margin-top:40px;}

aside nav a{
    padding:5px 10px;
    position:relative;
    margin:0 10px 10px 0;
    display:inline-block;
    border:1px solid {color:borders};
}

/*posts*/

#entries{
    position:relative;
    margin:70px auto 0;
    width:calc(300px + 600px);
    backdrop-filter:blur(3px);
    min-height:calc(100vh - 65px);
    background:rgba({RGBcolor:posts},.1);
    box-shadow:0 0 6px 0 rgba({RGBcolor:shadows},.03);
}

#posts{
    width:600px;
    padding:50px;
    margin-left:300px;
}

.post {
    padding:20px;
    position:relative;
    margin-bottom:100px;
    background:{color:posts};
    box-shadow:0 4px 6px -2px rgba({RGBcolor:shadows},.03);
}

.post::after, .photo::after, .big-search .search::after, .link::after, .audio::after, #pagination a::after{
    left:0;
    bottom:0;
    width:100%;
    height:1px;
    content:'';
    position:absolute;
    background:linear-gradient(62deg,{color:gradient color 1} 0%, {color:gradient color 2} 50%, {color:gradient color 3} 100%);
}

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

.photo {
    overflow:hidden;
    position:relative;
    margin:-20px -20px 20px;
}

.photo + .captions, .audio + .captions, .link + .captions {margin-top:20px;}

.photo img, .tex > .tmblr-full img{
    width:100%;
    display:block;
}


/*titles*/
 
.post .title:first-of-type {
    padding:10px 30px;
    margin-bottom:25px;
    display:inline-block;
    color:{color:title};
    border:1px solid {color:borders};
}

.post.title a {color:{color:title};}
 
.post.title a:hover {color:{color:link};}
 
/*captions*/ 

.tex{
    padding:20px;
    border:1px solid {color:borders};
}    

.comment{
    list-style:none;
    margin-bottom:20px;
}

.comment:last-of-type {margin-bottom:0!important;}

.npf_photoset + p{margin-top:25px;}

.user {
    display:flex;
    font-size:.9em;
    font-weight:700;
    position:relative;
    align-items:center;
    margin-bottom:20px;
    text-transform:uppercase;
    font-family:{select:sub font};
}

.user .icon{
    width:35px;
    height:35px;
    display:flex;
    margin-right:20px;
    align-items:center;
    border-radius:100%;
    justify-content:center;
    background:linear-gradient(62deg,{color:gradient color 1} 0%, {color:gradient color 2} 50%, {color:gradient color 3} 100%);
}

.user .icon img{
    width:31px;
    height:31px;
    padding:3px;
    border-radius:100%;
    background:{color:posts};
}

/*quote*/

.quote{
    padding:0 20px 20px;
    border:1px solid {color:borders};
}

.source {
    max-width:95%;
    position:relative;
    padding:10px 20px;
    display:inline-block;
    border-top:0!important;
    margin:-1px -20px 20px;
    border-left:0!important;
    background:{color:posts};
    border:1px solid {color:borders};
}

.source::before{content:'\e867';}

.source::after{
    top:0;
    left:-1px;
    width:1px;
    content:'';
    height:100%;
    position:absolute;
    background:{color:posts};
}

/*link*/

.link{
    font-size:1.1em;
    padding:15px 30px;
    position:relative;
    border:1px solid {color:borders};
}

.link::before{content:'\e884';}

.link::before, .source::before{
    font-size:1.2em;
    margin-right:20px;
    display:inline-block;
    font-family:'feather';
    vertical-align:middle;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    text-shadow:1px 1px 1px rgba({RGBcolor:shadows},.1);
    background-image:linear-gradient(to right,{color:gradient color 1} 0%, {color:gradient color 2} 50%, {color:gradient color 3} 100%);
}

/*audio*/
 
.player {padding:20px;}

.player iframe{
    margin:auto;
    border-radius:100%;
    width:27px!important;
    height:27px!important;
    border:1px solid {color:borders};
}
 
.audio{
    padding:20px;
    position:relative;
    margin:-20px -20px 20px;
}

.audio_content{border:1px solid {color:borders};}
 
.audio_info {
    padding:20px;
    text-align:center;
    border-top:1px solid {color:borders};
}

.audio_info span{display:block;}
 
.audio .track {
    font-weight:700;
    color:{color:title};
}

/*asks*/

.question, .answer{border:1px solid {color:borders};}

.answer{margin-top:20px;}

.as{
    display:flex;
    padding:15px;
    position:relative;
    align-items:center;
    text-transform:lowercase;
    border-bottom:1px solid {color:borders};
}

.answer .as{flex-direction:row-reverse;}

.question .as::before, .answer .as::before{
    width:55px;
    display:flex;
    min-height:55px;
    align-items:center;
    font-family:'feather';
    justify-content:center;
}

.question .as::before{
    content:'\e88a';
    margin:-15px 15px -15px -15px;
    border-right:1px solid {color:borders};
}

.answer .as::before{
    content:'\e891';
    margin:-15px -15px -15px 15px;
    border-left:1px solid {color:borders};
}

.as .icon{
    width:25px;
    height:25px;
    display:flex;
    align-items:center;
    border-radius:100%;
    justify-content:center;
    background:linear-gradient(62deg,{color:gradient color 1} 0%, {color:gradient color 2} 50%, {color:gradient color 3} 100%);
}

.question .as .icon{margin-right:20px;}

.answer .as .icon{margin-left:20px;}

.as .icon img{
    width:21px;
    height:21px;
    padding:3px;
    border-radius:100%;
    background:{color:posts};
}

.as a{color:{color:sub text};}

.question .tex, .answer .tex{border:0!important;}

/*chat*/

.l {
    margin-bottom:15px;
    padding-bottom:15px;
    border-bottom:1px solid {color:borders};
}

.label {
    font-weight:bold;
    position:relative;
    margin-right:15px;
    display:inline-block;
    color:{color:accent};
}

.label::after{
    left:0;
    width:100%;
    height:3px;
    content:'';
    bottom:-17px;
    position:absolute;
    background:linear-gradient(62deg,{color:gradient color 1} 0%, {color:gradient color 2} 50%, {color:gradient color 3} 100%);
}

.l:first-of-type {margin-top:0;}

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

/*permalink and notes*/

.when {margin-top:20px;}

.when li{
    list-style:none;
    margin-right:10px;
    vertical-align:top;
    display:inline-block;
    text-transform:uppercase;
    font:700 .9em {select:sub font};
}

.when span{
    margin-left:10px;
    display:inline-block;
    vertical-align:middle;
}

.when a {
    height:35px;
    display:flex;
    overflow:hidden;
    padding:.3em 1em;
    position:relative;
    align-items: center;
    border:1px solid {color:borders};
}

.li{
    max-width:0;
    max-height:20px;
    overflow:hidden;
    transition:ease .05s;  
    margin-left:0!important;  
    -o-transition:ease .05s;
    -moz-transition:ease .05s; 
    -webkit-transition:ease .05s;
}

.when svg{
    opacity:.5;
    width:1em;
    height:1em;
    display:inline-block;
    vertical-align:middle;
}

.when .like .liked + svg {
    opacity:1;
    fill:{color:accent};
    color:{color:accent};
}

.liked ~ span.li{
    max-width:100px;
    margin-left:10px!important; 
}

.when .like .like_button {position:relative;}

.when .like .like_button iframe {
    right:0;
    bottom:0;
    z-index:2;
    opacity:0;
    top:-30px;
    left:-30px;
    position:absolute;
}

.tags {
    padding:15px;
    position:relative;
    margin:20px -20px -20px;
    border-top:1px solid {color:borders};
}

.tags::before {
    top:-6px;
    left:35px;
    content:'';
    position:absolute;
    border:6px solid {color:borders};
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    border-top:none;
}

.tags::after {
    top:-5px;
    left:36px;
    content:'';
    position:absolute;
    border:5px solid {color:posts};
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-top:none;
}

.tags a {
    margin:0 5px;
    display:inline-block;
    vertical-align:middle;
}    

.tags a::before{
    content:'#';
    color:{color:accent};
}

ol.notes {
    margin:0px;
    border-right:0;
    list-style-type:none;
}

ol.notes li.note {margin:30px 0;}

ol.notes li.note:first-of-type {margin-top:0;}
ol.notes li.note:last-of-type {margin-bottom:0;}

li.note a.avatar_frame::after{
    left:20px;
    width:15px;
    height:15px;
    display:flex;
    font-size:.7em;
    margin-top:-15px;
    position:absolute;
    align-items:center;
    border-radius:100%;
    font-family:'feather';
    justify-content:center;
    color:{color:posts};
}

li.note.reblog a.avatar_frame::after{
    content:'\e8b6';
    background:{color:gradient color 1};
}

li.note.like a.avatar_frame::after{
    content:'\e879';
    background:{color:gradient color 2};
}

li.note.with_commentary a.avatar_frame::after, li.note.reply a.avatar_frame::after{
    content:'\e890';
    background:{color:gradient color 3};
}

ol.notes li.note img.avatar {
    width:35px;
    height:35px;
    border-radius:100%;
}

ol.notes li.note.reblog img.avatar{border:4px solid {color:gradient color 1}}
ol.notes li.note.like img.avatar{border:4px solid {color:gradient color 2}}
ol.notes li.note.with_commentary img.avatar, ol.notes li.note.reply img.avatar{border:4px solid {color:gradient color 3}}

ol.notes .clear{clear:both;}

a.avatar_frame {
    position:relative;
    margin-right:25px;
    display:inline-block;
    vertical-align:middle;
}

ol.notes blockquote{margin:1em 2em!important;}

a.more_notes_link {
    display:block;
    text-align:center;
    color:{color:title};
}

@media (max-width:1023px){
    #entries, #top{width:100vw;}
    
    #top .search, .tmblr-iframe, body > .credits{display:none;}
    
    #top{
        left:0;
        transform:translate(0);
        justify-content:center;
    }
    
    aside{
        width:100vw;
        display:flex;
        padding:50px;
        position:relative;
        align-items:center;
        justify-content:center;
        box-shadow:0 4px 6px -2px rgba({RGBcolor:shadows},.03);
    }
    
    aside section{
        top:0;
        width:100%;
        display:flex;
        position:relative;
        align-items:center;
        flex-direction:column;
    }
    
    .blog-title{
        display:flex;
        align-items:center;
        flex-direction:column;
    }
    
    .blog-title a{
        max-width:initial;
        margin:20px auto 0;
    }
    
    .blog-title .sidebar-icon{
        width:55px;
        height:55px;
    }
    
    .blog-title .sidebar-icon img{
        width:51px;
        height:51px;
    }
    
    #posts{
        margin:0;
        width:100vw;
        padding:25px;
    }
    
    #top .open, #top .credits{display:initial;}
    
    .big-search{
        opacity:0;
        display:flex;
        z-index:-9999;
        visibility:hidden;
        transition:ease .3s;
        -moz-transition:ease .3s;
        -webkit-transition:ease .3s;
    }
    
    .big-search.active{
        opacity:1;
        z-index:9999;
        visibility:visible;
        transition:ease .3s;
        -moz-transition:ease .3s;
        -webkit-transition:ease .3s;
    }
}

@media (min-width:1024px){
    aside{
        height:100%;
        box-shadow:4px 0 6px -2px rgba({RGBcolor:shadows},.03);
    }
    
    .big-search{display:none;}
    
    body.active{overflow-y:auto;}
}

{CustomCSS}

</style>

</head>

<body>

<div id="top">
    <div class="search">
        <form action="/search" method="get">
            <input type="text" name="q" value="{SearchQuery}" placeholder="search"/>
        </form>
    </div>
    
    <nav>
        <a href="{blogurl}" title="home">
            <i class="icon icon-home"></i>
        </a>
        
        <a href="/ask" title="message">
            <i class="icon icon-mail"></i>
        </a>
        
        <a href="/archive" title="grid">
            <i class="icon icon-grid"></i>
        </a>
        
        <a class="open" title="search">
            <i class="icon icon-search"></i>
        </a>
        
        <a href="//tumblr.com/follow/{name}" title="follow">
            <i class="icon icon-user"></i>
        </a>
        
        <a href="//kosmique.tumblr.com" class="credits"><i class="icon icon-star"></i></a>
    </nav>
</div>

<div class="big-search">
    <div class="close"></div>
    <div class="search">
        <form action="/search" method="get">
            <input type="text" name="q" value="{SearchQuery}" placeholder="search"/>
        </form>
    </div>
</div>

<section id="entries">

<aside> 
    <section>
        <div class="blog-title">
            <div class="sidebar-icon"><img src="{portraiturl-64}"></div>
            <a href="{blogurl}">
                <i class="icon icon-cloud"></i>
                <span>{title}</span>
            </a>
        </div>
        
        {block:description}<div class="blog-description">{description}</div>{/block:description}
        
        <nav class="menu">
            <a href="{text:link one url}">
                {text:link one title}
            </a>
            
            <a href="{text:link two url}">
                {text:link two title}
            </a>
            
            <a href="{text:link three url}">
                {text:link three title}
            </a>
            
            <a href="{text:link four url}">
                {text:link four title}
            </a>
            
            <a href="{text:link five url}">
                {text:link five title}
            </a>
        </nav>
    </section>
</aside>

<div id="posts">

{block:posts}
    
    <article class="post {block:caption}captioned{/block:caption} {block:PinnedPostLabel}pinned{/block:PinnedPostLabel}" id="{postid}">

{block:Quote}
    <div class="quote">
        {block:Source}<div class="source">{source}</div>{/block:Source}
        <div class="q">{quote}</div>
    </div>
{/block:Quote}

{block:Text}
{block:Title}<div class="title">{title}</div>{/block:Title}
{block:RebloggedFrom}
    <div class="captions">
        {block:Reblogs}
            <li class="comment">
                {block:IsActive}
                    <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">
                        <div class="icon">
                            <img src="{portraiturl-64}"/>                                            </div>
                        {username}
                    </a>
                {/block:IsActive}
                
                {block:IsDeactivated}
                    <span {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user deactivated" target="_blank">
                        <div class="icon">
                            <img src="{portraiturl-64}"/>                                            </div>
                        {username}
                    </span>
                {block:IsDeactivated}
                <div class="tex">{body}</div>
            </li>
        {/block:Reblogs}
    </div>
{/block:RebloggedFrom}
{block:NotReblog}
    <div class="captions">
        <li class="comment">
            <div class="tex">{body}</div>
        </li>
    </div>
{/block:NotReblog}
{/block:Text}

{block:Link}
<div class="link"><a href="{URL}">{name}</a></div>
{block:Description}
    {block:NotReblog}
        <div class="captions">
            <li class="comment">
                <div class="tex">{description}</div>
            </li>
        </div>
    {/block:NotReblog}
{/block:Description}
{block:RebloggedFrom}
    <div class="captions">
        {block:Reblogs}
            <li class="comment">
                {block:IsActive}
                    <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">
                        <div class="icon">
                            <img src="{portraiturl-64}"/>                                            </div>
                        {username}
                    </a>
                {/block:IsActive}
                
                {block:IsDeactivated}
                    <span {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user deactivated" target="_blank">
                        <div class="icon">
                            <img src="{portraiturl-64}"/>                                            </div>
                        {username}
                    </span>
                {block:IsDeactivated}
                <div class="tex">{body}</div>
            </li>
        {/block:Reblogs}
    </div>
{/block:RebloggedFrom}
{/block:Link}


{block:Chat}
{block:Title}<div class="title">{title}</div>{/block:Title}
<ol class="chat">
    {block:lines}
        <li class="l {Alt}">
            {block:label}<span class="label">{label}</span>{/block:label}             {line}
        </li>
    {/block:lines}
</ol>
{/block:Chat}

{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}"></a>{linkclosetag}</div>{/block:Photo}

{block:Photoset}<div class="photo"><div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div></div>{/block:Photoset}

{block:Video}<div class="photo video">{video-500}</div>{/block:Video}

{block:Audio}
    {block:audioplayer}
        <div class="audio">
            <div class="audio_content">
                <div class="player">
                    {audioplayerwhite}
                </div>
                <div class="audio_info">
                    {block:AlbumArt}<img src="{AlbumArtURL}" class="cover">{/block:AlbumArt}
                    {block:trackname}<span class="track">{trackname}</span>{/block:trackname}
                    {block:artist}<span class="artist">{artist}</span>{/block:artist}
                </div>
            </div>
        </div>
    {/block:audioplayer}
{/block:Audio}

{block:caption}
    <div class="captions">
        {block:Reblogs}
            <li class="comment">
                {block:IsActive}
                    <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">
                        <div class="icon">
                            <img src="{portraiturl-64}"/>
                        </div>
                        {username}
                    </a>
                {/block:IsActive}
                
                {block:IsDeactivated}
                    <span {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user deactivated" target="_blank">
                        <div class="icon">
                            <img src="{portraiturl-64}"/>                                            </div>
                        {username}
                    </span>
                {block:IsDeactivated}
                <div class="tex">{body}</div>
            </li>
        {/block:Reblogs}
        {block:NotReblog}
            <li class="comment">
                <div class="tex">{caption}</div>
            </li>
        {/block:NotReblog}
    </div>
{/block:caption}

{block:Answer}
<div class="question">
    <div class="as">
        <div class="icon"><img src="{askerportraiturl-64}"></div>
        {asker}
    </div>
    <div class="tex">{question}</div>
</div>
{block:Answerer}
    <div class="answer">
        <div class="as">
            <div class="icon"><img src="{answererportraiturl-64}"></div>
            {answerer}
        </div>
        <div class="tex">{answer}</div>
    </div>
{/block:Answerer}
{block:NotReblog}
    <div class="answer">
        <div class="as">
            <div class="icon"><img src="{portraiturl-64}"></div>
            {name}
        </div>
        <div class="tex">{replies}</div>
    </div>
{/block:NotReblog}
{block:RebloggedFrom}
    {block:Reblogs}
        <div class="answer">
            <div class="as">
                <div class="icon"><img src="{portraiturl-64}"></div>
                <a {block:haspermalink}href="{permalink}"{/block:haspermalink} target="_blank">{username}</a>
            </div>
            <div class="tex">{body}</div>
        </div>
    {/block:Reblogs}
{/block:RebloggedFrom}
{/block:Answer}

{block:date}
    
    <div class="when">
        {block:indexpage}
            {block:PinnedPostLabel} 
                <li>
                    <a href="{permalink}" title="{PinnedPostLabel}">
                        <i data-feather="map-pin"></i>
                    </a>
                </li>
            {/block:PinnedPostLabel}
        {/block:indexpage}

        <li>
            <a href="{permalink}" title="{block:text}text{/block:text}{block:quote}quote{/block:quote}{block:chat}chat{/block:chat}{block:link}link{/block:link}{block:answer}answer{/block:answer}{block:photo}photo{/block:photo}{block:photoset}photoset{/block:photoset}{block:audio}audio{/block:audio}{block:video}video{/block:video}">
                <i data-feather="{block:text}menu{/block:text}{block:quote}italic{/block:quote}{block:chat}message-square{/block:chat}{block:link}link{/block:link}{block:answer}help-circle{/block:answer}{block:photo}image{/block:photo}{block:photoset}layers{/block:photoset}{block:audio}volume-2{/block:audio}{block:video}video{/block:video}"></i>
            </a>
        </li>
        
        <li>
            <a href="#" class="like">
                {LikeButton size="100"}
                <i data-feather="heart">
                </i>
                <span class="li">liked</span>
            </a>
        </li>
        
        {block:NoteCount}
        <li>
            <a href="{permalink}">
                <i data-feather="message-circle"></i>
                <span class="notecount">{notecount}</span>
            </a>
        </li>
        {/block:NoteCount}
        
        <li>
            <a href="{ReblogURL}" target="_blank">
                <i data-feather="repeat"></i>
            </a>
        </li>
        
    </div>
            
    {block:hastags}
        <div class="tags">
            {block:Tags}<a href="{TagUrl}">{Tag}</a>{/block:Tags}
        </div>
    {/block:hasTags}
{/block:date}

</article>

{block:permalinkpage}

{block:PostNotes}
<article class="post pagenotes">
    {PostNotes-64}
</article>
{/block:PostNotes}

{/block:permalinkpage}

{/block:Posts}

{block:Pagination}
    {block:ifNotInfiniteScroll}
        <footer id="pagination">
            {block:PreviousPage}<a href="{PreviousPage}">backwards</a>{/block:PreviousPage}
            {block:NextPage}<a href="{NextPage}">forwards</a>{/block:NextPage}
        </footer>
    {/block:ifNotInfiniteScroll}
{/block:Pagination}
</div>

{block:Pagination}
    {block:ifInfiniteScroll}
        <footer id="pagination">
            {block:NextPage}<a href="{NextPage}"></a>{/block:NextPage}
        </footer>
    {/block:ifInfiniteScroll}
{/block:Pagination}
</section>

<a href="//kosmique.tumblr.com" class="credits"><i data-feather="star"></i></a>

{block:indexpage}{block:ifinfinitescroll}<script src="//static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>{/block:ifinfinitescroll}{/block:indexpage}

<script>
$(document).ready(function(){
    var $container = $('#posts');
    $('.photo-slideshow').pxuPhotoset({
        lightbox: true,
        rounded: false,
        gutter: '1px',
        borderRadius: '0px',
        photoset: '.photo-slideshow',
        photoWrap: '.photo-data',
        photo: '.pxu-photo'
    });
    $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');
        }
    });
    $('iframe.tumblr_audio_player').load(function() {
        $(this).contents().find('head').append('<style type="text/css">' +
        '.audio-player { background: {color:posts}; color: {color:sub text} !important;}' +
        '</style>');
    });
    feather.replace();
    flexibleFrames($(".video"));
    $("[title]").style_my_tooltips({ 
		tip_follows_cursor:true,
		tip_delay_time:100,
		tip_fade_speed:100
	});
    var npfOptions = {
        rowClass:"npf_row",
        imageContainerClass:"tmblr-full",
        generatedPhotosetContainerClass:"npf_photoset",
        imageClass:"npf_image",
        includeCommonPhotosets: true,
        useTumblrLightbox: true,
        insertGalleryIndicator: false,
        galleryIndicatorClass: "npf_gallery_indicator",
        galleryIndicatorContent: "<img src='image_url'>",
        photosetMargins:"1"
    }
    npfPhotosets(".post", npfOptions);
    $('a[href*="t.umblr.com/redirect"]').each(function(){
        var originalURL = $(this).attr("href").split("?z=")[1].split("&t=")[0];
        var replaceURL = decodeURIComponent(originalURL);
        $(this).attr("href", replaceURL);
    });
    $('.captions').each(function() {
        var $this = $(this);
        if($this.html().replace(/\s|&nbsp;/g, '').length == 0)
            $this.remove();
    });
    $('.open').click(function(){$('.big-search, body').toggleClass('active');});
    $('.close').click(function(){$('.big-search, body').removeClass('active');});
{block:indexpage}     
{block:ifinfinitescroll}
    $container.infinitescroll({
            itemSelector: 'article',
            navSelector: 'footer',
            nextSelector: 'footer a',
            loadingImg: '',
            loadingText: '<em></em>',
            bufferPx: 100
    },
    function( newElements ) {
        var $newElems = $( newElements );  
        var $newElemsIDs = $newElems.map(function(){
            return this.id;
        }).get();
        Tumblr.LikeButton.get_status_by_post_ids($newElemsIDs);
        $newElems.find('.photo-slideshow').pxuPhotoset({
            lightbox: true,
            rounded: false,
            gutter: '1px',
            borderRadius: '0px',
            photoset: '.photo-slideshow',
            photoWrap: '.photo-data',
            photo: '.pxu-photo'
        });
        $('iframe.tumblr_audio_player').load(function() {
            $(this).contents().find('head').append('<style type="text/css">' +
            '.audio-player { background: {color:posts}; color: {color:sub text} !important;}' +
            '</style>');
        });
        feather.replace();
        $newElems.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');
            }
        });
        flexibleFrames($(".video"));
        npfPhotosets(".post", npfOptions);
        $newElems.find('.captions').each(function() {
            var $this = $(this);
            if($this.html().replace(/\s|&nbsp;/g, '').length == 0)
                $this.remove();
        });
    });
{/block:ifinfinitescroll}
{/block:indexpage}
});

</script>
{block:ContentSource}
<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
{/block:SourceLogo}
{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
{/block:ContentSource}
</body></html>