Theme 16 - Kyoshi

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




<link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet"
type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></
script>
<script src="https://static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></
script>

<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:1em;
--NPF-Image-Spacing:4px;
}
</style>


<link href="https://fonts.bunny.net/css?family={text:body
font}:300,400,500,600,700,800,300i,400i,500i,600i,700i,800i" rel="stylesheet"
/><link href="https://fonts.bunny.net/css?family={text:title
font}:300,400,500,600,700,800,300i,400i,500i,600i,700i,800i" rel="stylesheet" />


<script src="https://unpkg.com/phosphor-icons"></script>
<script src="https://unpkg.com/phosphor-icons@1.4.0"></script>
<script src="//pull.cappuccicons.com/cpf.js"></script>


<script src="https://unpkg.com/popper.js@1"></script>
<script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>


<script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/
flexibleFrames.min.js"></script>


<script
src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></
script>
<script>
$(document).ready(function(){
var clipboard = new ClipboardJS("#copybutton");
});
</script>


<script type="text/javascript"
src="https://static.tumblr.com/i5s2zks/9Acok8oo2/bct-timeago.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".time-ago").timeAgo({
time: "short",
spaces: true,
words: false,
prefix: "",
suffix: "ago",
});
});
</script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>

<meta name="image:Profile" content="" />
<meta name="color:Background" content="#e0e0e0" />

<meta name="color:Posts" content="#eaeaea" />
<meta name="color:Title" content="#444" />
<meta name="color:Text" content="#5a5a5a" />
<meta name="color:Link" content="#268600" />
<meta name="color:Accent" content="#2a9400" />
<meta name="color:Borders" content="#d5d5d5" />
<meta name="color:Night Background" content="#1e1e1e" />

<meta name="color:Night Posts" content="#282828" />
<meta name="color:Night Title" content="#eee" />
<meta name="color:Night Text" content="#bbb" />
<meta name="color:Night Link" content="#9dff76" />
<meta name="color:Night Accent" content="#7bed4e" />
<meta name="color:Night Borders" content="#3a3a3a" />
<meta name="color:Gradient One" content="#1d6700"/>

<meta name="color:Gradient Two" content="#41ac2b"/>
<meta name="color:Gradient Text" content="#fff"/>
<meta name="color:Gradient Accent" content="#beffa0"/>
<meta name="select:Corners" content="10px" title="round"/>

<meta name="select:Corners" content="5px" title="slightly round"/>
<meta name="select:Corners" content="0px" title="sharp"/>
<meta name="select:Corners" content="15px" title="really round"/>
<meta name="select:Glow" content="0 0 10px" title="on"/>

<meta name="select:Glow" content="0 0 0" title="off"/>
<meta name="select:Tags" content="tags" title="default"/>

<meta name="select:Tags" content="clicktags" title="on click"/>
<meta name="if:Music Player" content="1"/>

<meta name="if:Toggle Footer" content="1"/>
<meta name="if:Explore Menu" content="1"/>
<meta name="if:Explore Blogs" content="1"/>
<meta name="if:Explore Links" content="1"/>
<meta name="if:Explore Socials" content="1"/>
<meta name="text:Post Margin" content="80"/>

<meta name="text:Body Font" content="Urbanist"/>
<meta name="text:Title Font" content="Montserrat Alternates"/>
<meta name="text:Font Size" content="15"/>
<meta name="text:Custom Description" content="custom description"/>
<meta name="text:Song Name" content="song name"/>

<meta name="text:Song Artist" content="song artist"/>
<meta name="text:Song URL" content=""/>
<meta name="text:Song Image URL" content=""/>
<meta name="text:Sidebar Link 1" content="link one"/>
<meta name="text:Sidebar Link 1 URL" content="/"/>
<meta name="text:Sidebar Link 1 Icon" content="music-notes"/>
<meta name="text:Sidebar Link 2" content="link two"/>
<meta name="text:Sidebar Link 2 Icon" content="headset"/>
<meta name="text:Sidebar Link 3" content="link three"/>
<meta name="text:Sidebar Link 3 Icon" content="microphone"/>
<meta name="text:Sidebar Link 4" content="link four"/>
<meta name="text:Sidebar Link 4 Icon" content="disc"/>
<meta name="text:Sidebar Link 5" content="link five"/>
<meta name="text:Sidebar Link 5 Icon" content="equalizer"/>
<meta name="text:Profile Name" content="name"/>

<meta name="text:Profile Stat 1" content="age"/>
<meta name="text:Profile Stat 1 Icon" content="cake"/>
<meta name="text:Profile Stat 2" content="pronouns"/>
<meta name="text:Profile Stat 2 Icon" content="leaf"/>
<meta name="text:Profile Stat 3" content="location"/>
<meta name="text:Profile Stat 3 Icon" content="map-pin"/>
<meta name="text:Update Stat Name 1" content="watching"/>

<meta name="text:Update Stat Text 1" content="show / movie"/>
<meta name="text:Update Stat Name 2" content="listening to"/>
<meta name="text:Update Stat Text 2" content="musician"/>
<meta name="text:Update Stat Name 3" content="reading"/>
<meta name="text:Update Stat Text 3" content="book"/>
<meta name="text:Update Stat Name 4" content="playing"/>
<meta name="text:Update Stat Text 4" content="game"/>
<meta name="text:Update Stat Name 5" content=""/>
<meta name="text:Update Stat Text 5" content=""/>
<meta name="text:Update Stat Name 6" content=""/>
<meta name="text:Update Stat Text 6" content=""/>
<meta name="text:About Text" content="bio/description goes here"/>
<meta name="text:Blogs Section Title" content="blogs"/>

<meta name="text:Blog 1 IMG" content="/"/>
<meta name="text:Blog 1 URL" content="demontimes"/>
<meta name="text:Blog 1 Title" content="blog title"/>
<meta name="text:Blog 2 IMG" content="/"/>
<meta name="text:Blog 2 URL" content="demontimes"/>
<meta name="text:Blog 2 Title" content="keep this short"/>
<meta name="text:Blog 3 IMG" content=""/>
<meta name="text:Blog 3 URL" content=""/>
<meta name="text:Blog 3 Title" content=""/>
<meta name="text:Link Section 1 Title" content="section 1 title"/>
<meta name="text:Explore Link 1" content="link one"/>
<meta name="text:Explore Link 1 URL" content="/"/>
<meta name="text:Explore Link 2" content="link two"/>
<meta name="text:Explore Link 3" content="link three"/>
<meta name="text:Explore Link 4" content="link four"/>
<meta name="text:Link Section 2 Title" content="section 2 title"/>
<meta name="text:Explore Link 5" content="link five"/>
<meta name="text:Explore Link 6" content="link six"/>
<meta name="text:Explore Link 7" content="link seven"/>
<meta name="text:Explore Link 8" content="link eight"/>
<meta name="text:Link Section 3 Title" content=""/>
<meta name="text:Explore Link 9" content="link nine"/>
<meta name="text:Explore Link 10" content="link ten"/>
<meta name="text:Explore Link 11" content="link eleven"/>
<meta name="text:Explore Link 12" content="link twelve"/>
<meta name="text:Socials Link 1" content="instagram"/>

<meta name="text:Socials Link 1 URL" content="/"/>
<meta name="text:Socials Icon 1" content="instagram-logo"/>
<meta name="text:Socials Link 2" content="twitter"/>
<meta name="text:Socials Icon 2" content="twitter-logo-fill"/>
<meta name="text:Socials Link 3" content="pinterest"/>
<meta name="text:Socials Icon 3" content="pinterest-logo-fill"/>
<meta name="text:Socials Link 4" content="tiktok"/>
<meta name="text:Socials Icon 4" content="tiktok-logo"/>
<meta name="text:Socials Link 5" content="facebook"/>
<meta name="text:Socials Icon 5" content="facebook-logo-fill"/>
<meta name="text:Socials Link 6" content="snapchat"/>
<meta name="text:Socials Icon 6" content="snapchat-logo-fill"/>


<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>
:root, html[data-theme='light'] {
--LightOn: flex;
--LightOff: none;
--ColorBackground: {color:background};
--ColorPosts: {color:posts};
--ColorTitle: {color:title};
--ColorText: {color:text};
--ColorLink: {color:link};
--ColorAccent: {color:accent};
--ColorBorders: {color:borders};
--ColorGradientOne: {color:gradient one};
--ColorGradientTwo: {color:gradient two};
--ColorGradientText: {color:gradient text};
--ColorGradientAccent: {color:gradient accent};
--ColorOpacity: rgba(255,255,255,.1);
--ColorReverseOpacity: rgba(0,0,0,.1);
--OpacityGradient: linear-gradient(to right, rgba(0,0,0,.1), rgba(0,0,0,0));
--ReverseOpacityGradient: linear-gradient(to right, rgba(255,255,255,.1),
rgba(255,255,255,0), rgba(255,255,255,.1));
}
html[data-theme='dark'] {
--LightOn: none;
--LightOff: flex;
--ColorBackground: {color:night background};
--ColorPosts: {color:night posts};
--ColorTitle: {color:night title};
--ColorText: {color:night text};
--ColorLink: {color:night link};
--ColorAccent: {color:night accent};
--ColorBorders: {color:night borders};
--ColorGradientOne: {color:gradient one};
--ColorGradientTwo: {color:gradient two};
--ColorGradientText: {color:gradient text};
--ColorGradientAccent: {color:gradient accent};
--ColorOpacity: rgba(0,0,0,.1);
--ColorReverseOpacity: rgba(255,255,255,.1);
--OpacityGradient: linear-gradient(to right, rgba(255,255,255,.1),
rgba(255,255,255,0));
--ReverseOpacityGradient: linear-gradient(to right, rgba(0,0,0,.1),
rgba(0,0,0,0), rgba(0,0,0,.1));
}
html.theme-transition,
html.theme-transition *,
html.theme-transition *:before,
html.theme-transition *:after {
transition: 0s !important;
transition-delay: 0 !important;
}
.light-on{
display: var(--LightOn);
}
.light-off{
display: var(--LightOff);
}
/*--- TOOLTIPS ---*/
.tippy-tooltip.custom-theme {
font-family:'{text:title font}', sans-serif;
color:var(--ColorTitle);
text-transform:lowercase;
text-align:center;
letter-spacing:.1em;
background:var(--ColorPosts);
border-radius:{select:Corners};
margin-bottom:.5em;
box-shadow:0 0 10px 0 rgba(0,0,0,.2);
}
/*--- SCROLLBAR ---*/

::-webkit-scrollbar {
width:5px;
height:5px;
background:var(--ColorBackground);
}
::-webkit-scrollbar-track {
border-radius: 5px;
}
::-webkit-scrollbar-thumb {
background:linear-gradient(to top, var(--ColorGradientOne), var(--
ColorGradientTwo));
border-radius: 5px;
}
/*--- TEXT SELECTION ---*/

::-moz-selection { /* Code for Firefox */
color:var(--ColorPosts);
background:var(--ColorAccent);
}
::selection {
}
/*--- COMMON ---*/
body {
font-family:'{text:body font}', sans-serif;
font-size:{text:font size}px;
color: var(--ColorText);
background-color: var(--ColorBackground);
line-height:140%;
word-wrap:break-word;
margin:0;
}
body {
opacity:1;
transition:.75s opacity;
}
body.fade-out {
opacity:0;
transition:none;
}
html {background-color:var(--ColorBackground);}
a {
color:var(--ColorLink);
text-decoration: none;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
a:hover {
color:var(--ColorAccent);
}
/* LINK EFFECTS */
#hua {
display:inline-block;
position:relative;
}
#hua:after {
content: '';
position:absolute;
width:100%;
transform:scaleX(0);
height:1px;
bottom:0;
left:0;
background-color:var(--ColorLink);
transform-origin:center;
transition: transform 0.25s ease-out;
}
#hua:hover:after {
transform: scaleX(1);
}
.description a, a.read_more, .el-bio a, .el-updates a {

position:relative;
border-bottom:1px solid var(--ColorBorders);
}
.description a:after, a.read_more:after, .el-bio a:after, .el-updates a:after {

content: '';
position:absolute;
width:100%;
height:1px;
bottom:-1px;
left:0;
background-color:var(--ColorLink);
}
.description a:hover:after, a.read_more:hover:after, .el-bio a:hover:after, .el-

updates a:hover:after {
}
blockquote {
border-left:1px solid var(--ColorBorders);
padding-left:.75em;
margin-left:1em;
}
ul {list-style-type:circle;}
ol {list-style-type: decimal-leading-zero;}
li::marker {color:var(--ColorAccent)}
small {font-size:.95em;}
big {font-size:1.1em;}
hr {
height:1px;
border:none;
box-shadow:none;
background:var(--ColorBorders);
}
pre {
word-wrap:break-word!important;
white-space:pre-wrap;
}
b, strong {
font-weight:800;
}
b a:hover {
}
button {font-size:1em;}
h1 {font-size:1.3em; letter-spacing:.1em; padding:0; margin:.5em .25em 0 .5em;

color:var(--ColorTitle); display:inline-block; width:auto;}
h1 a {color:var(--ColorTitle); border-bottom:1px solid var(--ColorBorders);}
h1 a:hover {color:var(--ColorAccent); border-bottom:1px solid var(--ColorLink);}
h2 {font-size:1.2em; color:var(--ColorTitle); letter-spacing:.1em;}
h3 {font-size:1.15em;}
h1, h1 a, h2 {font-family:'{text:title font}', sans-serif;}
/*--- CONTAINERS ---*/

main {
width:100%;
display:flex;
justify-content:center;
gap:5em;
}
section {
width:540px;
position:relative;
margin-top:6em;
margin-bottom:9em;
}
article {
width:100%;
position:relative;
margin:{text:post margin}px auto auto auto;
box-shadow:2px 2px 10px 0 rgba(0,0,0,.1);
}
article:first-of-type {margin-top:0;}
/*--- TOP BUTTONS ---*/
header {
position:fixed;
left:300px;
top:0;
right:0;
height:4em;
display:flex;
justify-content:space-between;
align-items:center;
padding:0 1em 0 1em;
transition:0.25s;
z-index:9999;
}
.topleft {
display:flex;
justify-content:flex-start;
align-items:center;
gap:1em;
z-index:9999;
}
.topright {
display:flex;
justify-content:flex-end;
align-items:center;
gap:1em;
z-index:9999;
}
/* DAY/NIGHT */
button#theme-toggle {
position:fixed;
left:1em;
outline:none;
border:none;
display:flex;
align-items:center;
padding:2px;
background:linear-gradient(to top right, var(--ColorGradientOne), var(--
ColorGradientTwo));
border-radius:100%;
cursor:help;
}
button#theme-toggle span {
align-items:center;
width:2em;
height:2em;
background:transparent;
border-radius:100%;
}
button#theme-toggle:hover span {
}
button#theme-toggle i {
font-size:1.4em;
color:var(--ColorGradientText);
text-shadow:{select:glow};
}
button#theme-toggle:hover i {
text-shadow:none;
-webkit-animation-duration: .75s;
animation-duration: .75s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
animation-iteration-count:1;
-webkit-animation-iteration-count:1;
animation-name:daynight;
-moz-animation-name:daynight;
}
@keyframes daynight {
50% {
-webkit-transform: scaleX(-1);
-ms-transform: scaleX(-1);
transform: scaleX(-1);
}
}
/* PAGINATION */
.pagination {
display:flex;
align-items:center;
gap:.5em;
}
.pagination-btn {
display:flex;
align-items:center;
padding:2px;
ColorGradientTwo));
border-radius:100%;
}
.pagination-btn.nopgn {opacity:.5; cursor:not-allowed;}
.pagination-btn.nopgn:hover a {background:transparent;}
.pagination-btn.nopgn:hover i {color:var(--ColorGradientAccent); text-shadow:none;}
.pagination-btn.nopgn.yespgn {display:none;}
.pagination-btn a {
display:flex;
align-items:center;
width:2em;
height:2em;
border-radius:100%;
}
.pagination-btn:hover a {background:var(--ColorPosts);}
.pagination-btn i {
font-size:1.4em;
}
.pagination-btn:hover i {
text-shadow:none;
}
/*--- HEADER RIGHT ---*/
/* TUMBLR CONTROLS */
#controlsbutton {
display:flex;
align-items:center;
padding:2px;
ColorGradientTwo));
border-radius:100%;
cursor:help;
}
#controlsbutton a {
display:flex;
align-items:center;
width:2em;
height:2em;
border-radius:100%;
}
#controlsbutton:hover a {background:var(--ColorPosts);}
#controlsbutton i {
font-size:1.4em;
}
#controlsbutton:hover i {
text-shadow:none;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
animation-name:tumblrcontrols;
-moz-animation-name:tumblrcontrols;
}
@keyframes tumblrcontrols {
45% {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
55% {
}
100% {
}
}
.tmblr-iframe-compact .tmblr-iframe--unified-controls {
z-index:999999999!important;
margin-top:4em;
transform:scale(.9);
opacity:0;
visibility:hidden;
}
body.controlsclick iframe.tmblr-iframe {
opacity:1.0;
visibility:visible;
}
body.controlsclick #controlsbutton a {background:transparent;}
body.controlsclick #controlsbutton:hover a {background:var(--ColorPosts);}
body.controlsclick #controlsbutton i {color:var(--ColorGradientAccent); text-
shadow:{select:glow};}
body.controlsclick #controlsbutton:hover i {color:var(--ColorAccent); text-
shadow:none;}
/* DROPDOWN TAB */
.dropdown {position:relative; display:flex; justify-content:flex-end; align-
items:center;}
a.cthrough {
display:flex;
align-items:center;
gap:.5em;
padding:.2em .5em .2em .2em;
background:linear-gradient(to right, var(--ColorGradientOne), var(--
ColorGradientTwo));
border-radius:30px;
cursor:help;
}
a.cthrough img {
width:1.75em;
height:1.75em;
border-radius:100%;
padding:1px;
border:1px solid var(--ColorGradientAccent);
}
a.cthrough b {
font-size:.95em;
font-weight:600;
}
a.cthrough:hover b {
}
a.cthrough i {
font-size:1.3em;
}
a.cthrough:hover i {
color:var(--ColorGradientAccent);
}
body.cthroughclick a.cthrough i {color:var(--ColorGradientAccent);}
/* DROP DOWN & EXPLORE BUTTON */
.sub {
position:absolute;
top:100%;
margin-top:.25em;
min-width:200px;
padding:.25em;
display:flex;
flex-direction:column;
gap:.5em;
box-shadow:0 -5px 10px 0 rgba(0,0,0,.2);
}
.sublinks {
display:flex;
gap:.25em;
}
.sublinks a {
position:relative;
width:calc(100% - 2em);
display:flex;
align-items:center;
gap:.5em;
padding:.5em 1em .5em 1em;
z-index:9;
}
.sublinks a:after {
content:'';
position:absolute;
left:0;
width:100%;
height:100%;
opacity:0;
background:var(--ColorReverseOpacity);
z-index:1;
}
.sublinks a:hover:after {
opacity:1;
}
.sublinks b {
font-size:.95em;
font-weight:normal;
text-align:left;
z-index:9;
}
.sublinks a:hover b {
}
.sublinks i {
font-size:1.4em;
z-index:9;
}
.sublinks a:hover i {
}
.explorebutton {cursor:help;}
a.sidebarbutton {display:none; cursor:help;}
/*--- EXPLORE MENU ---*/
#explore {
position:fixed;
top:0;
left:100vw;
right:0;
bottom:0;
opacity:0;
display:flex;
align-items:center;
z-index:999;
}
body.explore-click #explore {
left:300px;
opacity:1;
}
.explore-wrap {
position:relative;
width:100%;
height:calc(100% - 8em);
margin-top:4em;
margin-bottom:4em;
display:flex;
}
{block:iftogglefooter} .explore-wrap {height:calc(100% - 4em);
margin-bottom:0;}{/block:iftogglefooter}
body.footer-click .explore-wrap {height:calc(100% - 8em); margin-bottom:4em;}
#explore .explorebutton {
position:absolute;
top:1em;
right:1em;
display:none;
align-items:center;
padding:.5em;
background:var(--ColorOpacity);
border:1px solid var(--ColorOpacity);
border-radius:100%;
}
body.explore-click #explore .explorebutton {display:flex;}
#explore .explorebutton i {
font-size:1.6em;
}
#explore .explorebutton:hover i {
transform:rotate(180deg);
}
/* explore header */
.explore-header {
width:100%;
display:flex;
align-items:flex-end;
gap:1em;
padding:1em;
ColorGradientTwo));
}
.eh-icon img {
width:200px;
height:200px;
object-fit:cover;
border-radius:100%;
padding:.25em;
border:.25em solid var(--ColorGradientAccent);
}
.eh-content {
display:flex;
align-items:flex-start;
gap:1.5em;
padding-bottom:1em;
}
.eh-subtitle {
text-align:left;
text-transform:uppercase;
}
.eh-name {
font-size:3.5em;
font-weight:bold;
text-align:left;
padding-bottom:.25em;
}
.eh-abtstats {
display:flex;
align-items:center;
flex-wrap:wrap;
gap:1em;
}
.eh-abtstats li {
display:flex;
align-items:center;
gap:.5em;
}
.eh-abtstats i {
font-size:1.6em;
text-shadow:{select:Glow};
}
.eh-abtstats span {
text-align:left;
}
/* explore lower */
.explore-lower {
padding:1em 2em 2em 2em;
height:100vh;
overflow-y:auto;
}
.el-subtitle {
width:100%;
font-size:1.1em;
font-weight:bold;
text-align:left;
margin-top:.75em;
}
.el-subtitle:first-of-type {margin-top:0;}
.el-info {
width:100%;
display:flex;
flex-wrap:wrap;
gap:1em;
}
/* explore bio */
.el-bio {
width:calc(65% - 2.5em);
max-height:300px;
overflow-y:auto;
text-align:left;
padding:1em;
}
.el-bio p {margin-bottom:0; padding-bottom:0;}
/* explore updates */
.el-updates {
max-height:300px;
overflow-y:auto;
display:flex;
gap:.5em;
padding:1em;
}
.el-updates li {
width:100%;
display:flex;
}
.el-updates b {
font-size:.95em;
font-weight:700;
text-align:left;
}
.el-updates span {
font-size:.95em;
color:var(--ColorText);
text-align:left;
}
/* explore blogs */
.el-blogs {
width:100%;
display:flex;
align-items:center;
flex-wrap:wrap;
gap:1em;
}
.el-blogs a {
position:relative;
display:flex;
align-items:center;
gap:.75em;
padding:1em;
z-index:2;
}
.el-blogs a:after {
position:absolute;
content:'';
top:0;
width:100%;
height:100%;
opacity:0;
z-index:1;
}
.el-blogs a:hover:after {
opacity:1;
}
.el-blogimg {
display:flex;
align-items:center;
width:6.5em;
height:6.5em;
padding:2px;
border:1px solid var(--ColorAccent);
border-radius:100%;
z-index:2;
}
.el-blogimg img {
width:6.5em;
height:6.5em;
border-radius:100%;
}
.el-blogtext {
width:100%;
display:flex;
align-items:center;
white-space:nowrap;
z-index:2;
}
.el-blogtext b {
font-size:.95em;
text-align:center;
}
.el-blogtext span {
width:100%;
font-size:.95em;
text-align:center;
overflow-x:auto;
}
.el-blogtext span::-webkit-scrollbar {
width:1px;
height:1px;
}
.el-blogtext span::-webkit-scrollbar-track {
border-radius: 5px;
}
.el-blogtext span::-webkit-scrollbar-thumb {
ColorGradientTwo));
border-radius: 5px;
}
/* explore links */
.el-links {
width:100%;
display:flex;
gap:1em;
padding-top:1em;
}
.el-linkblock {
display:flex;
gap:.5em;
}
.el-linkblock a {
font-size:1.1em;
text-align:left;
border-bottom:1px solid transparent;
}
.el-linkblock a:hover {color:var(--ColorTitle); border-bottom:1px solid var(--
ColorAccent);}
.el-socialswrap {
width:25%;
height:100%;
display:flex;
gap:1em;
}
.el-socials {
display:flex;
flex-wrap:wrap;
gap:1em;
}
.el-socials a {
position:relative;
display:flex;
align-items:center;
padding:.5em;
border-radius:100%;
z-index:2;
}
.el-socials a:after {
position:absolute;
content:'';
top:0;
width:100%;
height:100%;
opacity:0;
border-radius:100%;
z-index:1;
}
.el-socials a:hover:after {
opacity:1;
}
.el-socials i {
font-size:1.4em;
z-index:2;
}
.el-socials a:hover i {
}
/*---- SIDEBAR ----*/
#sidebar {
position:fixed;
top:0;
left:0;
bottom:0;
width:300px;
display:flex;
align-items:center;
box-shadow:0 5px 20px 0 rgba(0,0,0,.1);
z-index:999;
}
.sidebar-wrap {
display:flex;
gap:1em;
margin-top:1em;
padding:.75em;
max-height:calc(100vh - 6em);
overflow-y:auto;
}
.title {
display:flex;
align-items:center;
gap:.75em;
}
.title a {
font-size:1.3em;
font-weight:bold;
text-align:center;
}
.title a:hover {color:var(--ColorAccent);}
.title img {
width:7em;
height:7em;
border-radius:100%;
padding:2px;
ColorGradientTwo));
}
img.sidebar-icon {
{block:ifProfileImage}
display:none;
{/block:ifProfileImage}
width:6em;
height:6em;
border-radius:100%;
padding:2px;
ColorGradientTwo));
}
.description {
padding:1em;
text-align:center;
}
.description p {margin-bottom:0; padding-bottom:0;}
nav {
width:100%;
display:flex;
align-items:center;
gap:.25em;
padding-bottom:1em;
}
nav .subtitle {
font-weight:600;
text-align:left;
margin-bottom:.25em;
padding:0 .5em .25em .5em;
}
nav a {
position:relative;
display:flex;
align-items:center;
gap:.5em;
opacity:.85;
padding:.5em;
}
nav a:hover {opacity:1;}
nav a:first-of-type {opacity:1;}
nav a:after {
content:'';
position:absolute;
left:0;
width:100%;
height:100%;
opacity:0;
background:var(--OpacityGradient);
}
nav a:hover:after {
opacity:1;
}
nav a:first-of-type:after {opacity:1;}
nav i {
font-size:1.6em;
}
nav a:hover i {
}
nav span {
text-align:left;
}
nav a:hover span {
}
/* FOOTER BUTTON */
a.footerbutton {cursor:help;}
a.footerbutton:hover i {
animation-name: wiggle;
-moz-animation-name: wiggle;
}
@keyframes wiggle {
0% {
-webkit-transform: translateX(0px);
-ms-transform: translateX(0px);
transform: translateX(0px)
}
15% {
}
30% {
-ms-transform: translateX(10deg);
transform: translateX(10deg)
}
45% {
-webkit-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg)
}
60% {
transform: rotate(10deg)
}
75% {
-webkit-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg)
}
85% {
transform: rotate(10deg)
}
100% {
}
}
.sidebar-links {
width:100%;
display:flex;
align-items:center;
gap:.25em;
}
.sidebar-links a {
position:relative;
display:flex;
align-items:center;
gap:.5em;
opacity:.85;
padding:.5em;
}
.sidebar-links a:hover {opacity:1;}
.sidebar-links a:after {
content:'';
position:absolute;
left:0;
width:100%;
height:100%;
opacity:0;
background:var(--OpacityGradient);
}
.sidebar-links a:hover:after {
opacity:1;
}
.sidebar-links i {
font-size:1.6em;
}
.sidebar-links a:hover i {color:var(--ColorLink);}
.sidebar-links span {
text-align:left;
}
.sidebar-links a:hover span {
}
/*---- TOP POST INFO ---*/
.topinfo {
display:flex;
align-items:center;
gap:.5em;
border-radius:{select:Corners} {select:Corners} 0 0;
}
/* top info left */

.topinfo-left {
display:flex;
align-items:center;
gap:1em;
}
.topinfo-img {
width:2.35em;
height:2.35em;
display:flex;
align-items:center;
padding:1px;
border-radius:100%;
}
.topinfo-img img {
width:2.35em;
height:2.35em;
border-radius:100%;
}
.topinfo-img:hover {
transform:scale(1.1);
}
.topinfo-textwrap {
display:flex;
}
.ti-name {
font-size:.95em;
text-align:left;
}
.ti-name a {
font-weight:600;
border-bottom:1px solid transparent;
}
.ti-name a:hover {
border-bottom:1px solid var(--ColorAccent);
}
.ti-text {
display:flex;
align-items:center;
gap:.5em;
}
.ti-text b {
font-weight:normal;
font-size:.95em;
text-align:left;
}
.ti-text span {
font-size:.5em;
}
/* top info right */

.topinfo-right {
display:flex;
align-items:center;
}
.topinfo-right a {
position:relative;
display:flex;
align-items:center;
}
.topinfo-right i {
font-size:1.6em;
}
.topinfo-right a:hover i {
}
/*--- POSTS ----*/
.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%;}
article img {display:block; margin:auto; max-width:100%;}
.caption {
padding:1em;
}
.caption a {
position:relative;
}
.caption a:hover {border-bottom:1px solid var(--ColorLink);}
.userlink {
}
.userlink a {
display:flex;
align-items:center;
gap:.5em;
border-bottom:0;
}
.userlink a:hover {border-bottom:0;}
.usericon {
width:1.5em;
height:1.5em;
padding:1px;
border-radius:100%;
}
.usericon img {
width:1.5em;
height:1.5em;
border-radius:100%;
}
.userlink a:hover .usericon img {
}
.username {
font-weight:600;
font-size:.95em;
}
.userlink a:hover .username {
}
.userlink.deactive .username {
opacity:.85;
}
a.read_more {
text-transform:uppercase;
letter-spacing:1px;
font-weight:bold;
color: var(--ColorTitle);
}
a.read_more:hover {color:var(--ColorAccent);}
/*--- PHOTO POSTS ----*/
.photopost {width:calc(100% - 2em); padding:1em;}

.photopost .caption {padding:.5em 0 .5em 0;}
img.photos {width:100%;}
.vignette, #vignette {opacity:0;}

.tmblr-lightbox, #tumblr_lightbox {
backdrop-filter: blur(2px);
background-color:rgba(0,0,0,.2) !important;
z-index:9999999;
}
.lightbox-image, #tumblr_lightbox img {
box-shadow: none !important;
}
#tumblr_lightbox_caption, .lightbox-caption {
color: #fff !important;
font-family: inherit;
margin-top: 1em !important;
z-index:9999999;
}
/*--- LINK POSTS ---*/
.linkpost {
position:relative;
padding:1em;
}
.linkpost a {
display:flex;
align-items:center;
}
.linkimage {
position:relative;
width:100%;
height:200px;
}
.linkimage img {
width:100%;
height:200px;
object-fit:cover;
}
.linkimage-overlay {
position:absolute;
top:0;
width:100%;
height:200px;
display:flex;
align-items:center;
font-size:1.4em;
font-weight:bold;
color:#fff;
backdrop-filter:blur(3px);
background:rgba(0,0,0,.5);
}
.link {
padding:1em;
ColorGradientTwo));
display:flex;
align-items:center;
gap:1em;
}
.link#thumbnail {border-radius:0 0 {select:Corners} {select:Corners};}
.linkicon i {
font-size:1.8em;
margin-left:.5em;
padding:.4em;
}
.linkpost a:hover .linkicon i {

}
.linktitle {
display:flex;
}
.linktitle b {
font-size:1.1em;
}
.linktitle span {
font-size:.9em;
}
/*--- AUDIO POSTS ---*/
.audiopost {position:relative; width:calc(100% - 2em); padding:1em;}
.audiopost iframe {
width:100%;
}
.audio {
display:flex;
align-items:center;
gap:1em;
padding:1em;
ColorGradientTwo));
}
.albumart {
width:140px;
position:relative;
display:flex;
align-items:center;
padding:2px;
border-radius:100%;
box-shadow:2px 8px 8px rgba(0,0,0,.25);
}
.albumart img {
width:140px;
height:140px;
border-radius:100%;
}
.audioplaybg {
display:flex;
align-items:center;
padding:2px;
border-radius:100%;
box-shadow:2px 8px 8px rgba(0,0,0,.1);
}
.audioplay {
width: 30px;
height: 30px;
overflow: hidden;
position: relative;
padding:8px 8px 5px 5px;
background:#f2f2f2;
border-radius:100%;
z-index:1;
}
.audioinfo {
width:100%;
display:flex;
justify-content:space-evenly;
align-items:center;
gap:1em;
flex-wrap:wrap;
text-align:center;
}
.audiowrap {
width:calc(100% - 140px - 2em);
display:flex;
gap:.5em;
}
.audioactual {
width:100%;
display:flex;
justify-content:space-evenly;
align-items:center;
gap:1em;
}
.audioactual i {
font-size:1.6em;
}
.audiotitle {
width:100%;
display:flex;
align-items:center;
line-height:120%;
}
.audiotitle b {
font-size:1.1em;
}
.audiotitle span {
}
/*--- QUOTE POSTS ----*/
.quotepost {
padding:1em;
}
.quote {
padding:.5em;
ColorGradientTwo));
}
.quotewrap {
padding:.5em;
}
.quote i {
font-size:1.4em;
margin-right:1em;
}
.quote span {
font-size:1.2em;
font-weight:bold;
text-align:left;
}
.source {
text-align:center;
padding:.5em .5em 0 .5em;
}
/*--- ANSWER POSTS ---*/
.askwrap {
padding:1em 1em .5em 1em;
}
.askicon {
width:2.2em;
height:2.2em;
padding:2px;
border-radius:100%;
ColorGradientTwo));
}
.askicon img {
width:2.2em;
height:2.2em;
border-radius:100%;
}
.asker {
display:flex;
align-items:center;
gap:.5em;
margin-bottom:1em;
}
.asker .askerstart {
display:flex;
text-align:right;
line-height:120%;
}
.askerstart b {
font-weight:600;
}
.askerstart a {
margin-right:0;
margin-bottom:0;
}
.askerstart span {
font-size:.9em;
}
.askmessage {
margin-left:2.5em;
margin-top:-.5em;
}
.question {
position:relative;
margin-right:2em;
text-align:right;
ColorGradientTwo));
}
.question .blurb {
position:absolute;
right:-.5em;
top:-.8em;
transform:rotate(-145deg);
width:0;
height:0;
border-left:.8em solid transparent;
border-right:.8em solid transparent;
border-top:1.8em solid var(--ColorGradientTwo);
}
.answerwrap {
padding:.5em 1em 1em 1em;
}
.answerer .usericon {
width:2.2em;
height:2.2em;
display:flex;
align-items:center;
padding:2px;
border-radius:100%;
ColorGradientTwo));
}
.answerer .usericon img {

width:2.2em;
height:2.2em;
border:none;
padding:0;
}
.answerer {
display:flex;
align-items:center;
gap:.5em;
line-height:120%;
}
.answerer .username {
font-weight:600;
border-bottom:0;
}
.answermsg {
font-size:.9em;
}
.answer {
position:relative;
margin-top:1em;
margin-left:2em;
}
.answer .blurb {
position:absolute;
left:-.5em;
top:-.8em;
width:0;
height:0;
border-left:.8em solid transparent;
border-right:.8em solid transparent;
border-top:1.8em solid var(--ColorBackground);
}
.question a, .answer a {
position:relative;
}
.question a:after, .answer a:after {

content: '';
position:absolute;
width:100%;
height:1px;
bottom:-1px;
left:0;
transform-origin:middle;
}
.question a:hover:after, .answer a:hover:after {

transform-origin: middle;
}
.question a {color:var(--ColorGradientText);border-bottom:1px solid var(--

ColorOpacity);}
.question a:after {background-color:var(--ColorGradientAccent);}
.question b {color:var(--ColorGradientText);}
/*--- CHAT POSTS ---*/
.chat {width:calc(100% - 2em); margin:0; padding:1em;}
.chat li {
position:relative;
list-style:none;
padding:1em 2em 1em 2em;
margin:.5em 0 .5em 0;
}
.chat li:last-of-type {margin-bottom:0;}

.chat li:nth-of-type(odd) {
ColorGradientTwo));
}
.chat li:nth-of-type(odd) .blurb {
position:absolute;
top:1.2em;
left:-.4em;
margin-top:-.5em;
width:2em;
height:2em;
background:var(--ColorGradientOne);
}
.chat li:nth-of-type(even) {
background:linear-gradient(to left, var(--ColorGradientOne), var(--
ColorGradientTwo));
text-align:right;
}
.chat li:nth-of-type(even) .blurb {
position:absolute;
top:1.2em;
right:-.4em;
margin-top:-.5em;
width:2em;
height:2em;
background:var(--ColorGradientOne);
}
.chatter:nth-of-type(even) {text-align:right;}
.chatter {
font-weight:600;
}
/*--- BOTTOM POST INFO ---*/
.bottominfo-wrap {
width:100%;
display:flex;
gap:.5em;
}
.bottominfo {
display:flex;
align-items:center;
gap:.5em;
border-radius:0 0 {select:Corners} {select:Corners};
border-top:1px solid var(--ColorBorders);
}
.bottominfo-left {
display:flex;
align-items:center;
gap:1em;
}
/* reblog button */
.bil-icon a {
display:flex;
align-items:center;
padding:.5em;
border-radius:100%;
}
.bil-icon a:hover {transform:scale(1.1);}
.bil-icon i {
font-size:1.6em;
}
/* like button */
a.likeb span, .bil-like {

display:flex;
align-items:center;
}
.bil-like i {
font-size:1.6em;
}
.bil-like a:hover i {
}
.likeb {
position: relative;
display: inline-block;
}
.likeb .like_button iframe {

position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 2;
opacity: 0;
}
.like_button iframe {width: 100% !important; height: 100% !important;}

.likeb .liked + .actual-button i {
}
.clicktagsbutton {display:flex; align-items:center; justify-content:center;

cursor:help;}
.clicktagsbutton i {
font-size:1.5em;
}
.clicktagsbutton:hover i {
}
.tagsbutton {display:none;}
.clicktagsbutton.tag-clicked i {color:var(--ColorAccent);}
/* info menu button & tab */

.bil-button {cursor:help;}
a.bil-button {
display:flex;
align-items:center;
}
.bil-button i {
font-size:1.85em;
}
.bil-button i:hover {
}
.bil-button.bil-clicked i {color:var(--ColorAccent);}
.bil-menu {
position:relative;
display:flex;
}
.bil-sub {
position:absolute;
top:100%;
margin-top:.5em;
width:200px;
display:flex;
gap:.25em;
padding:.25em;
box-shadow:0 0 10px 0 rgba(0,0,0,.2);
z-index:9999;
}
.bil-sub a {
display:flex;
align-items:center;
gap:.5em;
}
.bil-sub a:hover {background:var(--ColorReverseOpacity);}
.bil-sub b {
font-size:.9em;
font-weight:normal;
text-align:left;
}
.bil-sub i {
font-size:1.3em;
padding:0;
background:none;
border-radius:none;
}
.bil-sub a:hover i {
background:none;
}
#copybutton {cursor:help;}
/*--- TAGS ---*/
.tags, .clicktags {
display:flex;
align-items:center;
flex-wrap:wrap;
gap:.5em;
}
.tags a, .clicktags a {
font-size:.95em;
display:flex;
align-items:center;
border-radius:30px;
}
.tags a span, .clicktags a span {color:var(--ColorText); line-height:100%; border-
bottom:1px solid transparent;}
.tags a:hover span, .clicktags a:hover span {border-bottom:1px solid var(--
ColorAccent);}
/*--- PERMALINK INFO ---*/
.perma-page {
margin:1em 0 1em 0;
width:100%;
display:flex;
align-items:center;
flex-wrap:nowrap;
}
.perma-one, .perma-two, .perma-three {

width:100%;
display:flex;
}
.perma-one i, .perma-two i, .perma-three i {

font-size:1.4em;
display:flex;
align-items:center;
padding:1em 1em .5em 1em;
}
.perma-one a, .perma-two a, .perma-three a {

max-height:3em;
font-size:.95em;
text-align:center;
padding:1em;
}
.perma-page a:hover {
}
.perma-page a span {
white-space:nowrap;
}
/*--- POST NOTES ---*/
.notes {
margin:2em 0;
}
.notes-title {
display:flex;
align-items:center;
gap:1em;
}
.notes-title span {
text-align:left;
}
.notes-titleicon {
display:flex;
align-items:center;
padding:.5em;
border-radius:100%;
}
.notes-titleicon i {
font-size:1.6em;
}
ol.notes {
max-width: 100%;
margin:0;
}
.more_notes_link {
width:100%;
}
a.more_notes_link {
font-weight:bold;
letter-spacing: 0.1em;
}
a.more_notes_link::after {
content:'\eb98';
}
a.more_notes_link::before {
content:'\eb98';
position:absolute;
left:0;
font-family:'cappuccicons';
}
ol.notes li.note blockquote {

display:none;
}
ol.notes li.note {
padding:1em 0 1em 0;
list-style-type:none;
display:flex;
align-items:center;
gap:.5em;
font-size:.9em;
border-top:1px solid var(--ColorBorders);
}
ol.notes li.note:first-of-type {border-top:none;}
ol.notes li.note a {text-transform:uppercase;}
ol.notes li.note img.avatar {

width:1.5em;
height:1.5em;
padding:2px;
border-radius:100%;
}
ol.notes li.note.reblog::after {
content:'\ec37';
color:#03cf35;
}
ol.notes li.note.like::after {
content:'\eb04';
color:#fe492f;
}
ol.notes li.note.reply::after {
content:'\e9d7';
color:#00b8ff;
}
ol.notes li.note.reply span {
color:#00b8ff;
}
ol.notes li.note.reply span.action {
}
ol.notes li.note.original_post::after {
content:'\eb68';
}
ol.notes li.note.original_post {
font-weight:bold;
}
ol.notes li.note.reblog, ol.notes li.note.like, ol.notes li.note.original_post,

ol.notes li.note.reply, a.more_notes_link {
position:relative;
}
ol.notes li.note.reblog span, ol.notes li.note.like span, ol.notes
li.note.original_post span, ol.notes li.note.reply span {margin-right:.3em; margin-
left:.3em;}
ol.notes li.note.reblog::after, ol.notes li.note.like::after, ol.notes
li.note.original_post::after, ol.notes li.note.reply::after,
a.more_notes_link::after {
position:absolute;
right:0;
font-family:'cappuccicons';
}
/*--- TAG / DAY PAGES ---*/
.tdpage {
display:flex;
align-items:center;
}
.tdpage-text {
position:relative;
display:flex;
align-items:center;
gap:.5em;
font-size:.9em;
text-align:left;
}
.tdpage-text:after {
content:'';
position:absolute;
top:0;
width:100%;
height:100%;
opacity:.5;
}
/*---- MUSIC PLAYER ----*/
/*--- CREDIT: DO NOT TOUCH ---*/
.credit {
position:fixed;
right:1em;
display:flex;
align-items:center;
}
.credit a {
display:flex;
align-items:center;
}
.credit i {
font-size:1.6em;
}
.credit:hover i {
-webkit-animation-duration: 2s;
animation-duration: 2s;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
animation-name: bounce;
-moz-animation-name: bounce;
}
@keyframes bounce {
0% {
-webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px)
}
25% {
-webkit-transform: translateY(-3px);
-ms-transform: translateY(-3px);
transform: translateY(-3px)
}
50% {
}
75% {
}
100% {
}
}
{block:iftogglefooter}
.credit {
right:1em;
bottom:1em;
padding:2px;
ColorGradientTwo));
border-radius:100%;
}
.credit a {
width:2.25em;
height:2.25em;
border-radius:100%;
}
.credit:hover a {
}
.credit a:hover i {
text-shadow:none;
}
#totop {
position:fixed;
right:1em;
bottom:4.5em;
padding:2px;
ColorGradientTwo));
border-radius:100%;
}
#totop a {
width:2.25em;
height:2.25em;
border-radius:100%;
}
#totop:hover a {
}
#totop a:hover i {
color:var(--ColorAccent)!important;
text-shadow:none!important;
}
{/block:iftogglefooter}
body.footer-click .credit {
right:1em;
bottom:.75em;
padding:0;
background:none;
}
body.footer-click .credit a {
width:default;
height:default;
background:none;
}
body.footer-click .credit:hover a {background:none;}
body.footer-click .credit a:hover i {
}
body.footer-click #totop {
right:3.5em;
bottom:.75em;
padding:0;
background:none;
display:flex;
align-items:center;
}
body.footer-click #totop a {
width:default;
height:default;
background:none;
}
body.footer-click #totop:hover a {
background:none;
}
body.footer-click #totop a:hover i {
color:var(--ColorGradientAccent)!important;
text-shadow:{select:glow}!important;
}
/*--- FOOTER ---*/
footer {
position:fixed;
bottom:0;
left:0;
right:0;
height:4em;
display:flex;
align-items:center;
z-index:999;
}
{block:iftogglefooter} footer {bottom:-5em; z-index:99;} {/block:iftogglefooter}
body.footer-click footer {bottom:0; z-index:999;}
footer:before {
position:absolute;
content:'';
width:100%;
height:100%;
opacity:.85;
ColorGradientTwo));
z-index:-1;
}
footer:after {
position:absolute;
content:'';
width:100%;
height:100%;
backdrop-filter: blur(2px);
z-index:-1;
}
.music-container {
position:relative;
width:100%;
display:flex;
align-items:center;
z-index:9;
}
.img-container {
position:absolute;
left:0;
display:flex;
align-items:center;
gap:.5em;
}
.img-container img {
width:3em;
height:3em;
border-radius:100%;
object-fit:cover;
padding:1px;
animation:rotate 5s linear infinite;
animation-play-state:paused;
}
{block:ifMusicPlayer}
.img-container img.mpcover {display:none;}
{/block:ifMusicPlayer}
.music-container.play .img-container img {

animation-play-state:running;
}
@keyframes rotate {
from {
}
to {
}
}
.music-info {
}
.music-info #title {font-size:.95em; font-weight:700;}
.music-info #artist {font-size:.9em;}
.music-info .mptitle#title, .music-info .mpartist#artist {display:none;}
.music-container.play .music-info #title {text-shadow:{select:Glow};}
.music-info h4 {margin:0;}
.navigation {
display:flex;
align-items:center;
gap:1em;
z-index:1;
}
a.footerlink {
font-size:1.6em;
display:flex;
align-items:center;
}
a.footerlink:hover {color:var(--ColorGradientText); text-shadow:{select:Glow};}
.action-btn {
font-size:1.6em;
display:flex;
align-items:center;
border:0;
padding:0;
}
.action-btn-big {
cursor:pointer;
}
.action-btn-big:hover, .music-container.play .action-btn-big {text-shadow:
{select:Glow};}
.action-btn-big i {
padding:.4em;
border-radius:100%;
}
.action-btn-big.mphome a {
display:flex;
align-items:center;
}
.action-btn-big.mphome i {
}
.action-btn-big.mphome a:hover i {
}
.action-btn-big.mphome {display:none;}
.action-btn:focus {outline:0;}
.progress-container {
display:none;
}
/*---- RIGHT FOOTER ---*/

.rightfooter {
position:absolute;
right:2.5em;
{block:iftogglefooter}
right:6em;
{/block:iftogglefooter}
display:flex;
align-items:center;
gap:.75em;
}
/* SEARCH BAR */
.searchbar {
display:flex;
align-items:center;
gap:.25em;
}
.searchbar i {
font-size:1.6em;
}
.searchbar:hover i {
}
.search {
border-radius:30px;
}
.searchbar:hover .search {
}
.search .query {
border: 0;
outline: 0;
font-size:1em;
width:100%;
}
::-webkit-input-placeholder {color: inherit; opacity:.75;}

:-moz-placeholder {color: inherit; opacity:.75;}
::-moz-placeholder {color: inherit; opacity:.75;}
:-ms-input-placeholder {color: inherit; opacity:.75;}
input:focus::-webkit-input-placeholder {color: transparent;}

input:focus:-moz-placeholder {color: transparent;}
input:focus::-moz-placeholder {color: transparent;}
input:focus:-ms-input-placeholder { color: transparent;}
/* SCROLL TO TOP */
#totop a {
display:flex;
align-items:center;
cursor:help;
}
#totop i {
font-size:1.6em;
}
#totop a:hover i {
animation-name:totop;
-moz-animation-name:totop;
}
@keyframes totop {
0% {
}
10% {
}
20% {
}
30% {
}
40% {
}
50% {
}
60% {
}
70% {
}
80% {
}
90% {
}
100% {
}
}
/*--- RESPONSIVENESS ----*/
@media only screen and (max-width: 1150px) {

header {left:0;}
button#theme-toggle {position:relative; left:auto;}
a.sidebarbutton {display:flex;}
body.explore-click #explore {left:0;}
#sidebar {display:none;}
body.sidebar-click #sidebar {display:flex;}
.sidebar-wrap {margin-top:4em; max-height:calc(100vh - 9em);}
}

.el-blogs a {width:calc(25% - 2.75em);}
.searchbar {display:none;}
}

.dropdown {justify-content:flex-end;}
a.cthrough b {display:none;}
.sub {width:auto;}
.el-updates, .el-bio {width:calc(100% - 2em);}
.el-blogs a {width:calc(50% - 2.5em);}
.el-links {flex-wrap:wrap;}
.el-linkblock {width:calc(33% - 1em);}
.el-socialswrap {width:100%; height:auto; flex-direction:row; align-items:center;}
.music-info {
display:none;
position:absolute;
bottom:calc(100% + 2px);
text-align:center;
white-space:nowrap;
padding:1em;
box-shadow:0 5px 10px 0 rgba(0,0,0,.2);
}
.music-container.play .music-info #title {text-shadow:none;}
footer:hover .music-info {display:block;}
}

section {width:90%;}
.tmblr-iframe-compact .tmblr-iframe--unified-controls, #controlsbutton, .ti-name
span {display:none;}
.explore-header {flex-direction:column; align-items:flex-start;}
}
{CustomCSS}
</style>
</head>
<body>
<script>
document.body.classList.add('fade-out');
window.addEventListener('DOMContentLoaded', () => {
document.body.classList.remove('fade-out');
});
</script>
<main>


<header>
<div class="topleft">

<button id="theme-toggle" aria-label="toggle dark or light mode" type="button">
<span class="light-on" title="turn off the lights"><i class="ph-moon"></i></span>
<span class="light-off" title="turn on the lights"><i class="ph-sun"></i></span>
</button>


<div class="pagination">
{block:Pagination}
{block:PreviousPage}
<div class="pagination-btn"><a title="go back" href="{previouspage}"><i
class="ph-caret-left"></i></a></div>
{/block:PreviousPage}
{/block:Pagination}
<div class="pagination-btn nopgn {block:Pagination}
{block:PreviousPage}yespgn{/block:PreviousPage}{/block:Pagination}"><a><i
class="ph-caret-left"></i></a></div>
<div
{block:Pagination}{block:NextPage}style="display:none;"{/block:NextPage}{/
block:Pagination} class="pagination-btn nopgn"><a><i
class="ph-caret-right"></i></a></div>
{block:Pagination}
{block:NextPage}
<div class="pagination-btn"><a title="go forward" href="{nextpage}"><i
class="ph-caret-right"></i></a></div>
{/block:NextPage}
{/block:Pagination}
</div>
{/block:Pagination}


{block:TagPage}
<div class="tdpage">
<div class="tdpage-text"><b>{TagResultCount}</b>posts / <b>#{Tag}</b></div>
</div>
{/block:TagPage}
{block:DayPage}
<div class="tdpage">
<div class="tdpage-text"><b>{MonthNumberWithZero}.{DayOfMonthWithZero}.
{Year}</b></div>
</div>
{/block:DayPage}
</div>
<div class="topright">

<div class="dropdown"><a href="#" class="cthrough"><img src="{PortraitURL-
128}"><b>@{Name}</b><i class="ph-caret-down-fill"></i></a>
<div class="sub">
<div class="sublinks">
<a title="toggle sidebar"
class="sidebarbutton"><b>sidebar</b><i class="ph-sidebar"></i></a>
{block:ifExploreMenu}<a title="open profile"
class="explorebutton"><b>profile</b><i
class="ph-user-square"></i></a>{/block:ifExploreMenu}
<a target="_blank"
href="https://tumblr.com/follow/{Name}"><b>follow</b><i class="ph-arrow-square-
out"></i></a>
<a target="_blank"
href="https://tumblr.com/blog/view/{Name}"><b>blog view</b><i class="ph-arrow-
square-out"></i></a>
<a target="_blank"
href="https://tumblr.com/message/{Name}"><b>message</b><i class="ph-arrow-square-
out"></i></a>
</div>
</div>
</div>
<div title="toggle controls" id="controlsbutton"><a><i
class="ph-gear"></i></a></div>
</div>
</header>


<div id="explore">
<div class="explore-wrap">
<div title="close profile" class="explorebutton"><i class="ph-x"></i></div>
<div class="explore-header">
<div class="eh-icon"><img src="{image:Profile}"></div>
<div class="eh-content">
<div class="eh-subtitle">profile</div>
<div class="eh-name">{text:Profile Name}</div>
<div class="eh-abtstats">
<li><i class="ph-{text:Profile Stat 1
Icon}"></i><span>{text:Profile Stat 1}</span></li>
{block:ifProfileStat2}<li><i class="ph-{text:Profile Stat 2
Icon}"></i><span>{text:Profile Stat 2}</span></li>{/block:ifProfileStat2}
{block:ifProfileStat3}<li><i class="ph-{text:Profile Stat 3
Icon}"></i><span>{text:Profile Stat 3}</span></li>{/block:ifProfileStat3}
</div>
</div>
</div>
<div class="explore-lower">
<div class="el-info">
<div class="el-subtitle">info</div>
<div class="el-updates">
{block:ifupdatestattext1}<li><b>{text:Update Stat Name
1}</b><span>{text:update stat text 1}</span></li>{/block:ifupdatestattext1}
</div>
<div class="el-bio">{text:About Text}</div>
{block:ifExploreBlogs}<div class="el-subtitle">{text:Blogs Section
Title}</div>
<div class="el-blogs">
<a href="https://{text:Blog 1 URL}.tumblr.com">
<div class="el-blogimg"><img src="{text:Blog 1 IMG}"></div>
<div class="el-blogtext">
<b>{text:Blog 1 URL}</b>
<span>{text:Blog 1 Title}</span>
</div>
</a>
{block:ifBlog2URL}<a href="https://{text:Blog 2
URL}.tumblr.com">
</div>
</a>{/block:ifBlog2URL}
URL}.tumblr.com">
</div>
URL}.tumblr.com">
</div>
URL}.tumblr.com">
</div>
URL}.tumblr.com">
</div>
</div>{/block:ifExploreBlogs}
{block:ifExploreLinks}
<div class="el-links">
{block:ifLinkSection1Title}<div class="el-linkblock">
<div class="el-subtitle">{text:Link Section 1 Title}</div>
<a href="{text:Explore Link 1 URL}">{text:Explore Link 1}</a>
{block:ifExploreLink2}<a href="{text:Explore Link 2
URL}">{text:Explore Link 2}</a>{/block:ifExploreLink2}
</div>{/block:ifLinkSection1Title}
{block:ifExploreSocials}<div class="el-socialswrap">
<div class="el-socials">
{block:ifSocialsLink1}<a title="{text:Socials Link 1}"
href="{text:Socials Link 1 URL}"><i class="ph-{text:Socials Icon
1}"></i></a>{/block:ifSocialsLink1}
</div>
<div class="el-socials">
</div>
</div>{/block:ifExploreSocials}
</div>{/block:ifExploreLinks}
</div>
</div>
</div>
</div>


<div id="sidebar">
<div class="sidebar-wrap">
<div class="title">
{block:ifProfileImage}<img src="{image:Profile}">{/block:ifProfileImage}
<img class="sidebar-icon" src="{PortraitURL-128}">
<a href="/">{Title}</a>
</div>
{block:ifCustomDescription}<div class="description">{text:Custom
Description}</div>{/block:ifCustomDescription}
<nav>
<div class="subtitle">navigate</div>
<a href="/"><i class="ph-house"></i><span>home</span></a>
{block:AskEnabled}<a href="/ask"><i
class="ph-chats-circle"></i><span>ask</span></a>{/block:AskEnabled}
<a href="/archive"><i class="ph-books"></i><span>archive</span></a>
{block:ifToggleFooter}
<a class="footerbutton"><i class="ph-music-notes"></i><span>toggle
footer</span></a>
{/block:ifToggleFooter}
</nav>
<div class="sidebar-links">
{block:ifSidebarLink1}<a href="{text:Sidebar Link 1 URL}"><i class="ph-
{text:Sidebar Link 1 Icon}"></i><span>{text:Sidebar Link
1}</span></a>{/block:ifSidebarLink1}
</div>
</div>
</div>
<section>


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


{block:Date}
<div class="topinfo">
<div class="topinfo-left">
{block:NotReblog}
<div class="topinfo-img"><a title="original post" href="/"><img
src="{PortraitURL-128}"></a></div>
{/block:NotReblog}
{block:RebloggedFrom}
<div class="topinfo-img"><a target="_blank" title="@{ReblogRootName}"
href="//{ReblogRootName}.tumblr.com"><img
src="{ReblogRootPortraitURL-128}"></a></div>
{/block:RebloggedFrom}
<div class="topinfo-textwrap">
{block:NotReblog}
<div class="ti-name"><span>{PostType} post by </span><a
href="{Permalink}">{Name}</a></div>
{/block:NotReblog}
<div class="ti-name"><span>{PostType} post by </span><a target="_blank"
href="{ReblogRootURL}">{ReblogRootName}</a></div>
<div class="ti-text">
<b class="time-ago">{TimeStamp}</b>
<span>●</span>
<b class="notecount">{NoteCountWithLabel}</b>
</div>
</div>
</div>
<div class="topinfo-right">
<a {block:PinnedPostLabel}style="display:none;"{/block:PinnedPostLabel}
title="view permalink" href="{Permalink}"><i
class="ph-link-simple-horizontal"></i></a>
{block:PinnedPostLabel}<a title="pinned post" href="{Permalink}"><i
class="ph-push-pin"></i></a>{/block:PinnedPostLabel}
</div>
</div>
{/block:Date}


{block:Photo}
<div class="photopost">
<img src="{PhotoURL-highres}" al="{photoalt}" class="photos">
{block:Caption}
{block:NotReblog}
<div class="caption">{Caption}</div>
{/block:NotReblog}
{block:Rebloggedfrom}
{block:Reblogs}
<div class="caption">
<div class="userlink
{block:IsDeactivated}deactive{/block:IsDeactivated}"><a
{block:IsDeactivated}title="deactivated"{/block:IsDeactivated}
href="{Permalink}"><div class="usericon"><img src="{PortraitURL-64}"></div><div
class="username">{Username}</div></a></div>
{Body}
</div>
{/block:Reblogs}
{/block:Caption}
</div>
{/block:Photo}


{block:Photoset}
<div class="photopost">
<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>
{block:Caption}
{block:NotReblog}
{/block:NotReblog}
{block:Reblogs}
{Body}
</div>
{/block:Reblogs}
{/block:Caption}
</div>
{/block:Photoset}


{block:Text}
{block:Title}
<h1><a href="{Permalink}">{Title}</a></h1>
{/block:Title}
{block:NotReblog}
<div class="caption">{Body}</div>
{/block:NotReblog}
{block:Reblogs}
{Body}
</div>
{/block:Reblogs}
{/block:Text}


{block:Video}
<div class="video">{Video-700}</div>
{block:Caption}
{block:NotReblog}
{/block:NotReblog}
{block:Reblogs}
{Body}
</div>
{/block:Reblogs}
{/block:Caption}
{/block:Video}

{block:Chat}
<ul class="chat">
{block:Lines}
{block:Label}<div class="chatter">{Label}</div>{/block:Label}
<li>{Line} <div class="blurb"></div></li>
{/block:Lines}
</ul>
{/block:Chat}


{block:Link}
<div class="linkpost">
<a href="{URL}">
{block:Thumbnail}<div class="linkimage"><img src="{Thumbnail-HighRes}">
<div class="linkimage-overlay">{Name}</div>
</div>{/block:Thumbnail}
<div class="link" {block:Thumbnail}id="thumbnail"{/block:Thumbnail}>
<div class="linkicon"><i class="ph-link"></i></div>
<div class="linktitle"><b>{Name}</b>
{block:Excerpt}<span>{Excerpt}</span>{/block:Excerpt}
</div>
</div>
</a>
</div>
{block:Description}
{block:NotReblog}
<div class="caption">{Description}</div>
{/block:NotReblog}
{/block:Description}
{block:Reblogs}
{Body}
</div>
{/block:Reblogs}
{/block:Link}


{block:Audio}
<div class="audiopost">
<div class="audio">
<div class="albumart">{block:albumart}<img
src="{AlbumArtURL}">{/block:albumart}</div>
<div class="audiowrap">
<div class="audiotitle">
<b>{block:trackname}{Trackname}{/block:trackname}</b>
<span>{block:Album}{Album}{/block:Album}</span>
<span>{block:Artist}{Artist}{/block:Artist}</span>
</div>
<div class="audioactual">
<i class="ph-shuffle"></i>
<i class="ph-skip-back"></i>
<div class="audioplaybg"><div
class="audioplay">{block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}</div></div>
<i class="ph-skip-forward"></i>
<i class="ph-repeat-once"></i>
</div>
</div>
</div>
</div>
{block:Caption}
{block:NotReblog}
{/block:NotReblog}
{block:Reblogs}
{Body}
</div>
{/block:Reblogs}
{/block:Caption}
{/block:Audio}


{block:Quote}
<div class="quotepost">
<div class="quote">
<div class="quotewrap"><i class="ph-quotes"></i><span>{Quote}</span></div>
<div class="source">
{Source}
</div>
</div>
</div>
{/block:Quote}


{block:Answer}
<div class="askwrap">
<div class="asker">
<div class="askerstart">
<b>{Asker}</b>
<span>sent a message</span>
</div>
<div class="askicon"><img src="{AskerPortraitURL-64}"></div>
</div>
<div class="question">
{Question}
<div class="blurb"></div>
</div>
</div>
{block:Answerer}
<div class="answerwrap">
<div class="answerer">
<div class="usericon"><img src="{AnswererPortraitURL-64}"></div>
<div class="answererwrap">
<div class="username"
{block:IsDeactivated}title="deactivated"{/block:IsDeactivated}>{Answerer}</div>
<div class="answermsg">replied</div>
</div>
</div>
<div class="answer">
{Answer}</div>
</div>
{/block:Answerer}
{block:NotReblog}
<div class="answerwrap">
<div class="answerer">
<div class="usericon"><img src="{PortraitURL-64}"></div>
<div class="answererwrap">
<div class="username"><a
href="/">{Name}</a></div>
<div class="answermsg">replied</div>
</div>
</div>
<div class="answer">
{Replies}</div>
</div>
{/block:NotReblog}
{block:Reblogs}
{Body}
</div>
{/block:Reblogs}
{/block:Answer}
</div>
{block:Date}
<div class="bottominfo-wrap">

{block:HasTags}
<div class="{select:tags}">
{block:Tags}<a href="{TagURL}"><span>{Tag}</span></a>{/block:Tags}
</div>
{/block:HasTags}


<div class="bottominfo">
<div class="bottominfo-left">
<div class="bil-icon"><a title="reblog" href="{ReblogURL}"
target="_blank"><i class="ph-arrows-clockwise"></i></a></div>
<div class="bil-like"><a title="like" class="likeb"
href="#">{LikeButton}<span class="actual-button"><i
class="ph-heart-straight"></i></span></a></div>
<div title="toggle tags" class="{select:tags}button"><i class="ph-
hash"></i></div>
<div class="bil-menu">
<a title="more info" class="bil-button"><i class="ph-dots-three-
bold"></i></a>
<div class="bil-sub">
<a title="{Month} {DayofMonth}{DayofMonthSuffix}, {Year}"
href="/day/{Year}/{MonthNumberWithZero}/{dayofmonthwithzero}"><b>view day
page</b><i class="ph-clock"></i></a>
<a target="_blank" title="@{ReblogParentName}"
href="{ReblogParentURL}"><b>reblogged from</b><i class="ph-arrow-counter-
clockwise"></i></a>
{block:ContentSource}
<a href="{SourceURL}"><b>{lang:Source}</b><i class="ph-
info"></i></a>
{/block:ContentSource}
<a id="copybutton" data-clipboard-text="{Permalink}"><b>copy
link to post</b><i class="ph-copy"></i></a>
</div>
</div>
</div>
</div>

</div>
{/block:Date}
</article> 


{block:Date}
{block:PermalinkPage}
<div class="perma-page">
<div class="perma-one">
<i class="ph-map-pin"></i>
{block:NotReblog}
<a href="/">original post by
<br><span>{Name}</span>
</a>
{/block:NotReblog}
<a href="{ReblogRootURL}">post by
<br><span>{ReblogRootName}</span>
</a>
</div>
<div class="perma-two">
<i class="ph-arrow-counter-clockwise"></i>
<a href="{ReblogParentURL}">reblogged via
<br><span>{ReblogParentName}</span>
</a>
</div>
<div class="perma-three">
<i class="ph-clock"></i>
<a title="view day page"
href="/day/{Year}/{MonthNumberWithZero}/{dayofmonthwithzero}">{ShortDayofWeek},
{ShortMonth} {DayofMonth}{DayofMonthSuffix}
<br><span>at {12hour}{ampm}</span>
</a>
</div>
</div>
{/block:PermalinkPage}
{/block:Date}


{block:PermalinkPage}{block:Date}
{block:NoteCount}{block:PostNotes}
<div class="notes">
<div class="notes-title">
<div class="notes-titleicon"><i class="ph-music-note"></i></div>
<span>{NoteCountWithLabel}</span>
</div>
<div class="notes-container">{PostNotes-64}</div>
</div>
{/block:PostNotes}{/block:NoteCount}
{/block:Date}{/block:PermalinkPage}
{/block:Posts}
</section> 


<footer>
<div class="music-container" id="music-container">
<audio src="{text:Song URL}" id="audio"></audio>
<div class="img-container">
{block:ifMusicPlayer}<img src="{text:Song Image URL}" alt="music-cover"
id="cover">{/block:ifMusicPlayer}
<img src="{PortraitURL-128}" alt="music-cover" id="cover" class="mpcover">
<div class="music-info">
{block:ifMusicPlayer}<div id="title">{text:Song Name}</div>
<div id="artist">{text:Song Artist}</div>{/block:ifMusicPlayer}
<div class="mptitle" id="title">{Title}</div>
<div class="mpartist" id="artist">{Name}</div>
</div>
</div>
<div class="navigation">
<a title="random post" class="footerlink" href="/random">
<i class="ph-shuffle"></i>
</a>
<a class="footerlink" title="archive" href="/archive">
<i class="ph-skip-back"></i>
</a>
{block:ifMusicPlayer}<button title="play song" id="play" class="action-btn
action-btn-big">
<i class="ph-play"></i>
</button>{/block:ifMusicPlayer}
<button title="home" id="play" class="action-btn action-btn-big mphome">
<a href="/"><i class="ph-house"></i></a>
</button>
<a title="contact" class="footerlink" href="/ask">
<i class="ph-skip-forward"></i>
</a>
<a title="refresh" class="footerlink" href="/">
<i class="ph-repeat-once"></i>
</a>
</div>
<div class="rightfooter">
<div class="searchbar">
<i class="ph-magnifying-glass"></i>
<div class="searchwrap">
<form class="search" action="javascript:return false">
<input type="text" class="query" placeholder="search blog"></form>
</div>
</div>
<div id="totop"><a title="back to top" href="#top" target="_self"><i
class="ph-arrow-up"></i></a></div>

<div class="credit">
<a title="kyoshi theme by sage" href="https://demontimes.tumblr.com"><i
class="ph-ghost"></i></a>
</div>
</div>
</div>
</footer>
</main> 
<script>
// music player
const musicContainer = document.querySelector('.music-container');
const playBtn = document.querySelector('#play');
const audio = document.querySelector('#audio');
const title = document.querySelector('#title');
const cover = document.querySelector('#cover');
function playSong() {
musicContainer.classList.add('play');
playBtn.querySelector('#play i').classList.remove('ph-play');
playBtn.querySelector('#play i').classList.add('ph-pause');
audio.play();
}
function pauseSong() {
musicContainer.classList.remove('play')
playBtn.querySelector('#play i').classList.add('ph-play')
playBtn.querySelector('#play i').classList.remove('ph-pause')
audio.pause()
}
// event listeners
playBtn.addEventListener('click', () => {
const isPlaying = musicContainer.classList.contains('play');
if (isPlaying) {
pauseSong();
} else {
playSong();
}
});
document.getElementById("audio").loop = true;
/// photoset
$('.photo-slideshow').pxuPhotoset({
lightbox: true,
rounded: 'corners',
gutter: '4px',
borderRadius: '{select:Corners}',
photoset: '.photo-slideshow',
photoWrap: '.photo-data',
photo: '.pxu-photo'
});
});
// tooltips
tippy('[title]', {
theme: 'custom',
arrow: false,
followCursor: true,
delay: 100,
placement: 'bottom',
offset: "40, 10",
zIndex: 9999999999,
maxWidth: 400,
content(reference) {
const title = reference.getAttribute('title');
reference.removeAttribute('title');
return title;
},
});
// notes
$('article').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');
}
});
// videos
flexibleFrames($(".video")); // $(".video") is the class selector passed in the
argument
});
// updates click
$('a.cthrough').click(function(){
$('a.cthrough i').toggleClass('ph-caret-up-fill');
$('body').toggleClass('cthroughclick');
});
});
// header menu / cthrough

$(".sub").hide();
$(".cthrough").click(function(event){
$(this).next(".sub").slideToggle(0);
event.preventDefault();
$(this).toggleClass('upside', 0);
});
});
// bottom right post info

$(".bil-sub").hide();
$("a.bil-button").click(function(event){
$(this).next(".bil-sub").slideToggle(0);
event.preventDefault();
$(this).toggleClass('upside', 0);
$(this).toggleClass('bil-clicked');
});
});
// searchbar
$('.search').submit(function(event){
var value = $('input:first').val();
location.replace('http://{Name}.tumblr.com/search/' + value);
});
});
// scroll to top
$('#totop a').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
});
// header
var body = document.getElementsByTagName('header')[0];
// trigger this function every time the user scrolls

window.onscroll = function (event) {
var scroll = window.pageYOffset;
if (scroll < 15) {
// transparent
body.style.backgroundColor = 'transparent';
body.style.boxShadow = '0 5px 20px 0 transparent';
} else if (scroll >= 15) {
// solid
body.style.backgroundColor = 'var(--ColorPosts)';
body.style.boxShadow = '20px 5px 20px 0 rgba(0,0,0,.1)';
}
}
// toggle tags
$('.clicktags').hide();
$('.clicktagsbutton').click(function() {
$(this).closest('article').find('.clicktags').slideToggle(0);
$(this).toggleClass('tag-clicked');
return false;
});
});
// tumblr controls
$('#controlsbutton').click(function(){
$('body').toggleClass('controlsclick');
});
});
// explore menu
$('.explorebutton').click(function(){
$('body').toggleClass('explore-click');
});
});
// responsive sidebar
$('.sidebarbutton').click(function(){
$('body').toggleClass('sidebar-click');
});
});
// toggle footer
$('.footerbutton').click(function(){
$('body').toggleClass('footer-click');
});
});
// day/night mode
const toggle = document.getElementById("theme-toggle");
toggle.onclick = function () {
// add class to html and make transition snappy
document.documentElement.classList.add("theme-transition");
// alright lets retrive the info from data-theme
let currentTheme = document.documentElement.getAttribute("data-theme");
// if it's dark already, let's go into the light
let targetTheme = "light";
// but if it is light let's toggle dark mode
if (currentTheme === "light") {
targetTheme = "dark";
}
// ok now that theme has been toggled, get rid of snappy transition
window.setTimeout(function () {
document.documentElement.classList.remove("theme-transition");
}, 50);
// we're going to save our theme preference now
document.documentElement.setAttribute("data-theme", targetTheme);
localStorage.setItem("theme", targetTheme);
};
</script>
</body>
</html>

Theme 16 - Kyoshi

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Theme 16 - Kyoshi

Uploaded by

Copyright:

Available Formats

<!

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

<meta name="color:Background" content="#e0e0e0" />

<meta name="color:Night Background" content="#1e1e1e" />

<meta name="color:Gradient One" content="#1d6700"/>

<meta name="select:Corners" content="10px" title="round"/>

<meta name="select:Glow" content="0 0 10px" title="on"/>

<meta name="select:Tags" content="tags" title="default"/>

<meta name="if:Music Player" content="1"/>

<meta name="text:Post Margin" content="80"/>

<meta name="text:Song Name" content="song name"/>

<meta name="text:Profile Name" content="name"/>

<meta name="text:Update Stat Name 1" content="watching"/>

<meta name="text:Blogs Section Title" content="blogs"/>

<meta name="text:Socials Link 1" content="instagram"/>

/*--- TOOLTIPS ---*/

/*--- SCROLLBAR ---*/

/*--- TEXT SELECTION ---*/

/*--- COMMON ---*/

.description a, a.read_more, .el-bio a, .el-updates a {

.description a:after, a.read_more:after, .el-bio a:after, .el-updates a:after {

.description a:hover:after, a.read_more:hover:after, .el-bio a:hover:after, .el-

h1 {font-size:1.3em; letter-spacing:.1em; padding:0; margin:.5em .25em 0 .5em;

/*--- CONTAINERS ---*/

/*--- TOP BUTTONS ---*/

/*--- HEADER RIGHT ---*/

/* DROP DOWN & EXPLORE BUTTON */

/*--- EXPLORE MENU ---*/

/*---- SIDEBAR ----*/

/*---- TOP POST INFO ---*/

/* top info left */

/* top info right */

/*--- POSTS ----*/

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

.caption a:hover {border-bottom:1px solid var(--ColorLink);}

/*--- PHOTO POSTS ----*/

.photopost {width:calc(100% - 2em); padding:1em;}

.vignette, #vignette {opacity:0;}

/*--- LINK POSTS ---*/

.linkpost a:hover .linkicon i {

/*--- AUDIO POSTS ---*/

.audiopost {position:relative; width:calc(100% - 2em); padding:1em;}

/*--- QUOTE POSTS ----*/

/*--- ANSWER POSTS ---*/

.answerer .usericon img {

.question a:after, .answer a:after {

.question a:hover:after, .answer a:hover:after {

.question a {color:var(--ColorGradientText);border-bottom:1px solid var(--

/*--- CHAT POSTS ---*/

.chat {width:calc(100% - 2em); margin:0; padding:1em;}

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

/*--- BOTTOM POST INFO ---*/

/--- TOOLTIPS ---/

/--- SCROLLBAR ---/

/--- TEXT SELECTION ---/

/--- COMMON ---/

/--- CONTAINERS ---/

/--- TOP BUTTONS ---/

/--- HEADER RIGHT ---/

/--- EXPLORE MENU ---/

/---- SIDEBAR ----/

/---- TOP POST INFO ---/

/--- POSTS ----/

/--- PHOTO POSTS ----/

/--- LINK POSTS ---/

/--- AUDIO POSTS ---/

/--- QUOTE POSTS ----/

/--- ANSWER POSTS ---/

/--- CHAT POSTS ---/

/--- BOTTOM POST INFO ---/

/--- TAGS ---/

/--- PERMALINK INFO ---/

/--- POST NOTES ---/

/--- TAG / DAY PAGES ---/

/---- MUSIC PLAYER ----/

/--- CREDIT: DO NOT TOUCH ---/

/--- FOOTER ---/

/---- RIGHT FOOTER ---/