Create a new version of paste:

<!--

    by kosmique.tumblr.com
	
	full credit 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="if:Infinite Scroll" content="1"/>
<meta name="if:Manual Load" content=""/>

<meta name="text:Link one title" content="link title"/>
<meta name="text:Link one icon" content="cloud"/>
<meta name="text:Link one URL" content="/"/>

<meta name="text:Link two title" content="link title"/>
<meta name="text:Link two icon" content="sun"/>
<meta name="text:Link two URL" content="/"/>

<meta name="text:Link three title" content="link title"/>
<meta name="text:Link three icon" content="moon"/>
<meta name="text:Link three URL" content="/"/>

<meta name="text:Link four title" content="link title"/>
<meta name="text:Link four icon" content="star"/>
<meta name="text:Link four URL" content="/"/>

<meta name="color:Background" content="#f5f5f5"/>
<meta name="color:Accent" content="#ffbbcb"/>
<meta name="color:Sub color" content="#a9c9ff"/>
<meta name="color:Text" content="#646464"/>
<meta name="color:Sub text" content="#ffffff"/>
<meta name="color:Link" content="#000000"/>
<meta name="color:Title" content="#000000"/>
<meta name="color:Borders" content="#f2f2f2"/>
<meta name="color:Scrollbar" content="#000000"/>
<meta name="color:Shadows" content="#000000"/>
<meta name="color:Posts" content="#ffffff"/>

<!--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://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.js"></script>

<link href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,200;0,400;0,700;1,400;1,700&family=Merriweather:wght@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}

:root{
    --Main-font:'barlow';
    --Sub-font:'merriweather';
}

.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};
    background-color:{color:background};
    font:400 13px/1.6 var(--Main-font), sans-serif;
}

body::before {
    top:0;
    left:0;
    z-index:-1;
    content:'';
    width:100vw;
    height:100px;
    position:fixed;
    background-color:{color:accent};
    background-image:linear-gradient(240deg, {color:sub color} 0%, {color:accent} 100%);
}

: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;
    font-style:italic;
    border-left:2px solid {color:sub color};
}

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

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

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){padding-left:1em!important;}

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

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

a.read_more{
    color:{color:sub text};
    padding:5px 10px;
    background:{color:accent};
    border-radius:4px;
    display:inline-block;
    text-transform:uppercase;
}

.credits{
    top:20px;
    right:20px;
    z-index:99;
    position:fixed;
    color:{color:sub text};
}

.credits svg{
    width:1em;
    height:1em;
}

/*tumblr controls*/

iframe.iframe-controls--desktop {
    opacity:.4;
    top:auto;
    bottom:0!important;
    margin-bottom:20px;
    filter:invert(1);
    z-index:12!important;
    left:15px!important;
    transform:scale(0.55);
    position:fixed!important;
    -moz-transform:scale(0.55);
    transform-origin:left bottom;
    -webkit-transform:scale(0.55);
    -moz-transform-origin:left bottom;
    -webkit-transform-origin:left bottom;
}


.tmblr-iframe--follow-teaser, .tmblr-iframe--app-cta-button{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:3px 15px;
  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};
  border:3px solid {color:posts};
}

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

}

/*scrollbar*/

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

::-webkit-scrollbar-thumb {
    border-radius:10px;
    background:{color:scrollbar};
    background-clip:padding-box;
    border:4px solid transparent;
}

/*selection*/

::selection{background:{color:background};}

::-moz-selection{background:{color:background};}

/*pagination*/

{block:ifInfiniteScroll}#pagination {display:none;}{/block:ifInfiniteScroll}

{block:ifNotInfiniteScroll}
#pagination {
    display:flex;
    margin:50px auto;
    justify-content:center;
    width:calc(500px + 350px);
}

#pagination a, #pagination span{
    width:30px;
    height:30px;
    display:flex;
    margin:0 10px;
    border-radius:4px;
    align-items:center;
    justify-content:center;
    color:{color:sub text};
    box-shadow:1px 1px 1px rgba({RGBcolor:shadows},.05);
}

#pagination a{background-image:linear-gradient(240deg, {color:sub color} 0%, {color:accent} 100%);}

#pagination span{background:{color:accent};}

#pagination svg{
    width:1em;
    height:1em;
}

{/block:ifNotInfiniteScroll}

.manual{
    display:flex;
    margin:50px auto;
    justify-content:center;
    width:calc(500px + 350px);
}

.load-more{
    padding:10px 20px;
    border-radius:5px;
    display:inline-block;
    text-transform:uppercase;
    color:{color:sub text};
    background-image:linear-gradient(240deg, {color:sub color} 0%, {color:accent} 100%);
}

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

/*menu*/

#menu{
    left:10px;
    bottom:10px;
    z-index:99;
    height:50px;
    display:none;
    position:fixed;
    border-radius:5px;
    align-items:center;
    width:calc(100vw - 20px);
    justify-content:space-evenly;
    background-color:{color:accent};
    box-shadow:2px 2px 3px -2px rgba({RGBcolor:shadows},.1);
    background-image:linear-gradient(240deg, {color:sub color} 0%, {color:accent} 100%);
}

.r-menu{
    top:0;
    opacity:0;
    z-index:10;
    width:100vw;
    height:100vh;
    padding:50px;
    position:fixed;
    overflow-y:overlay;
    border-top:5px solid;
    border-image-slice:1;
    transition:ease-out .2s;
    transform:translatex(100%);
    background:{color:posts};
    -moz-transition:ease-out .2s;
    -webkit-transition:ease-out .2s;
    border-image-source:linear-gradient(240deg, {color:sub color} 0%, {color:accent} 100%);
}

.r-menu > *{opacity:0;}

.r-menu.active > *{
    opacity:1;
    transition-delay:.4s;
}

.r-menu.active{
    opacity:1;
    transform:translatex(0);
}

.r-menu .blog-title{margin-bottom:50px;}

.r-menu nav a{
    width:100%;
    padding:10px;
    display:flex;
    font-weight:700;
    border-radius:3px;
    align-items:center;
    margin-bottom:10px;
    color:{color:text};
    background:rgba({RGBcolor:borders},.3);
    border:1px solid {color:borders};
}

.r-menu nav{
    padding:10px;
    display:flex;
    flex-wrap:wrap;
    margin-top:50px;
    align-items:center;
    flex-direction:column;
    justify-content:space-between;
}

.r-menu svg{margin-right:20px;}

/*sidebar*/

aside{
    z-index:9;
    width:250px;
    position:fixed;
    border-radius:5px;
    overflow-x:hidden;
    box-shadow:2px 2px 3px -2px rgba({RGBcolor:shadows},.1);
}

.sidebar{
    display:flex;
    align-items:center;
    background:{color:posts};
}

.side-one, .side-two{
    flex:auto;
    min-width:250px;
    transition:ease .3s;
    -moz-transition:ease .3s;
    -webkit-transition:ease .3s;
}

.side-two{
    padding:5px;
    display:flex;
    flex-wrap:wrap;
    align-self:normal;
    justify-content:space-between;
}

.side-two a{
    display:flex;
    font-weight:700;
    border-radius:3px;
    align-items:center;
    flex-direction:column;
    color:{color:text};
    justify-content:center;
    width:calc(250px/2 - 7px);
    height:calc(250px/2 - 35px);
    background:rgba({RGBcolor:borders},.3);
    border:1px solid {color:borders};
}

.side-two a:nth-of-type(2), .side-two a:first-of-type{margin-bottom:2.5px}

.side-two a:nth-of-type(3), .side-two a:last-of-type{margin-top:2.5px}

.side-two a span{
    display:block;
    max-width:80%;
    overflow:hidden;
    margin-top:10px;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.side-two a:hover svg, .r-menu nav a:hover svg{
    fill:{color:accent};
    color:{color:accent};
    filter:drop-shadow(1px 1px 1px);
}

.side-one.active, .side-two.active{transform:translatex(-250px);}

.menu{
    height:50px;
    display:flex;
    align-items:center;
    border-radius:5px 5px 0 0;
    border-bottom:0!important;
    justify-content:space-evenly;
    border:5px solid {color:posts};
}

#menu a, .menu a{color:{color:sub text};}

#menu svg, .menu svg, .side-two svg, .r-menu svg{
    width:1.1em;
    height:1.1em;
    display:block;
    transition:ease .2s;
    -moz-transition:ease .2s;
    -webkit-transition:ease .2s;
}

.nav{position:relative;}

.nav::before{
    opacity:0;
    width:100%;
    height:5px;
    content:'';
    bottom:-16px;
    position:absolute;
    border-radius:15px;
    transition:ease .3s;
    -moz-transition:ease .3s;
    transform:translatex(10px);
    -webkit-transition:ease .3s;
    background-color:{color:accent};
    background-image:linear-gradient(240deg, {color:sub color} 0%, {color:accent} 100%);
}

.nav.active::before{
    opacity:1;
    transform:translatex(0);
}

.blog-title{
    padding:10px;
    display:flex;
    font-size:.75em;
    font-weight:700;
    align-items:center;
    letter-spacing:2px;
    text-transform:uppercase;
    color:{color:sub color};
    font-family:var(--Sub-font);
}

.blog-title span {
    max-width:90%;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

#top img, .blog-title img{
    width:25px;
    height:25px;
    margin-right:10px;
    border-radius:100%;
    border-top:3px solid {color:accent};
    border-bottom:3px solid {color:accent};
    border-left:3px solid {color:sub color};
    border-right:3px solid {color:sub color};
}

.blog-description{padding:0 10px 10px;}

.blog-description span, .search form{
    padding:10px;
    display:block;
    border-radius:5px;
    background:{color:background};
    border:1px solid {color:borders};
}

.blog-description span{
    max-height:80px;
    overflow:hidden;
    line-height:1.65;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
}

.search{
    padding:0 10px 10px;
    border-radius:0 0 5px 5px;
}

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

input:focus::-webkit-input-placeholder {color:transparent;}
input:focus::-moz-placeholder {color:transparent;}

/*posts*/

#entries{
    margin:50px auto;
    position:relative;
    width:calc(500px + 350px);
}

.post {
    width:500px;
    padding:20px;
    overflow:hidden;
    border-radius:5px;
    margin:0 0 120px 350px;
    background:{color:posts};
    box-shadow:2px 2px 3px -2px rgba({RGBcolor:shadows},.1);
}

.pin{
    float:right;
    display:flex;
    padding:10px 15px;
    align-items:flex-start;
    margin:-20px -20px 20px;
    text-transform:uppercase;
    color:{color:sub text};
    background:{color:accent};
    border-bottom-left-radius:5px;
}

.pin + *:not(.title), .title + *:not(.pin), .as + *{clear:both;}

.pin svg{
    width:1.3em;
    height:1.3em;
    margin-right:10px;
    fill:{color:sub text};
}

.photo {
    overflow:hidden;
    position:relative;
    border-radius:5px;
}

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

.tex > .tmblr-full img, .npf_photoset{
    overflow:hidden;
    border-radius:10px;
}

/*titles*/
 
.post .title:first-of-type {
    float:left;
    max-width:80%;
    overflow:hidden;
    padding:10px 15px;
    white-space:nowrap;
    text-overflow:ellipsis;
    margin:-20px -20px 20px;
    text-transform:uppercase;
    color:{color:sub text};
    border-bottom-right-radius:5px;
    background:{color:sub color};
}

.post.title a {color:rgb(var(--Title));}
 
.post.title a:hover {color:{color:link};}
 
/*captions*/ 

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

.comment {
    padding:20px;
    margin:20px 0;
    list-style:none;
    border-radius:5px;
    background:rgba({RGBcolor:borders},.5);
}    

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

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

.user {
    font-size:1.1em;
    font-weight:700;
    padding:5px 10px;
    border-radius:5px;
    margin-bottom:1.5em;
    display:inline-block;
    background:{color:posts};
    border:1px solid {color:borders};
}

.icon{display:none}

/*quote*/
.q{
    display:flex;
    align-items:center;
    flex-direction:column;
}

.quote{
    padding:15px;
    font-size:1.1em;
    border:1px solid;
    border-radius:5px;
    border-top-color:{color:accent};
    border-left-color:{color:accent};
    border-right-color:{color:sub color};
    border-bottom-color:{color:sub color};
}

.source {
    margin:20px auto;
    padding:10px 15px;
    position:relative;
    display:inline-block;
}

.source::before{
    top:0;
    left:0;
    width:50%;
    content:'';
    height:100%;
    position:absolute;
    border-right:0!important;
    border-radius:5px 0 0 5px;
    border:1px solid {color:accent};
}

.source::after{
    top:0;
    right:0;
    width:50%;
    content:'';
    height:100%;
    position:absolute;
    border-left:0!important;
    border-radius:0 5px 5px 0;
    border:1px solid {color:sub color};
}

.left-arrow, .right-arrow{
    width:0;
    height:0;
    top:-7px;
    position:absolute;
    border-style:solid;
}

.left-arrow{
    left:calc(50% - 7px);
    border-width:7px 7px 0px 0;
    border-color:transparent {color:accent} transparent transparent;
}

.right-arrow{
    left:50%;
    border-width:7px 0 0px 7px;
    border-color: transparent transparent transparent {color:sub color};
}

/*link*/

.link{
    padding:15px;
    font-size:1.3em;
    font-weight:600;
    border-radius:5px;
    border:1px solid {color:borders};
}

/*audio*/
 
.player {
    width:100%;
    display:flex;
    padding:20px;
    justify-content:center;
}

.player iframe, .player span{
    width:30px;
    height:30px;
    display:flex;
    margin:0 10px;
    border-radius:4px;
    align-items:center;
    justify-content:center;
    border:1px solid {color:borders};
}

.player svg{
    width:1em;
    height:1em;
}

.audio {
    display:flex;
    flex-wrap:wrap;
    overflow:hidden;
    position:relative;
    border-radius:5px;
    border:1px solid {color:borders};
}
 
.audio_info {
    display:flex;
    padding:10px 20px;
    flex-direction:column;
    justify-content:center;
    text-transform:uppercase;
    color:{color:sub text};
    min-width:calc(100% - 100px);
    background-image:linear-gradient(240deg, {color:sub color} 0%, {color:accent} 100%);
}
 
.audio_info span {  
    display:block;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;  
}

.audio-cover{
    width:100px;
    height:100px;
}
 
.audio .artist {font-size:.85em}

/*asks*/

.question{
    padding:20px;
    overflow:hidden;
    border-radius:5px;
    margin-bottom:20px;
    border:1px solid {color:sub color};
}

.answer{
    padding:20px;
    overflow:hidden;
    border-radius:5px;
    margin-bottom:20px;
    border:1px solid {color:accent};
}

.as{
    padding:10px;
    display:flex;
    align-items:center;
    margin:-20px -20px 20px;
    text-transform:uppercase;
    color:{color:sub text};
}

.question .as{
    float:left;
    border-radius:0 0 5px 0;
    background:{color:sub color};
}

.answer .as{
    float:right;
    border-radius:0 0 0 5px;
    background:{color:accent};
}

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

.question .icon, .answer .icon{
    width:1.1em;
    height:1.1em;
    display:block;
    color:{color:sub text};
}

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

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

.question .tex, .answer .tex{
    padding:20px;
    border-radius:5px;
}

.question .tex{background:rgba({RGBcolor:Sub color},.4);}

.answer .tex{background:rgba({RGBcolor:accent},.4);}

/*chat*/

.chat{
    display:flex;
    margin-bottom:20px;
    flex-direction:column;
}

.l {
    display:flex;
    max-width:80%;
    margin-bottom:15px;
    flex-flow:column-reverse;
}

.l.even {
    text-align:right;
    align-self:flex-end;
}

.label {
    font-size:.85em;
    margin:1em .5em .5em;
    display:inline-block;
}

.line{
    padding:10px 15px;
    position:relative;
    border-radius:5px;
    color:{color:sub text};
}

.l.odd .line::before{
    width:0;
    height:0;
    left:10px;
    content:'';
    bottom:-5px;
    position:absolute;
    border-style:solid;
    border-width:5px 5px 0 5px;
    border-color:{color:accent} transparent transparent transparent;
}

.l.even .line::before{
    width:0;
    height:0;
    right:10px;
    content:'';
    bottom:-5px;
    position:absolute;
    border-style:solid;
    border-width:5px 5px 0 5px;
    border-color:{color:sub color} transparent transparent transparent;
}

.l.odd .line{background:{color:accent};}

.l.even .line{background:{color:sub color};}

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

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

/*permalink and notes*/

.photo + .when, .photo + .tags, .audio + .when, .audio + .tags{margin-top:20px;}

.when {
    padding:20px;
    margin:0 -20px -20px;
    text-transform:uppercase;
    border-radius:0 0 5px 5px;
    color:{color:sub text};
    background:{color:sub color};
}

.when a{
    display:flex;
    overflow:hidden;
    position:relative;
    align-items:center;
    color:{color:sub text};
}

a.perma {
}

.when svg, .tags svg{
    width:.85em;
    height:.85em;
    margin-right:10px;
}

.when li{
    display:flex;
    margin-top:1em;
    align-items:center;
}

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

.when .like{margin-right:20px;}

.liked ~ svg{
    color:{color:accent};
    filter:drop-shadow(1px 1px 1px);
}

.liked ~ span::after{content:"d"!important;}

.when .like span::after{content:"?"}

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

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

.tags {
    display:flex;
    padding:20px;
	flex-wrap:wrap;
    margin:0 -20px 0;
    align-items:center;
    text-transform:uppercase;
    color:{color:sub text};
    background:{color:accent};
}

.tags a {
    margin:0 5px;
    display:inline-block;
    color:{color:sub text};
}    

.pagenotes .title{
    display:flex;
    align-items:center;
}

.pagenotes .title svg{
    width:1em;
    height:1em;
    margin-right:20px;
}

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

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

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

li.note::before{
    float:right;
    margin-left:20px;
    font-family:'feather';
    vertical-align:middle;
    color:{color:sub color};
    filter:drop-shadow(1px 1px 1px);
}

li.note.reblog::before{content:'\e8b6';}
li.note.like::before{content:'\e879';}
li.note.with_commentary::before, li.note.reply::before{content:'\e890';}

ol.notes .clear{clear:both;}

a.avatar_frame {display:none}

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

a.more_notes_link {
    display:block;
    text-align:center;
    color:rgb(var(--Title));
}

@media (max-width:900px){
    aside, body::before,.tmblr-iframe, .audio .audio-cover{display:none;}

	.audio_info{width:100%}
    
    #top, #menu{display:flex;}
    
    #entries{
        width:90vw;
        margin:5vw auto;
    }
    
    #pagination, .manual{
        width:90vw;
        margin-bottom:150px;
    }
    
    .post{
        width:100%;
        margin:0 0 150px;
    }
    
    .credits{display:none;}
    
}

@media (min-width:901px){
    .r-menu, .r-menu.active{
        opacity:0!important;
        transform:translatex(100%)!important;
    }
}

{CustomCSS}

</style>

</head>

<body>

<nav id="menu">
    <a href="{blogurl}" title="refresh"><i data-feather="home"></i></a>
    <a href="/ask" title="message"><i data-feather="message-circle"></i></a>
    <a href="/archive" title="grid"><i data-feather="grid"></i></a>
    <a class="nav" title="navigation"><i data-feather="menu"></i></a>
    <a href="//kosmique.tumblr.com" title="credits"><i data-feather="star"></i></a>
</nav>

<nav class="r-menu">
    <a class="blog-title">
        <img src="{portraiturl-48}">
        <span>{title}</span>
    </a>
    
    {block:description}
        <div class="blog-description">
            <span>{description}</span>
        </div>
    {/block:description}
    
    <div class="search">
        <form action="/search" method="get">
            <input type="text" name="q" value="{SearchQuery}" placeholder="search"/>
        </form>
    </div>
    
    <nav>
        <a href="{text:link one url}">
            <i data-feather="{text:link one icon}"></i>
            <span>{text:link one title}</span>
        </a>
        <a href="{text:link two url}">
            <i data-feather="{text:link two icon}"></i>
            <span>{text:link two title}</span>
        </a>
        <a href="{text:link three url}">
            <i data-feather="{text:link three icon}"></i>
            <span>{text:link three title}</span>
        </a>
        <a href="{text:link four url}">
            <i data-feather="{text:link four icon}"></i>
            <span>{text:link four title}</span>
        </a>
    </nav>
</nav>

<section id="entries">

<aside>
    <div class="menu">
        <a href="{blogurl}" title="refresh"><i data-feather="home"></i></a>
        <a href="/ask" title="message"><i data-feather="message-circle"></i></a>
        <a href="/archive" title="grid"><i data-feather="grid"></i></a>
        <a class="nav" title="navigation"><i data-feather="menu"></i></a>
    </div>
    
    <div class="sidebar">
        <section class="side-one">
            <a class="blog-title">
                <img src="{portraiturl-48}">
                <span>{title}</span>
            </a>
            
            {block:description}
                <div class="blog-description">
                    <span>{description}</span>
                </div>
            {/block:description}
            
            <div class="search">
                <form action="/search" method="get">
                    <input type="text" name="q" value="{SearchQuery}" placeholder="search"/>
                </form>
            </div>
        </section>
        
        <section class="side-two">
            <a href="{text:link one url}">
                <i data-feather="{text:link one icon}"></i>
                <span>{text:link one title}</span>
            </a>
            <a href="{text:link two url}">
                <i data-feather="{text:link two icon}"></i>
                <span>{text:link two title}</span>
            </a>
            <a href="{text:link three url}">
                <i data-feather="{text:link three icon}"></i>
                <span>{text:link three title}</span>
            </a>
            <a href="{text:link four url}">
                <i data-feather="{text:link four icon}"></i>
                <span>{text:link four title}</span>
            </a>
        </section>
    </div>
</aside>

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

{block:indexpage}
    {block:PinnedPostLabel} 
        <a href="{permalink}" class="pin">
            <svg class="svg-icon" viewBox="0 0 20 20">
			    <path d="M17.592,8.936l-6.531-6.534c-0.593-0.631-0.751-0.245-0.751,0.056l0.002,2.999L5.427,9.075H2.491c-0.839,0-0.162,0.901-0.311,0.752l3.683,3.678l-3.081,3.108c-0.17,0.171-0.17,0.449,0,0.62c0.169,0.17,0.448,0.17,0.618,0l3.098-3.093l3.675,3.685c-0.099-0.099,0.773,0.474,0.773-0.296v-2.965l3.601-4.872l2.734-0.005C17.73,9.688,18.326,9.669,17.592,8.936 M3.534,9.904h1.906l4.659,4.66v1.906L3.534,9.904z M10.522,13.717L6.287,9.48l4.325-3.124l3.088,3.124L10.522,13.717z M14.335,8.845l-3.177-3.177V3.762l5.083,5.083H14.335z"></path>
			</svg>
			{PinnedPostLabel}
        </a>
    {/block:PinnedPostLabel}
{/block:indexpage}

{block:Quote}
<div class="q">
<div class="quote">{quote}</div>
{block:Source}
    <div class="source">
        <span class="left-arrow"></span>
        <span class="right-arrow"></span>
        {source}
    </div>
{/block:Source}
</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">
                        <img src="{portraiturl-64}" class="icon"/>
                        {username}
                    </a>
                {/block:IsActive}
                
                {block:IsDeactivated}
                    <span class="user deactivated" target="_blank">
                        <img src="{portraiturl-64}" class="icon"/>
                        {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">
                        <img src="{portraiturl-64}" class="icon"/>
                        {username}
                    </a>
                {/block:IsActive}
                
                {block:IsDeactivated}
                    <span class="user deactivated" target="_blank">
                        <img src="{portraiturl-64}" class="icon"/>
                        {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}                <div class="line">{line}</div>
        </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">
            {block:AlbumArt}
            <img src="{AlbumArtURL}" class="audio-cover"></img>
            {/block:AlbumArt}
            <div class="audio_info">
                {block:trackname}<span class="track">{trackname}</span>{/block:trackname}
                {block:artist}<span class="artist">{artist}</span>{/block:artist}
            </div>
            <div class="player">
                <span><i data-feather="skip-back"></i></span>
                {audioplayerwhite}
                <span><i data-feather="skip-forward"></i></span>
            </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">
                        <img src="{portraiturl-64}" class="icon"/>
                        {username}
                    </a>
                {/block:IsActive}
                
                {block:IsDeactivated}
                    <span class="user deactivated" target="_blank">
                        <img src="{portraiturl-64}" class="icon"/>
                        {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">
        <i data-feather="mail" class="icon"></i>
        {asker}
    </div>
    <div class="tex">{question}</div>
</div>
{block:Answerer}
    <div class="answer">
        <div class="as">
            {answerer}
            <i data-feather="message-square" class="icon"></i>
        </div>
        <div class="tex">{answer}</div>
    </div>
{/block:Answerer}
{block:NotReblog}
    <div class="answer">
        <div class="as">
            <a href="{permalink}">{name}</a>
            <i data-feather="message-square" class="icon"></i>
        </div>
        <div class="tex">{replies}</div>
    </div>
{/block:NotReblog}
{block:RebloggedFrom}
    {block:Reblogs}
        <div class="answer">
            <div class="as">
                <a href="{permalink}">{username}</a>
                <i data-feather="message-square" class="icon"></i>
            </div>
            <div class="tex">{body}</div>
        </div>
    {/block:Reblogs}
{/block:RebloggedFrom}
{/block:Answer}

{block:date}

    
    {block:hastags}
        <div class="tags">
            <i data-feather="tag"></i>
            {block:Tags}<a href="{TagUrl}">#{Tag}</a>{/block:Tags}
        </div>
    {/block:hasTags}
    
    <div class="when">
        <ul>
            <li>   
                <a href="{permalink}">
                    <i data-feather="calendar"></i>posted on {DayOfMonthWithZero} {Month}    
                </a>
            </li>
            
            {block:NoteCount}
                <li class="reblog-line">
                    <i data-feather="bar-chart"></i>
                    <span class="notecount">{NoteCountWithLabel}</span>
                </li>
            {/block:NoteCount}
            
            <li>
                <a href="#" class="like">
                    {LikeButton size="100"}
                    <i data-feather="heart"></i>
                    <span>like</span>
                </a>
                
                <a href="{ReblogURL}" target="_blank">
                    <i data-feather="refresh-ccw"></i>
                    reblog
                </a>
            </li>
            
            {block:ContentSource}
                <li>
                    <i data-feather="bookmark"></i>
                    <a href="{SourceURL}">source: {SourceTitle}</a>
                </li>
            {/block:ContentSource}
        </ul>
        
        
    </div>
{/block:date}

</article>

{block:permalinkpage}

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

{/block:permalinkpage}

{/block:Posts}

</section>

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

{block:Pagination}
    {block:ifInfiniteScroll}
        <footer id="pagination">
            {block:NextPage}<a href="{NextPage}"></a>{/block:NextPage}
        </footer>
    
        {block:ifManualLoad}
        <footer class="manual">
            <a href="#" class="load-more">load more</a>
        </footer>
        {/block:ifManualLoad} 
    {/block:ifInfiniteScroll}
    
    {block:ifNotInfiniteScroll}
        <footer id="pagination">
            {block:PreviousPage}<a href="{PreviousPage}"><i data-feather="chevron-left"></i></a>{/block:PreviousPage}
            {block:JumpPagination length="3"}
                {block:CurrentPage}
                    <span class="current_page">{PageNumber}</span>
                {/block:CurrentPage}
                {block:JumpPage}
                    <a class="jump_page" href="{URL}">{PageNumber}</a>
                {/block:JumpPage}
            {/block:JumpPagination}
            {block:NextPage}<a href="{NextPage}"><i data-feather="chevron-right"></i></a>{/block:NextPage}
        </footer>
    {/block:ifNotInfiniteScroll}
{/block:Pagination}

{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 = $('#entries');
    $('.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 notes');
        }
    });
    feather.replace();
    $('iframe.tumblr_audio_player').load( function(){
        $(this).contents().find("head")
    .append($("<style type='text/css'> .audio-player{background:transparent!important;} .audio-player .play-pause{color:#000 !important; font-size:1em!important;} </style>"));
    });
    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);
    });
    $('.label').each(function(){
        var newValue = $(this).text().replace(':', '');
        $(this).text( newValue );
    });
    $('.captions').each(function() {
        var $this = $(this);
        if($this.html().replace(/\s|&nbsp;/g, '').length == 0)
            $this.remove();
    });
    $('aside .nav').click(function(){
        $(this).toggleClass('active');
        $('.side-one,.side-two').toggleClass('active');
    });
    $('#menu .nav').click(function(){
        $(this).toggleClass('active');
        $('.r-menu').toggleClass('active');
    });
{block:indexpage}  
    {block:ifInfiniteScroll}
    $container.infinitescroll({
            itemSelector: 'article',
            navSelector: '#pagination',
            nextSelector: '#pagination a',
            loadingImg: '',
            loadingText: '<em></em>',
            bufferPx: 100,
            {block:ifManualLoad}
            errorCallback: function(){
                $('.load-more').hide();
            }
            {/block:ifManualLoad}
    },
    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'
        });
        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 notes');
            }
        });
        $newElems.find('iframe.tumblr_audio_player').load( function(){
            $(this).contents().find("head")
        .append($("<style type='text/css'> .audio-player{background:transparent!important;} .audio-player .play-pause{color:#000 !important; font-size:1em!important;} </style>"));
        });
        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:ifManualLoad}
        $(window).unbind('.infscr');
        $('.load-more').click(function(){
            $container.infinitescroll('retrieve');
            return false
        });
    {/block:ifManualLoad}
    {/block:ifInfiniteScroll}
{/block:indexpage}
});

</script>
</body></html>