API tools faq
paste
rottenfollow229

base code (npf compatible)

rottenfollow229
Jun 26th, 2017 (edited)
182
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 66.70 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. ╭━━━┳╮╱╭┳━━━┳━━━┳━━━━┳╮╱╭┳━━━┳━╮╭━┳━━━┳━━━╮
  4. ┃╭━╮┃┃╱┃┃╭━━┫╭━╮┃╭╮╭╮┃┃╱┃┃╭━━┫┃╰╯┃┃╭━━┫╭━╮┃
  5. ┃╰━━┫╰━╯┃╰━━┫┃╱┃┣╯┃┃╰┫╰━╯┃╰━━┫╭╮╭╮┃╰━━┫╰━━╮
  6. ╰━━╮┃╭━╮┃╭━━┫╰━╯┃╱┃┃╱┃╭━╮┃╭━━┫┃┃┃┃┃╭━━┻━━╮┃
  7. ┃╰━╯┃┃╱┃┃╰━━┫╭━╮┃╱┃┃╱┃┃╱┃┃╰━━┫┃┃┃┃┃╰━━┫╰━╯┃
  8. ╰━━━┻╯╱╰┻━━━┻╯╱╰╯╱╰╯╱╰╯╱╰┻━━━┻╯╰╯╰┻━━━┻━━━╯
  9.  
  10. Theme ⎾SPECTRUM⏌ by sheathemes @ tumblr
  11.  
  12.  
  13. TERMS
  14.  
  15. > Do not redistribute my codes and claim it as your own
  16.  
  17. > Do not change, move, or delete my credits
  18.  
  19. > Use pieces of my code for your own work
  20.  
  21. > Use any of my themes or pages as a base code for your own work
  22.  
  23. > Do not do any major customizations to my themes and try to pass it off as your own.
  24.  
  25. CREDITS
  26.  
  27. > PixelUnion/Extended-Tumblr-Photoset: https://github.com/PixelUnion/Extended-Tumblr-Photoset | Modified PXU photoset script tutorial by bychloethemes @ tumblr: http://bychloethemes.tumblr.com/post/155956945114/modified-pxu-photoset-script-modified-by
  28.  
  29. > Responsive tumblr videos and external iframes script: https://nouvae.tumblr.com/post/176815415055/tutorial-responsive-tumblr-videos-and-external
  30.  
  31. > Masonry script: https://masonry.desandro.com/
  32.  
  33. > Time ago script: https://bychloethemes.tumblr.com/plugins/timeago
  34.  
  35. > Click to show tumblr controls: https://seyche.tumblr.com/post/643682133088583680/hi-looove-your-new-blog-theme-i-was-wondering-if
  36.  
  37. > Custom Tumblr lightbox: http://shythemes.tumblr.com/post/140444996328/tutorial-lightboxes
  38.  
  39. > Tippy.js: https://atomiks.github.io/tippyjs/
  40.  
  41. > Icons: https://phosphoricons.com/
  42.  
  43. > Smoothscroll script: https://cdnjs.com/libraries/smoothscroll
  44.  
  45. > NPF Photoset Fix: https://annalogs.tumblr.com/photosets
  46.  
  47. > customaudio.js: https://annasthms.tumblr.com/more/js/customaudio/new
  48.  
  49. > Mini spotify player: https://glenthemes.tumblr.com/post/659842079511461888
  50.  
  51. > NPF images fix v3.0: https://github.com/npf-images-v3/npf-images-v3.github.io/blob/main/WELCOME.md
  52.  
  53. > Accessible dark mode: https://rstylr.tumblr.com/plugins/darkmode
  54.  
  55. !-->
  56.  
  57. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  58. <html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en" data-theme="light">
  59.  
  60. <head>
  61.  
  62. <script>
  63. const storedTheme = localStorage.getItem("theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
  64. if (storedTheme) document.documentElement.setAttribute("data-theme", storedTheme);  
  65. </script>
  66.  
  67. <!------------Smooth Scroll Script------------>
  68. <script src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
  69. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.6/SmoothScroll.min.js"></script>
  70. <!------------Smooth Scroll Script------------>
  71.  
  72. <!--------------Custom Fonts-------------->
  73. <link rel="preconnect" href="https://fonts.gstatic.com">
  74. <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Lato:wght@400;700&family=Noto+Sans+JP:wght@400;700&family=Open+Sans:wght@400;700&family=Playfair+Display&family=Lora:wght@500;700&family=Poppins:wght@400;700&family=Roboto:wght@400;700&family=Epilogue:wght@400;700&family=Source+Sans+Pro:wght@400;700&display=swap" rel="stylesheet">
  75. <!--------------Custom Fonts-------------->
  76.  
  77. <!--------------Homelinks Icons -------------->
  78. <script src="https://unpkg.com/phosphor-icons"></script>
  79. <!--------------Homelinks Icons-------------->
  80.  
  81.     <title>{Title}</title>
  82.     <link rel="shortcut icon" href="{Favicon}">
  83.     <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  84.     <meta charset="utf-8">
  85.     {block:Description}
  86.     <meta name="description" content="{MetaDescription}" />
  87.     {/block:Description}
  88.     <meta http-equiv="x-dns-prefetch-control" content="off"/>
  89.     <meta name="viewport" content="width=device-width, initial-scale=1">
  90.  
  91. <!--------------Custom Options-------------->
  92. <meta name="color:background" content="#ffffff" />
  93. <meta name="color:accent" content="#74aa98" />
  94. <meta name="color:accented text" content="#ffffff" />
  95. <meta name="color:Text" content="#292929" />    
  96. <meta name="color:bold" content="#74aa98"/>
  97. <meta name="color:italic" content="#292929"/>
  98. <meta name="color:Links" content="#000000" />
  99. <meta name="color:Link Hover" content="#74aa98" />
  100. <meta name="color:text selection" content="#292929" />
  101. <meta name="color:text selection background" content="#74aa98" />
  102. <meta name="color:tooltip" content="#ffffff" />
  103. <meta name="color:tooltip background" content="#414141" />
  104. <meta name="color:Blockquote" content="#74aa98" />
  105. <meta name="color:scrollbar" content="#74aa98" />
  106. <meta name="color:linkbar links" content="#ffffff" />
  107. <meta name="color:linkbar links hover" content="#74aa98" />
  108. <meta name="color:linkbar" content="#414141" />
  109. <meta name="color:header content" content="#292929" />
  110. <meta name="color:header content background" content="#ffffff" />
  111. <meta name="color:description" content="#292929" />
  112. <meta name="color:Posts" content="#fafafa" />
  113. <meta name="color:Post Title" content="#000000" />
  114. <meta name="color:Post Borders" content="#e8e8e8" />
  115. <meta name="color:question" content="#000000" />
  116. <meta name="color:question background" content="#fafafa" />
  117. <meta name="color:chat odd" content="#000000"/>
  118. <meta name="color:chat even" content="#74aa98"/>
  119. <meta name="color:pagination" content="#000000" />
  120. <meta name="color:permalink" content="#000000" />
  121. <meta name="color:permalink background" content="#fafafa" />
  122. <meta name="color:permalink hover" content="#74aa98" />
  123. <meta name="color:permalink like" content="#df2b2b" />
  124. <meta name="color:permalink reblog" content="#38bb27" />
  125.  
  126. <meta name="color:&#x2727;*&#x325;&#x2DA; DARK MODE BELOW *&#x325;&#x2DA;&#x2727;">
  127.  
  128. <!--------------NIGHT MODE-------------->
  129.  
  130. <meta name="color:accent night" content="#92bcae" />
  131. <meta name="color:accented text night" content="#000000" />
  132. <meta name="color:background night" content="#313131" />
  133. <meta name="color:text night" content="#ffffff" />
  134. <meta name="color:bold night" content="#92bcae" />
  135. <meta name="color:italic night" content="#ffffff" />
  136. <meta name="color:links night" content="#ffffff" />
  137. <meta name="color:link hover night" content="#92bcae" />
  138. <meta name="color:text selection night" content="#000000" />
  139. <meta name="color:text selection background night" content="#92bcae" />
  140. <meta name="color:tooltip night" content="#ffffff" />
  141. <meta name="color:tooltip background night" content="#414141" />
  142. <meta name="color:linkbar links night" content="#ffffff" />
  143. <meta name="color:linkbar links hover night" content="#92bcae" />
  144. <meta name="color:linkbar night" content="#414141" />
  145. <meta name="color:header content night" content="#ffffff" />
  146. <meta name="color:header content background night" content="#414141" />
  147. <meta name="color:description night" content="#ffffff" />
  148. <meta name="color:posts background night" content="#414141" />
  149. <meta name="color:posts title night" content="#ffffff" />
  150. <meta name="color:post borders night" content="#323131" />
  151. <meta name="color:question night" content="#ffffff" />
  152. <meta name="color:question background night" content="#494949" />
  153. <meta name="color:chat odd night" content="#ffffff"/>
  154. <meta name="color:chat even night" content="#92bcae"/>
  155. <meta name="color:pagination night" content="#ffffff" />
  156. <meta name="color:permalink night" content="#ffffff" />
  157. <meta name="color:permalink background night" content="#494949" />
  158. <meta name="color:permalink hover night" content="#92bcae" />
  159. <meta name="color:permalink like night" content="#df2b2b" />
  160. <meta name="color:permalink reblog night" content="#38bb27" />
  161.  
  162. <meta name="select:Background Attachment" content="fixed" title="fixed">
  163. <meta name="select:Background Attachment" content="scroll" title="scroll">
  164. <meta name="select:Background Repeat" content="repeat" title="repeat">
  165. <meta name="select:Background Repeat" content="no-repeat" title="no repeat">
  166.  
  167. <meta name="select:font size" content="11" title="11px">
  168. <meta name="select:font size" content="12" title="12px">
  169. <meta name="select:font size" content="13" title="13px">
  170. <meta name="select:font size" content="14" title="14px">
  171. <meta name="select:font size" content="15" title="15px">
  172.  
  173. <meta name="select:text align" content="left" title="left">
  174. <meta name="select:text align" content="justify" title="justify">
  175. <meta name="select:description text align" content="center" title="center">
  176. <meta name="select:description text align" content="justify" title="justify">
  177.  
  178. <meta name="select:Post Size" content="400" title="400px">
  179. <meta name="select:Post Size" content="450" title="450px">
  180. <meta name="select:Post Size" content="475" title="475px">
  181. <meta name="select:Post Size" content="500" title="500px">
  182. <meta name="select:Post Size" content="525" title="525px">
  183. <meta name="select:Post Size" content="540" title="540px">
  184. <meta name="select:Post Size" content="650" title="650px">
  185. <meta name="select:Post Size" content="700" title="700px">
  186.  
  187. <meta name="select:Photoset gutter" content="1" title="1px">
  188. <meta name="select:Photoset gutter" content="2" title="2px">
  189. <meta name="select:Photoset gutter" content="4" title="4px">
  190. <meta name="select:Photoset gutter" content="6" title="6px">
  191. <meta name="select:Photoset gutter" content="8" title="8px">
  192. <meta name="select:Photoset gutter" content="10" title="10px">
  193.  
  194. <meta name="text:main font" content="IBM Plex Sans">
  195. <meta name="text:bottom margins" content="100" />
  196.  
  197. <meta name="text:about name" content="name here" />
  198. <meta name="text:about age" content="age here" />
  199. <meta name="text:about pronouns" content="pronous here" />
  200. <meta name="text:about location" content="location here" />
  201. <meta name="text:about zodiac" content="zodiac here" />
  202.  
  203. <meta name="text:social media URL 1" content="social media URL 1" />
  204. <meta name="text:social media name 1" content="Instagram" />
  205. <meta name="text:social media URL 2" content="social media URL 2" />
  206. <meta name="text:social media name 2" content="Twitter" />
  207. <meta name="text:social media URL 3" content="social media URL 3" />
  208. <meta name="text:social media name 3" content="Discord" />
  209. <meta name="text:social media URL 4" content="social media URL 4" />
  210. <meta name="text:social media name 4" content="Tiktok" />
  211.  
  212. <meta name="text:CustomLink1URL" content="Link 1 URL" />
  213. <meta name="text:CustomLink1Name" content="Link 1" />
  214. <meta name="text:CustomLink2URL" content="Link 2 URL" />
  215. <meta name="text:CustomLink2Name" content="Link 2" />
  216. <meta name="text:CustomLink3URL" content="Link 3 URL" />
  217. <meta name="text:CustomLink3Name" content="Link 3" />
  218. <meta name="text:CustomLink4URL" content="Link 4 URL" />
  219. <meta name="text:CustomLink4Name" content="Link 4" />
  220. <meta name="text:CustomLink5URL" content="Link 5 URL" />
  221. <meta name="text:CustomLink5Name" content="Link 5" />
  222. <meta name="text:CustomLink6URL" content="Link 6 URL" />
  223. <meta name="text:CustomLink6Name" content="Link 6" />
  224.  
  225. <meta name="image:background" content=""/>
  226. <meta name="image:header" content=""/>
  227. <meta name="image:sidebar" content=""/>
  228.  
  229. <meta name="if:header" content="1"/>
  230. <meta name="if:blog label" content="1"/>
  231. <meta name="if:Small Cursor" content="0" />
  232. <meta name="if:Custom Text Selection" content="0"/>
  233. <meta name="if:Faded Images" content="0"/>
  234. <meta name="if:Grayscale Images" content="0"/>
  235. <meta name="if:Show Captions" content="1"/>
  236.  
  237. <meta name="if:Link1" content="1" />
  238. <meta name="if:Link2" content="1" />
  239. <meta name="if:Link3" content="1" />
  240. <meta name="if:Link4" content="1" />
  241. <meta name="if:Link5" content="1" />
  242. <meta name="if:Link6" content="1" />
  243.  
  244. <script>
  245. const storedTheme = localStorage.getItem("theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
  246. if (storedTheme) document.documentElement.setAttribute("data-theme", storedTheme);  
  247. </script>
  248.  
  249. <!--
  250.        NPF images fix v3.0 by @glenthemes [2021]
  251.        💌 git.io/JRBt7
  252. --->
  253. <script src="//npf-images-v3.github.io/script.js"></script>
  254. <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
  255. <style tmblr-npf>
  256. :root {
  257.     --NPF-Caption-Spacing: 0.5em;
  258.     --NPF-Image-Spacing: 4px;
  259. }
  260. </style>
  261.  
  262. <style type="text/css">
  263.  
  264. :root {
  265.    
  266.     /*----------BLOG OPTIONS----------*/
  267.     --body-font: '{text:main font}';
  268.     --text-font: {select:font size}px;
  269.     --post-size: {select:post size}px;
  270.    
  271.     --skill-percentage-one: {text:skill percentage one}%;
  272.     --skill-percentage-two: {text:skill percentage two}%;
  273.     --skill-percentage-three: {text:skill percentage three}%;
  274.     --skill-percentage-four: {text:skill percentage four}%;
  275.  
  276. }
  277.  
  278.     /*----------COLOR OPTIONS----------*/
  279.  
  280. :root, html[data-theme='light'] {
  281.     --LightOn: block; /* displays <span> with moon icon */
  282.     --LightOff: none;  /* hides <span> with sun icon */
  283.    
  284.     --main-background: {color:background};
  285.     --accent: {color:accent};
  286.     --accented-text: {color:accented text};
  287.     --lightbox-background: rgba({RGBcolor:background}, 0.6);
  288.     --audio-player-background: rgba({RGBcolor:posts}, 0.8);
  289.     --audio-background:  rgba({RGBcolor:posts}, 0.9);
  290.     --main-text: {color:text};
  291.     --bold: {color:bold};
  292.     --italic: {color:italic};
  293.     --main-links: {color:links};
  294.     --link-hover: {color:link hover};
  295.     --text-selection: {color:text selection};
  296.     --text-selection-background: {color:text selection background};
  297.     --tooltip: {color:tooltip};
  298.     --tooltip-background: {color:tooltip background};
  299.     --blockquote: {color:blockquote};
  300.     --scrollbar: {color:scrollbar};
  301.     --linkbar-links: {color:linkbar links};
  302.     --linkbar-links-hover: {color:linkbar links hover};
  303.     --description: {color:description};
  304.     --linkbar: {color:linkbar};
  305.     --header-content: {color:header content};
  306.     --header-content-background: rgba({RGBcolor:header content background}, 0.8);
  307.     --main-posts: {color:posts};
  308.     --post-title: {color:post title};
  309.     --post-borders: {color:post borders};
  310.     --question: {color:question};
  311.     --question-background: {color:question background};
  312.     --chat-odd: {color:chat odd};
  313.     --chat-even: {color:chat even};
  314.     --pagination: {color:pagination};
  315.     --permalink: {color:permalink};
  316.     --permalink-background: {color:permalink background};
  317.     --permalink-hover: {color:permalink hover};
  318.     --permalink-like: {color:permalink like};
  319.     --permalink-reblog: {color:permalink reblog};
  320. }
  321.  
  322. html[data-theme='dark'] {
  323.     --LightOn: none; /* hides <span> with moon icon */
  324.     --LightOff: block; /* displays <span> with sun icon */
  325.    
  326.     --accent: {color:accent night};
  327.     --accented-text: {color:accented text night};
  328.     --main-background: {color:background night};
  329.     --lightbox-background: rgba({RGBcolor:background night}, 0.6);
  330.     --audio-player-background: rgba({RGBcolor:posts background night}, 0.8);
  331.     --audio-background:  rgba({RGBcolor:posts background night}, 0.9);
  332.     --main-text: {color:text night};
  333.     --bold: {color:bold night};
  334.     --italic: {color:italic night};
  335.     --main-links: {color:links night};
  336.     --link-hover: {color:link hover night};
  337.     --text-selection: {color:text selection night};
  338.     --text-selection-background: {color:text selection background night};
  339.     --tooltip: {color:tooltip night};
  340.     --tooltip-background: {color:tooltip background night};
  341.     --description: {color:description night};
  342.     --linkbar-links: {color:linkbar links night};
  343.     --linkbar-links-hover: {color:linkbar links hover night};
  344.     --header-content: {color:header content night};
  345.     --header-content-background: rgba({RGBcolor:header content background night},0.8);
  346.     --linkbar: {color:linkbar night};
  347.     --main-posts: {color:posts background night};
  348.     --post-borders: {color:post borders night};
  349.     --post-title: {color:posts title night};
  350.     --question: {color:question night};
  351.     --question-background: {color:question background night};
  352.     --chat-odd: {color:chat odd night};
  353.     --chat-even: {color:chat even night};
  354.     --pagination: {color:pagination night};
  355.     --permalink: {color:permalink night};
  356.     --permalink-background: {color:permalink background night};
  357.     --permalink-hover: {color:permalink hover night};
  358.     --permalink-like: {color:permalink like night};
  359.     --permalink-reblog: {color:permalink reblog night};
  360. }
  361.  
  362. html.theme-transition,
  363. html.theme-transition *,
  364. html.theme-transition *:before,
  365. html.theme-transition *:after {
  366.   transition: 0s !important;
  367.   transition-delay: 0 !important;
  368. }
  369.  
  370. /*----------TUMBLR CONTROLS----------*/
  371.  
  372. iframe.tmblr-iframe {
  373.     opacity: 0;
  374.     visibility: hidden;
  375.     position:fixed!important;
  376.     z-index: 300!important;
  377.     top: 80px!important;
  378.     right: 70px!important;
  379.     opacity:0.6!important;
  380.     transform:scale(0.7);
  381.     transform-origin:100% 0;
  382.     -webkit-transform:scale(0.7);
  383.     -webkit-transform-origin:100% 0;
  384.     -o-transform:scale(0.7);
  385.     -o-transform-origin:100% 0;
  386.     -moz-transform:scale(0.7);
  387.     -moz-transform-origin:100% 0;
  388.     -ms-transform:scale(0.7);
  389.      filter:invert(1);
  390.     -webkit-filter:invert(1);
  391.     -o-filter:invert(1);
  392.     -moz-filter:invert(1);
  393.     -ms-filter:invert(1);
  394.     filter:invert(100%) hue-rotate(180deg);
  395.     -webkit-filter:invert(100%) hue-rotate(180deg);
  396.     -moz-filter:invert(100%) hue-rotate(180deg);
  397.     -o-filter:invert(100%) hue-rotate(180deg);
  398.     -ms-filter:invert(100%) hue-rotate(180deg);
  399.     -webkit-transition: all 0.5s;
  400.     -moz-transition: all 0.5s;
  401.     -ms-transition: all 0.5s;
  402.     -o-transition: all 0.5s;
  403.     transition: all 0.5s;
  404. }
  405.  
  406. body.controls-click iframe.tmblr-iframe {
  407.     opacity: 1.0;
  408.     visibility: visible;
  409.     -webkit-transition: all 0.5s;
  410.     -moz-transition: all 0.5s;
  411.     -ms-transition: all 0.5s;
  412.     -o-transition: all 0.5s;
  413.     transition: all 0.5s;
  414. }
  415.  
  416. iframe.tmblr-iframe:hover {
  417.     opacity:0.8!important;
  418.     -webkit-transition: 0.6s ease;
  419.     -moz-transition: 0.6s ease;
  420.     -o-transition: 0.6s ease;
  421.     transition: 0.6s ease;
  422. }
  423.  
  424. html[data-theme='dark'] iframe.tmblr-iframe  {
  425.     opacity: 1;
  426.     filter:invert(0)!important;
  427.     -webkit-filter:invert(0)!important;
  428.     -o-filter:invert(0)!important;
  429.     -moz-filter:invert(0)!important;
  430.     -ms-filter:invert(0)!important;
  431.     filter:invert(100%) hue-rotate(180deg);
  432.     -webkit-filter:invert(100%) hue-rotate(180deg);
  433.     -moz-filter:invert(100%) hue-rotate(180deg);
  434.     -o-filter:invert(100%) hue-rotate(180deg);
  435.     -ms-filter:invert(100%) hue-rotate(180deg);
  436. }
  437.  
  438. /*--------CUSTOM TUMBLR LIGHTBOX--------*/
  439.  
  440. .vignette, #vignette {
  441.     opacity:0;
  442. }
  443. .lightbox-image, #tumblr_lightbox img {
  444.     box-shadow:none !important;
  445.     border-radius:0 !important;
  446.     max-width:none;
  447. }
  448.  
  449. .tmblr-lightbox, #tumblr_lightbox {
  450.     background-color: var(--lightbox-night)!important;
  451. }
  452.  
  453. .lightbox-image, #tumblr_lightbox img {
  454.     background-color: var(--main-posts)!important;
  455.     padding: 10px !important;
  456.     -moz-box-sizing:border-box;
  457.     box-sizing:border-box;
  458. }
  459.  
  460. /*----------SCROLLBAR----------*/
  461.  
  462. ::-webkit-scrollbar {
  463.     width: 14px;
  464.     height: 10px;
  465. }
  466. ::-webkit-scrollbar-button {
  467.     width: 0px;
  468.     height: 0px;
  469. }
  470. ::-webkit-scrollbar-thumb {
  471.     background-color: var(--scrollbar);
  472.     border-radius: 20px;
  473.     border: 3px solid var(--main-background);
  474. }
  475.  
  476. ::-webkit-scrollbar-track {
  477.     background: var(--main-posts);
  478.     border: 8px solid var(--main-posts);
  479. }
  480.  
  481. ::-webkit-scrollbar-corner {
  482.     background: transparent;
  483. }
  484.  
  485. /*----------TOOLTIPS----------*/
  486.  
  487. .tippy-tooltip.custom-theme {
  488.     background-color: var(--tooltip-background);
  489.     color: var(--tooltip);
  490.     text-align:center;
  491.     font-size: 12px;
  492.     font-weight: 700;
  493.     text-transform: lowercase;
  494. }
  495.  
  496. .tippy-tooltip.custom-theme .tippy-svg-arrow {
  497.   fill: var(--tooltip-background);
  498. }
  499.  
  500. /*----------TEXT SELECTION----------*/
  501.  
  502. {block:ifCustomTextSelection}
  503. ::selection {
  504.     background: var(--text-selection-background);
  505.     color: var(--text-selection);
  506. }
  507.  
  508. ::-moz-selection {
  509.     background: var(--text-selection-background);
  510.     color: var(--text-selection);
  511. }
  512.  
  513. ::-webkit-selection {
  514.     background: var(--text-selection-background);
  515.     color: var(--text-selection);
  516. }
  517. {/block:ifCustomTextSelection}
  518.  
  519. /*----------THEME BASICS----------*/
  520.  
  521. body {
  522.     color: var(--main-text);
  523.     font-family: var(--body-font), sans-serif;
  524.     font-weight: 400;
  525.     font-size: var(--text-font);
  526.     line-height: 180%;
  527.     margin: 0;
  528.     padding: 0;
  529.     box-sizing: border-box;
  530.     text-align:left;
  531.     background: var(--main-background) url({image:Background}) center;
  532.     background-attachment: {select:Background Attachment};
  533.     background-repeat: {select:Background Repeat};
  534.     -webkit-font-smoothing: antialiased;
  535.     -moz-osx-font-smoothing: grayscale;
  536. }
  537.  
  538. p:empty {
  539.     display: none;
  540. }
  541.  
  542. b,strong {
  543.     color:var(--bold);
  544.     font-weight: 700;
  545. }
  546.  
  547. i,em {
  548.     color:var(--italic);
  549. }
  550.  
  551. small,sub,sup {
  552.     font-size: calc(var(--text-font) - 1px);
  553. }
  554.  
  555. h1,h2,h3 {
  556.     font-weight: 700;
  557.     font-size: 1.3em;
  558.     color: var(--bold);
  559. }
  560.  
  561. h4,h5,h6 {
  562.     font-weight: 700;
  563.     font-size: 1.2em;
  564.     color: var(--bold);
  565. }
  566.  
  567. pre {
  568.     white-space: pre-wrap;
  569.     white-space: -moz-pre-wrap;
  570.     white-space: -pre-wrap;
  571.     white-space: -o-pre-wrap;
  572.     word-wrap: break-word;
  573.     padding: 5px 10px;
  574.     font-family: inherit;
  575.     font-weight: 400;
  576.     line-height: 150%;
  577.     color: var(--question);
  578.     background-color: var(--question-background);
  579. }
  580.  
  581. blockquote:not(.tumblr_parent) {
  582.     padding-left: 20px;
  583.     margin: 10px;
  584.     border-left: 3px solid var(--blockquote);
  585. }
  586.  
  587. blockquote img {
  588.     max-width: 100%;
  589.     height: auto;
  590. }
  591.  
  592. figure {
  593.   margin: 1em 3px;
  594. }
  595.  
  596. a {
  597.     color:var(--main-links);
  598.     text-decoration: none;
  599.     -moz-transition: 0.6s ease;
  600.     -o-transition: 0.6s ease;
  601.     -webkit-transition: 0.6s ease;
  602.     transition: 0.6s ease;
  603. }
  604.  
  605. a:hover {
  606.     color:var(--link-hover);
  607.     -moz-transition: 0.6s ease;
  608.     -o-transition: 0.6s ease;
  609.     -webkit-transition: 0.6s ease;
  610.     transition: 0.6s ease;
  611. }
  612.  
  613. {block:ifSmallCursor}
  614. html, body, a { cursor:url("https://i.imgur.com/2qleX.jpg"), auto !important; }
  615. a:hover{cursor:url("https://i.imgur.com/IepP2.jpg"), auto !important;}
  616. {/block:ifSmallCursor}
  617.  
  618. /*----------PAGINATION----------*/
  619.  
  620. #pagination {
  621.     margin: 20px auto 0 auto;
  622.     padding: 15px 20px;
  623.     font-weight: 700;
  624.     background-color: var(--main-posts);
  625.     display: flex;
  626.     justify-content: center;
  627.     align-items: center;
  628.     color: var(--pagination);
  629. }
  630.  
  631. #pagination i {
  632.     margin: 0 20px;
  633.     font-weight: 700;
  634.     border-radius: 5px;
  635.     color:var(--accented-text);
  636.     background-color: var(--accent);
  637.     padding: 5px;
  638.     border-radius: 5px;
  639.     border: 1px dashed transparent;
  640.     -moz-transition: 0.6s ease;
  641.     -o-transition: 0.6s ease;
  642.     -webkit-transition: 0.6s ease;
  643.     transition: 0.6s ease;
  644. }
  645.  
  646. #pagination i:hover {
  647.     color: var(--main-links);
  648.     border: 1px dashed var(--accent);
  649.     background-color: transparent;
  650.     -moz-transition: 0.6s ease;
  651.     -o-transition: 0.6s ease;
  652.     -webkit-transition: 0.6s ease;
  653.     transition: 0.6s ease;
  654. }
  655.  
  656. /*----------POSIS CONTAINER----------*/
  657.  
  658. .wrap {
  659.     position: relative;
  660.     margin: auto;
  661.     padding-bottom: 0;
  662.     {block:PermalinkPage}
  663.     margin-bottom: 0;
  664.     padding-bottom: 50px;
  665.     {block:PermalinkPage}
  666. }
  667.  
  668. #content {
  669.     width: var(--post-size);
  670.     margin: 100px auto 0;
  671.     {block:PermalinkPage}
  672.     width: 700px;
  673.     margin-top: 80px;
  674.     {/block:PermalinkPage}
  675. }
  676.  
  677. .posts {
  678.     background-color: var(--main-posts);
  679.     width: var(--post-size);
  680.     margin-bottom: {text:bottom margins}px;
  681.     {block:IndexPage}
  682.     opacity: 1;
  683.     z-index: -1;
  684.     {/block:IndexPage}
  685.     {block:PermalinkPage}
  686.     margin-bottom: 50px;
  687.     width: 700px;
  688.     {/block:PermalinkPage}
  689. }
  690.  
  691. .posts ul li {
  692.     list-style: none;
  693.     margin-left: -25px;
  694.     padding-left: 10px;
  695. }
  696.  
  697. .posts ul li:before {
  698.     content: "▷";
  699.     padding-right: 10px;
  700.     color: var(--accent);
  701. }
  702.  
  703. .posts ol {
  704.     list-style-type: upper-roman;
  705.     text-transform: justify;
  706.     margin-left: -10px;
  707. }
  708.  
  709. .posts iframe {
  710.     max-width:100%;
  711.     display: block;
  712.     padding: 0;
  713.     margin: 0
  714. }
  715.  
  716. /*----------VIDEO POSTS----------*/
  717.  
  718. .video {
  719.     overflow: hidden;
  720. }
  721.  
  722. .tumblr_video_container {
  723.     width: auto !important;
  724.     height: auto !important;
  725. }
  726.  
  727. /*----------PHOTO/PHOTOSET POSTS----------*/
  728.  
  729. .posts img {
  730.     max-width: 100%;
  731.     display: block;
  732.     border: 0;
  733. }
  734.  
  735. .posts .photo img {
  736.     {block:ifFadedImages}
  737.     {block:IndexPage}
  738.     opacity: 0.6;
  739.     -moz-transition: 0.6s ease;
  740.     -o-transition: 0.6s ease;
  741.     -webkit-transition: 0.6s ease;
  742.     transition: 0.6s ease;
  743. }
  744.  
  745. .posts:hover .photo img {
  746.     opacity: 1.0;
  747.     -moz-transition: 0.6s ease;
  748.     -o-transition: 0.6s ease;
  749.     -webkit-transition: 0.6s ease;
  750.     transition: 0.6s ease;
  751.     {/block:IndexPage}
  752.     {/block:ifFadedImages}
  753. }
  754.  
  755. {block:ifGrayscaleImages}
  756. {block:IndexPage}
  757. .posts .photo img {
  758.     z-index: -9999999999999999999999999px;
  759.     -webkit-filter: grayscale(100%);
  760.     filter: grayscale(100%);
  761.     filter: gray;
  762.     /* IE 6-9 */
  763.     -moz-transition: 0.6s ease;
  764.     -o-transition: 0.6s ease;
  765.     -webkit-transition: 0.6s ease;
  766.     transition: 0.6s ease;
  767. }
  768.  
  769. .posts:hover .photo img {
  770.     -webkit-filter: none;
  771.     filter: none;
  772.     -moz-transition: 0.6s ease;
  773.     -o-transition: 0.6s ease;
  774.     -webkit-transition: 0.6s ease;
  775.     transition: 0.6s ease;
  776. }
  777. {/block:IndexPage}
  778. {/block:ifGrayscaleImages}
  779.  
  780. /*----------TEXT/CAPTION CONTAINER----------*/
  781.  
  782. .caption {
  783.     text-align: {select:text align};
  784. }
  785.  
  786. .text {
  787.     {block:PermalinkPage}
  788.     padding: 15px;
  789.     {/block:PermalinkPage}
  790. }
  791.  
  792. .caption a {
  793.     text-decoration: underline;
  794. }
  795.  
  796. .caption figcaption {
  797.     padding: 15px;
  798. }
  799.  
  800. figcaption p {
  801.     margin: 5px 0 0;
  802. }
  803.  
  804. .caption img {
  805.     max-width: 100%;
  806. }
  807.  
  808. .reblog-list {
  809.     padding: 0 10px;
  810. }
  811.  
  812. .reblog-header {
  813.     padding: 20px 15px;
  814. }
  815.  
  816. .reblog-header a {
  817.     text-decoration: none;
  818. }
  819.  
  820. .reblog-header img {
  821.     width: 30px;
  822.     height: 30px;
  823.     display: inline-block;
  824.     vertical-align: middle;
  825.     margin-right: 10px;
  826.     border-radius: 5px;
  827. }
  828.  
  829. .inactive, .user, .deactivated {
  830.     font-weight: 700;
  831.     color: var(--main-links);
  832.     text-align: center;
  833. }
  834.  
  835. .user:hover {
  836.     color: var(--link-hover);
  837. }
  838.  
  839. .reblog-content {
  840.     padding: 0 15px;
  841. }
  842.  
  843. .reblog-content p, .reblog-content h2 {
  844.     margin: 0 0 15px 0;
  845. }
  846.  
  847. .read_more {
  848.     position: relative;
  849.     width: 100%;
  850.     padding: 3px 10px;
  851.     font-weight: 700;
  852.     color: var(--accented-text);
  853.     background-color: var(--accent);
  854.     border-radius: 5px;
  855.     -moz-transition: 0.6s ease;
  856.     -o-transition: 0.6s ease;
  857.     -webkit-transition: 0.6s ease;
  858.     transition: 0.6s ease;
  859. }
  860.  
  861. .caption .read_more {
  862.     text-decoration: none;
  863. }
  864.  
  865. .read_more:hover {
  866.     background-color: transparent;
  867.     color: var(--main-links);
  868.     -moz-transition: 0.6s ease;
  869.     -o-transition: 0.6s ease;
  870.     -webkit-transition: 0.6s ease;
  871.     transition: 0.6s ease;
  872. }
  873.  
  874. /*----------POST INFO & PERMALINKS----------*/
  875.  
  876. .time {
  877.    background-color: var(--permalink-background);
  878.     display: flex;
  879.     justify-content: space-between;
  880.     align-items: center;
  881.     padding-right: 10px;
  882.     transition: 0.6s;
  883. }
  884.  
  885. .time a {
  886.     color: var(--permalink);
  887.     transition: 0.6s;
  888. }
  889.  
  890. .time a:hover {
  891.     color: var(--permalink-hover);
  892.     transition: 0.6s;
  893. }
  894.  
  895. #date-box {
  896.     width: 60px;
  897.     height: 60px;
  898.     background-color: var(--accent);
  899.     text-align: center;
  900.     padding: 6px 10px 10px;
  901.     box-sizing: border-box;
  902.     transition: 0.6s;
  903. }
  904.  
  905. #date-box a {
  906.     font-weight: 700;
  907.     font-size: 1.1em;
  908.     line-height: 10px;
  909.     color: var(--accented-text);
  910.     transition: 0.6s;
  911. }
  912.  
  913. #date-box span {
  914.     font-size: 0.9em;
  915.     font-weight: 400;
  916. }
  917.  
  918. .notecount a {
  919.     display: flex;
  920.     align-items: center;
  921. }
  922.  
  923. .controls {
  924.     display: flex;
  925. }
  926.  
  927. .controls a {
  928.     position:relative;
  929.     margin: 0 5px;
  930. }
  931.  
  932. .controls i {
  933.     color: var(--permalink);
  934.     font-size: 20px;
  935.     display: inline-block;
  936.     vertical-align: middle;
  937.     transition: 0.6s;
  938. }
  939.  
  940. .ph-eye {
  941.     font-size: 20px;
  942.     margin-right: 5px;
  943. }
  944.  
  945. .controls .like .liked + .ph-heart-straight {
  946.    opacity: 1;
  947. }
  948.  
  949. .controls .like .liked + .ph-heart-straight {
  950.      color: #df2b2b;
  951. }
  952.  
  953. .controls .like .like_button iframe {
  954.    position:absolute;
  955.    top: -1px;
  956.    left:0;
  957.    bottom:0;
  958.    right:0;
  959.    width:100%;
  960.    height:100%;
  961.    z-index:2;
  962.    opacity:0.000001;
  963. }
  964.  
  965. /*-----------POST TAGS-----------*/
  966.  
  967. .tag-button {
  968.     cursor: pointer;
  969.     display: flex;
  970. }
  971.  
  972. .ph-hash {
  973.     font-size: 18px;
  974.     color: var(--accented-text);
  975. }
  976.  
  977. .post_tags {
  978.     padding: 15px;
  979.     display: none;
  980. }
  981.  
  982. .post_tags a {
  983.     margin-left: 3px;
  984.     color: var(--permalink);
  985.     font-size: 11px;
  986.     font-weight: 700;
  987.     display: inline-block;
  988.     border: 1px solid var(--post-borders);
  989.     padding: 5px 10px;
  990.     border-radius: 5px;
  991.     -moz-transition: 0.6s ease;
  992.     -o-transition: 0.6s ease;
  993.     -webkit-transition: 0.6s ease;
  994.     transition: 0.6s ease;
  995. }
  996.  
  997. .post_tags a:hover {color:var(--permalink-hover);
  998.     border: 1px solid var(--accent);
  999.     -moz-transition: 0.6s ease;
  1000.     -o-transition: 0.6s ease;
  1001.     -webkit-transition: 0.6s ease;
  1002.     transition: 0.6s ease;
  1003. }
  1004.  
  1005. .ph-hash {
  1006.     margin-right: 7px;
  1007.     color:var(--accent);
  1008.     font-size:18px;
  1009.     vertical-align:middle;
  1010. }
  1011.  
  1012. /*----------PERMALINK PAGE----------*/
  1013.  
  1014. #perma {
  1015.     width: 700px;
  1016.     padding: 20px 30px;
  1017.     margin: 0 auto;
  1018.     background-color: var(--main-posts);
  1019.     box-sizing: border-box;
  1020.     position: relative;
  1021.     display: flex;
  1022.     justify-content: space-between;
  1023.     align-items: center;
  1024. }
  1025.  
  1026. #perma b {
  1027.     color: var(--main-links);
  1028. }
  1029.  
  1030. .perma-date {
  1031.     margin-right: 20px;
  1032. }
  1033.  
  1034. .perma-note {
  1035.     display: block;
  1036. }
  1037.  
  1038. .permatg a {
  1039.     display: inline-block;
  1040.     margin-left: 3px;
  1041.     color: var(--main-links);
  1042. }
  1043.  
  1044. .permatg a:hover {
  1045.     color: var(--link-hover);
  1046. }
  1047.  
  1048. .root img, .via img {
  1049.     display: block;
  1050.     width: 30px;
  1051.     height: 30px;
  1052.     border-radius: 50%;
  1053.     margin: 10px 0;
  1054.     padding: 3px;
  1055.     border: 1px dashed var(--accent);
  1056. }
  1057.  
  1058. #notecontainer {
  1059.     margin: 10px auto;
  1060.     width: 700px;
  1061.     background-color: var(--main-posts);
  1062.     color: var(--main-text);
  1063.     position: relative;
  1064.     padding: 10px;
  1065.     box-sizing: border-box;
  1066. }
  1067.  
  1068. #notecontainer ol.notes {
  1069.     list-style-type: none;
  1070.     margin: 0;
  1071.     padding: 0;
  1072.     font-size: {text:body font}px;
  1073. }
  1074.  
  1075. #notecontainer .notes li, #notecontainer li.note.reblog  {
  1076.     list-style-type:none;
  1077. }
  1078.  
  1079. #notecontainer li.note.like::before {
  1080.     content:'❤';
  1081.     float: right;
  1082.     font-size: 25px;
  1083.     vertical-align: middle;
  1084.     color: var(--permalink-like);
  1085. }
  1086.  
  1087. #notecontainer li.note.reblog:before {
  1088.     content:'⟳';
  1089.     float: right;
  1090.     font-size: 25px;
  1091.     display: inline-block;
  1092.     vertical-align: middle;
  1093.     color: var(--permalink-reblog);
  1094. }
  1095.  
  1096. #notecontainer ol.notes li.note {
  1097.     padding: 15px;
  1098. }
  1099.  
  1100. #notecontainer img.avatar {
  1101.     margin-right: 10px;
  1102.     vertical-align: middle;
  1103.     width: 25px;
  1104.     height: 25px;
  1105.     border-radius: 50%;
  1106. }
  1107.  
  1108. #permpage {
  1109.     text-align: center;
  1110.     margin-top: 50px;
  1111.     justify-content: center;
  1112.     align-items: center;
  1113. }
  1114.  
  1115. .ph-arrow-left, .ph-arrow-right {
  1116.     padding: 5px;
  1117.     font-size: 20px;
  1118.     display: inline-block;
  1119.     height: 20px;
  1120.     border-radius: 5px;
  1121.     margin: 0 10px;
  1122.     background-color: var(--accent);
  1123.     color: var(--accented-text);
  1124.     border: 1px dashed transparent;
  1125.     -webkit-transition: all 0.6s ease;
  1126.     -moz-transition: all 0.6s ease;
  1127.     -o-transition: all 0.6s ease;
  1128.     transition: all 0.6s ease;
  1129. }
  1130.  
  1131. .ph-arrow-left:hover, .ph-arrow-right:hover {
  1132.     background-color: transparent;
  1133.     color: var(--main-links);
  1134.     border: 1px dashed var(--accent);
  1135.     -webkit-transition: all 0.6s ease;
  1136.     -moz-transition: all 0.6s ease;
  1137.     -o-transition: all 0.6s ease;
  1138.     transition: all 0.6s ease;
  1139. }
  1140.  
  1141. /*----------TUMBLR TEXT/LINKS----------*/  
  1142.  
  1143. .posts .title, .posts .link {
  1144.     background-color: var(--main-posts);
  1145.     color: var(--post-title);
  1146.     text-transform: uppercase;
  1147.     padding: 20px 30px;
  1148.     font-size: 1.2em;
  1149.     font-weight: 700;
  1150.     line-height: 200%;
  1151.     position: relative;
  1152.     -moz-transition: 0.6s ease;
  1153.     -o-transition: 0.6s ease;
  1154.     -webkit-transition: 0.6s ease;
  1155.     transition: 0.6s ease;
  1156. }
  1157.  
  1158. .posts .title:before, .posts .link:before {
  1159.     content: '';
  1160.     position: absolute;
  1161.     top: 80%;
  1162.     left: 30px;
  1163.     width: 10%;
  1164.     height: 3px;
  1165.     background-color: var(--accent);
  1166. }
  1167.  
  1168. .posts .link a {
  1169.     color: var(--post-title);
  1170. }
  1171.  
  1172. .ph-caret-double-right {
  1173.     color: var(--accent);
  1174. }
  1175.  
  1176. .posts .link a:hover {
  1177.     color: var(--link-hover);
  1178.     -moz-transition: 0.6s ease;
  1179.     -o-transition: 0.6s ease;
  1180.     -webkit-transition: 0.6s ease;
  1181.     transition: 0.6s ease;
  1182. }
  1183.  
  1184. .thumbnail {
  1185.     margin-bottom: 10px;
  1186. }
  1187.  
  1188. .thumbnail img {
  1189.     width: 100%;
  1190.     height: auto;
  1191.     display: block;
  1192. }
  1193.  
  1194. /*----------TUMBLR QUOTES----------*/  
  1195.  
  1196. .qt {
  1197.     padding: 30px;
  1198.     display: flex;
  1199.     flex-direction: row;
  1200.     justify-content: space-between;
  1201.     background-color: var(--main-posts);
  1202. }
  1203.  
  1204. .quote {
  1205.     font-family: 'Lora', serif;
  1206.     font-weight: 500;
  1207.     line-height: 150%;
  1208.     font-size: 1.6em;
  1209.     padding: 20px;
  1210.     color: var(--question);
  1211.     padding-left: 20px;
  1212.     border-left: 1px solid var(--post-borders);
  1213. }
  1214.  
  1215. .ph-quotes {
  1216.     color: var(--accent);
  1217.     padding: 5px;
  1218.     font-size: 1.2em;
  1219.     align-self: center;
  1220.     border-radius: 5px;
  1221. }
  1222.  
  1223. .quote-box {
  1224.     font-size: 20px;
  1225.     align-self: center;
  1226.     color: var(--main-links);
  1227.     margin-right: 20px;
  1228. }
  1229.  
  1230. .qtsource {
  1231.     padding: 5px 30px 20px;
  1232.     background-color: var(--main-posts);
  1233. }
  1234.  
  1235. /*----------TUMBLR AUDIO----------*/
  1236.  
  1237. .audiop {
  1238.     background-color: var(--question-background);
  1239.     padding: 20px;
  1240.     overflow:hidden;
  1241.     position: relative;
  1242. }
  1243.  
  1244. .album-background-image {
  1245.     position: absolute;
  1246.     overflow: hidden;
  1247.     width: 100%;
  1248.     height: 260px;
  1249.     top: 0;
  1250.     left: 0;
  1251. }
  1252.  
  1253. .audiowrapper {
  1254.     display:flex;
  1255. }
  1256.  
  1257. .album-background {
  1258.     width: 100%;
  1259. }
  1260.  
  1261. .audio-content .audio_player {
  1262.     background-color: var(--audio-player-background);
  1263. }
  1264.  
  1265. .audio-content {
  1266.     width: 90px;
  1267.     padding:10%;
  1268.     position:relative;
  1269.     display: flex;
  1270.     justify-content: center;
  1271.     align-items: center;
  1272. }
  1273.  
  1274. .audio_player {
  1275.     position: absolute;
  1276.     z-index: 2;
  1277.     width: 70px;
  1278.     height: 70px;
  1279.     border-radius: 50%;
  1280. }
  1281.  
  1282. .audio_player > div {
  1283.     display: inline-block;
  1284.     margin: 0 0.5em 0 0;
  1285.     vertical-align: middle;
  1286. }
  1287.  
  1288. .custom_audio_buttons {
  1289.     height: 1.25em;
  1290. }
  1291.  
  1292. .custom_audio_buttons svg {
  1293.     width : 1.70em;
  1294.     height: 1.70em;
  1295.     margin-left: 24px;
  1296.     margin-top: 22px;
  1297.     stroke: var(--main-text);
  1298. }
  1299.  
  1300. .custom_audio_error_icon svg {
  1301.     stroke: red;
  1302. }
  1303.  
  1304. .custom_audio_duration {
  1305.     display: inline;
  1306. }
  1307.  
  1308. .seek-cont {
  1309.     display: flex;
  1310.     justify-content: space-between;
  1311.     align-items: center;
  1312.     margin-top: 20px;
  1313. }
  1314.  
  1315. .seek-cont span {
  1316.     width: 50px;
  1317. }
  1318.  
  1319. .custom_audio_seekbar {
  1320.     height: 0.5em;
  1321.     border: 1px solid var(--main-text);
  1322.     width: 85%;
  1323. }
  1324.  
  1325. .custom_audio_seekbar_progress {
  1326.     width: 0;
  1327.     height: 100%;
  1328.     background: var(--main-links);
  1329. }
  1330.  
  1331. .custom_audio_current_time, .custom_audio_time_left {
  1332.     font-size: 12px;
  1333.     width: 50px;
  1334. }
  1335.  
  1336. .custom_audio_current_time {
  1337.     text-align: left;
  1338. }
  1339.  
  1340. .custom_audio_time_left {
  1341.     text-align: right;
  1342. }
  1343.  
  1344. .audio_info p {
  1345.     margin: 0.25em 0;
  1346. }
  1347.  
  1348. .album-background {
  1349.     position: absolute;
  1350.     top: -40%;
  1351.     left: 0;
  1352.     filter: blur(2px);
  1353. }
  1354.  
  1355. .music_menu {
  1356.     position: relative;
  1357.     margin: 0px;
  1358.     list-style:none;
  1359.     padding: 5%;
  1360.     width: 70%;
  1361.     align-self: center;
  1362.     font-size:18px;
  1363.     font-weight: 700;
  1364.     background-color: var(--audio-background);
  1365.     color: var(--main-links);
  1366. }
  1367.  
  1368. .music_menu  p {
  1369.     margin: 5px 0;
  1370. }
  1371.  
  1372. .music_menu  p:nth-child(2) {
  1373.     font-weight: 400;
  1374.     font-size: 15px;
  1375.     margin-top: 10px;
  1376. }
  1377.  
  1378. /*----------TUMBLR QUESTION/ANSWER----------*/
  1379.  
  1380. #askcont, #replycont {
  1381.     padding: 15px;
  1382. }
  1383.  
  1384. .asker-cont, .replier-cont {
  1385.     display: flex;
  1386. }
  1387.  
  1388. #asker-image, #replier-image {
  1389.     width: 35px;
  1390.     height: 35px;
  1391.     align-self: center;
  1392. }
  1393.  
  1394. #asker-image {
  1395.     margin-right: 45px;
  1396. }
  1397.  
  1398. #replier-image {
  1399.     order: 2;
  1400.     margin-left: 30px;
  1401.     margin-right: 20px;
  1402. }
  1403.  
  1404. #asker-image img, #replier-image img {
  1405.     border-radius: 5px;
  1406.     border: 3px solid var(--accent);
  1407.     padding: 5px;
  1408. }
  1409.  
  1410. .asker-link, .replier-link {
  1411.     font-weight: 700;
  1412. }
  1413.  
  1414. #asker, #replier {
  1415.     background-color: var(--question-background);
  1416.     padding: 20px;
  1417.     box-sizing: border-box;
  1418.     display: block;
  1419.     width: 100%;
  1420.     position: relative;
  1421. }
  1422.  
  1423. #asker:after {
  1424.     right: 100%;
  1425.     top: 50%;
  1426.     margin-top: -10px;
  1427.     border: solid transparent;
  1428.     content: " ";
  1429.     height: 0;
  1430.     width: 0;
  1431.     position: absolute;
  1432.     pointer-events: none;
  1433.     border-right-color: var(--question-background);
  1434.     border-width: 13px;
  1435. }
  1436.  
  1437. #replier:after {
  1438.     left: 100%;
  1439.     top: 50%;
  1440.     margin-top: -10px;
  1441.     border: solid transparent;
  1442.     content: " ";
  1443.     height: 0;
  1444.     width: 0;
  1445.     position: absolute;
  1446.     pointer-events: none;
  1447.     border-left-color: var(--question-background);
  1448.     border-width: 13px;
  1449. }
  1450.  
  1451. .question, .answer {
  1452.     margin-top: 10px;
  1453. }
  1454.  
  1455. .answer p {
  1456.     margin: 0;
  1457. }
  1458.  
  1459. .anwer a {
  1460.     text-decoration: underline;
  1461. }
  1462.  
  1463. /*----------TUMBLR CHAT----------*/
  1464.  
  1465. .chat .line {
  1466.     margin-top: 0px;
  1467.     padding: 15px 25px;
  1468.     margin-bottom: 0;
  1469. }
  1470.  
  1471. .chat .line:nth-child(2n)  {
  1472.     background-color: var(--accent);
  1473.     color: var(--accented-text);
  1474. }
  1475.  
  1476. .line:nth-child(odd) .label b {
  1477.     color: var(--chat-odd);
  1478.     font-weight: 700;
  1479.     font-size: 1.1em;
  1480.     display: block;
  1481.     margin-bottom: 10px;
  1482. }
  1483.  
  1484. .line:nth-child(even) .label b {
  1485.     color: var(--chat-even);
  1486.     font-weight: 700;
  1487.     font-size: 1.1em;
  1488.     display: block;
  1489.     margin-bottom: 10px;
  1490. }
  1491.  
  1492. /*----------HEADER----------*/
  1493.  
  1494. #header {
  1495.     height: 100vh;
  1496.     position: relative;
  1497.     display: flex;
  1498.     justify-content: center;
  1499.     align-items: center;
  1500.     top: 0;
  1501.     left: 0;
  1502.     right: 0;
  1503.     {block:PermalinkPage}
  1504.     display: none;
  1505.     {/block:PermalinkPage}
  1506.     {block:ifnotheader}
  1507.     display: none;
  1508.     {/block:ifnotheader}
  1509.     {block:TagPage}
  1510.     display: none;
  1511.     {/block:TagPage}
  1512. }
  1513.  
  1514. #header-content {
  1515.     width: 650px;
  1516.     position: absolute;
  1517.     bottom: 0px;
  1518.     top: 0;
  1519.     height: calc(100% - 122px);
  1520.     padding: 60px;
  1521.     text-align: center;
  1522.     background-color: var(--header-content-background);
  1523.     display: flex;
  1524.     flex-wrap: wrap;
  1525.     flex-direction: column;
  1526.     justify-content: center;
  1527. }
  1528.  
  1529. #header-content .description {
  1530.     text-align: {select:description text align};
  1531.     padding: 0 20px;
  1532.     margin-top: -5px;
  1533.     color: var(--description);
  1534. }
  1535.  
  1536. #header-content .description a {
  1537.     color: var(--main-links);
  1538.     text-decoration: underline;
  1539. }
  1540.  
  1541. #header-content .blog-title {
  1542.     font-family: 'Lora', serif;
  1543.     font-weight: 500;
  1544.     border-bottom: 1px solid var(--header-content);
  1545.     padding: 20px 10px;
  1546.     color: var(--header-content);
  1547.     font-size: 1.8em;
  1548.     text-transform: uppercase;
  1549. }
  1550.  
  1551. #responsive-header {display: none;}
  1552.  
  1553. /*----------DAY/NIGHT MODE---------*/
  1554.  
  1555. button#theme-toggle {
  1556.     position: fixed;
  1557.     right: 0;
  1558.     top: 180px;
  1559.     outline: none;
  1560.     border: 0;
  1561.     background: transparent;
  1562.     padding: 0;
  1563.     cursor: pointer;
  1564.     z-index: 10;
  1565. }
  1566.  
  1567. button#theme-toggle i, .controls-button i {
  1568.     font-size: 25px;
  1569.     background-color: var(--accent);
  1570.     color: var(--accented-text);
  1571.     padding: 23px;
  1572. }
  1573.  
  1574. .controls-button {
  1575.     position: fixed;
  1576.     right: 0;
  1577.     top: 0;
  1578.     cursor: pointer;
  1579. }
  1580.  
  1581. .toggle-header {
  1582.     display: flex;
  1583. }
  1584.  
  1585. .light-on{
  1586.     display: var(--LightOn);
  1587. }
  1588.  
  1589. .light-off{
  1590.     display: var(--LightOff);
  1591. }
  1592.  
  1593. /*----------NPF STYLING (DO NOT TOUCH)----------*/
  1594.  
  1595. .npf_inst > *:last-child {
  1596.     margin-bottom: 0;
  1597. }
  1598.  
  1599. .npf_inst, #npf_a0rsv {
  1600.     margin-bottom: 20px;
  1601. }
  1602.  
  1603. .npf_inst.photo-origin, #npf_wmw57 {
  1604.     padding-top: 10px;
  1605. }
  1606.  
  1607. .soundcloud_audio_player {
  1608.     max-height:116px!important;
  1609. }
  1610.  
  1611. .spotify_audio_player {
  1612.     max-height:80px!important;
  1613. }
  1614.  
  1615. figure.tmblr-embed.tmblr-full iframe {max-width: 100%;}
  1616.  
  1617. div.npf-link-block .title {
  1618.     font-size: 16px;
  1619.     text-align: left;
  1620. }
  1621.  
  1622. .answer .npf_inst, #npf_a0rsv {
  1623.     margin-bottom: 0;
  1624. }
  1625.  
  1626. p.npf_chat {  
  1627.     border-bottom: 1px solid var(--post-borders);
  1628.     padding: 20px 0;
  1629.     margin-top: 0;
  1630.     margin-bottom: 5px;
  1631. }
  1632.  
  1633. p.npf_chat:first-of-type {
  1634.     padding-top: 0;
  1635. }
  1636.  
  1637. p.npf_chat:last-of-type {
  1638.     margin-bottom: 0px;
  1639.     border-bottom: none;
  1640. }
  1641.  
  1642. p.npf_chat b {    
  1643.     display: block;
  1644.     padding-bottom: 10px;
  1645.     color: var(--main-links);
  1646. }
  1647.  
  1648. /*----------THEME CREDIT/DO NOT REMOVE!!!---------*/
  1649.  
  1650. #bottom {
  1651.     bottom: 10px;
  1652.     position: fixed;
  1653.     right: 30px;
  1654.     z-index: 10;
  1655.     display: flex;
  1656.     flex-direction: column;
  1657. }
  1658.  
  1659. #bottom a:hover {
  1660.     color: var(--accented-text);
  1661. }
  1662.  
  1663. .ph-arrow-circle-up, .ph-copyright {
  1664.     padding: 3px;
  1665.     font-size: 18px;
  1666.     background-color: var(--accent);
  1667.     color: var(--accented-text);
  1668.     border-radius: 5px;
  1669.     margin: 3px 0;
  1670. }
  1671.  
  1672. /*----------SCROLL TO TOP---------*/
  1673.  
  1674. #scrollToTop:link,
  1675. #scrollToTop:visited {
  1676.     display: none;
  1677.     font-size: 12px;
  1678.     color: var(--accented-text);
  1679.     width: auto;
  1680.     z-index: 900;
  1681.     font-weight: 700;
  1682. }
  1683.  
  1684. /*----------RESPONSIVE DESIGN (DO NOT TOUCH)---------*/
  1685.  
  1686. @media screen and (max-width: 960px) {
  1687.    
  1688.     .wrap {
  1689.         width: 100%;
  1690.         margin-top: 20px;
  1691.         {block:PermalinkPage}
  1692.         margin-top: 100px;
  1693.         {/block:PermalinkPage}
  1694.     }
  1695.    
  1696.     .blog-label {
  1697.         width: 100%;
  1698.         position: relative;
  1699.         margin: 40px auto -5px;
  1700.     }
  1701.    
  1702.     #content {
  1703.         width: 90%;
  1704.         margin-top: 40px;
  1705.     }
  1706.    
  1707.     .posts {
  1708.         width: 100%;
  1709.         margin-bottom: 100px;
  1710.     }
  1711.    
  1712.      #pagination {
  1713.         margin: 0;
  1714.         width: 100%;
  1715.         box-sizing: border-box;
  1716.     }
  1717.    
  1718.     #notecontainer, #perma {
  1719.         width: 100%;
  1720.     }
  1721.    
  1722. }
  1723.  
  1724. {CustomCSS}
  1725. </style>
  1726.  
  1727. <script>
  1728. $(document).ready(function(){
  1729.    
  1730.     //Click to show/hide tags
  1731.     $('.post_tags').hide();
  1732.     $('.tag-button').click(function() {
  1733.         $(this).closest('.posts').find('.post_tags').slideToggle(600);
  1734.         return false;
  1735.     });
  1736.    
  1737.   //click to show/hide tumblr controls
  1738.     $('.controls-button').click(function(){
  1739.        $('body').toggleClass('controls-click');
  1740.     });
  1741.    
  1742. });
  1743.  
  1744. </script>
  1745.  
  1746. <!-----------Scroll To Top Script----------->
  1747. <script type="text/javascript" src="https://static.tumblr.com/ikeq9mi/DfYl6o46t/scrolltotop.min.js"></script>
  1748. <!-----------Scroll To Top Script----------->
  1749.  
  1750. </head>
  1751.  
  1752. <body>
  1753.  
  1754. <footer id="bottom">
  1755. <!-----------SCROLL TO TOP ----------->
  1756. <a href="javascript:;" id="scrollToTop" rel="nofollow" title="scroll to top"><i class="ph-arrow-circle-up"></i></a>
  1757. <!-----------SCROLL TO TOP ----------->
  1758. <!-------------------DO NOT REMOVE THEME CREDIT!!!------------------->
  1759.  <a href="https://sheathemes.tumblr.com" target="_blank" title="theme by sheathemes"><i class="ph-copyright"></i></a>  
  1760. <!-------------------DO NOT REMOVE THEME CREDIT!!!------------------->
  1761. </footer>
  1762.  
  1763.         <button id="theme-toggle" aria-label="toggle dark or light mode" type="button">
  1764.         <span class="light-on"><a href="javascript:;" title="toggle dark mode"><i class="ph-moon"></i></a></span>
  1765.         <span class="light-off"><a href="javascript:;" title="toggle light mode"><i class="ph-sun"></i></a></span>
  1766.         </button>
  1767.        
  1768.     <a class="controls-button" title="toggle tumblr controls"><i class="ph-gear"></i></a>
  1769.  
  1770. <section class="wrap"> <!-----------POST CONTAINER----------->
  1771.  
  1772. <section id="content"> <!-----------POST WRAPPER----------->
  1773.  
  1774. <!-----------POSTS----------->
  1775. {block:posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
  1776. <article class="posts" id="{PostID}" post-type="{PostType}"> <!-----------POSTS----------->
  1777.  
  1778. {block:ContentSource}
  1779. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  1780. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  1781. {/block:SourceLogo}
  1782. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1783. {/block:ContentSource}
  1784.  
  1785. <!-- {block:NoRebloggedFrom}
  1786. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  1787. {/block:NoRebloggedFrom} -->
  1788.  
  1789. {block:Text}
  1790. <div class="text">
  1791. {block:Title}<div class="title">{Title}</div>{/block:Title}
  1792. <div class="caption">{block:NotReblog} <figcaption> {Body} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">
  1793.  
  1794. {block:Reblogs}
  1795. <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}">
  1796. <div class="source-head">
  1797. <div class="reblog-header">
  1798.  
  1799. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  1800.  
  1801. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated} {block:IsActive} <a target="_blank" href="{Permalink}" class="user"> {Username} </a> {/block:IsActive}
  1802.  
  1803. {block:IsDeactivated} <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated} </div> <div class="reblog-content"> {Body} </div> </div> </div>{/block:Reblogs} </div> {/block:RebloggedFrom} </div>
  1804. {block:IndexPage}
  1805. <div class="post-cover"></div>
  1806. {/block:IndexPage}
  1807. </div>
  1808. {/block:Text}
  1809.  
  1810. {block:Photo}
  1811. <div class="photo">
  1812. {LinkOpenTag}
  1813. <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">
  1814. <center><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"></center>
  1815. </a>
  1816. {LinkCloseTag}
  1817. </div>
  1818. {block:IfShowCaptions}
  1819. {block:Caption} <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">
  1820.  
  1821. {block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  1822.  
  1823. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  1824.  
  1825. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  1826.  
  1827. {block:IsActive} <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  1828.  
  1829. {block:IsDeactivated} <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated} </div> <div class="reblog-content"> {Body} </div> </div> {/block:Reblogs} </div> {/block:RebloggedFrom} </div> {/block:Caption}
  1830. {/block:IfShowCaptions}
  1831.  
  1832. {block:IfnotShowCaptions}
  1833. {block:PermalinkPage}
  1834. {block:Caption} <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">
  1835.  
  1836. {block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  1837.  
  1838. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  1839.  
  1840. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  1841.  
  1842. {block:IsActive} <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  1843.  
  1844. {block:IsDeactivated} <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated} </div> <div class="reblog-content"> {Body} </div> </div> {/block:Reblogs} </div> {/block:RebloggedFrom} </div> {/block:Caption}
  1845. {/block:PermalinkPage}
  1846. {/block:IfnotShowCaptions}
  1847. {/block:Photo}
  1848.  
  1849. {block:Photoset}
  1850. <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>
  1851. {block:IfShowCaptions}
  1852. {block:Caption}
  1853. <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom}
  1854. <div class="reblog-list">
  1855.  
  1856. {block:Reblogs}
  1857. <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  1858. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  1859.  
  1860. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  1861.  
  1862. {block:IsActive}
  1863. <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  1864.  
  1865. {block:IsDeactivated}
  1866. <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated}
  1867. </div>
  1868. <div class="reblog-content"> {Body}</div></div> {/block:Reblogs} </div>
  1869. {/block:RebloggedFrom} </div>
  1870. {/block:Caption}
  1871. {/block:IfShowCaptions}
  1872.  
  1873. {block:IfnotShowCaptions}
  1874. {block:PermalinkPage}
  1875. {block:Caption}
  1876. <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom}
  1877. <div class="reblog-list">
  1878.  
  1879. {block:Reblogs}
  1880. <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  1881. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  1882.  
  1883. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  1884.  
  1885. {block:IsActive}
  1886. <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  1887.  
  1888. {block:IsDeactivated}
  1889. <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated}
  1890. </div>
  1891. <div class="reblog-content"> {Body}</div></div> {/block:Reblogs} </div>
  1892. {/block:RebloggedFrom} </div>
  1893. {/block:Caption}
  1894. {/block:PermalinkPage}
  1895. {/block:IfnotShowCaptions}
  1896. {/block:Photoset}
  1897.  
  1898. {block:Quote}
  1899. <div class="qt">
  1900. <div class="quote-box"><i class="ph-quotes"></i></div>
  1901. <div class="quote">
  1902. {Quote}
  1903. </div>
  1904. </div>
  1905. {block:Source}<div class="qtsource"><center>{Source}</center></div>{/block:Source}
  1906. {/block:Quote}
  1907.  
  1908. {block:Link}
  1909. {block:Thumbnail}
  1910. <div class="thumbnail"><img src="{Thumbnail-HighRes}" alt="{Name}"></div>
  1911. {/block:Thumbnail}
  1912.  
  1913. <div class="link"><a href="{URL}">{Name} <i class="ph-caret-double-right" style="vertical-align: middle;"></i></a> </div>
  1914. {block:Description}
  1915. <div class="caption">{block:NotReblog} <figcaption> {Description} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">
  1916.  
  1917. {block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  1918.  
  1919. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  1920.  
  1921. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated} {block:IsActive} <a target="_blank" href="{Permalink}" class="user"> {Username} </a> {/block:IsActive}
  1922.  
  1923. {block:IsDeactivated} <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated} </div> <div class="reblog-content"> {Body} </div> </div> {/block:Reblogs} </div> {/block:RebloggedFrom} </div>
  1924. {/block:Description}
  1925. {/block:Link}
  1926.  
  1927. {block:Audio}
  1928. <div class="audiop">
  1929. <div class="album-background-image">
  1930. {block:AlbumArt}<img src="{AlbumArtURL}" class="album-background">{/block:AlbumArt}
  1931. </div>
  1932. <div class="audiowrapper">
  1933. {block:AudioPlayer}
  1934. {AudioPlayer}
  1935. <div class="audio-content" style="{block:AlbumArt} background:url({AlbumArtURL}); {/block:AlbumArt} -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;">
  1936.    <div class="audio_player">
  1937.     <span class="custom_audio_buttons"></span>
  1938. </div>
  1939. </div>
  1940. <div class="music_menu">
  1941. {block:TrackName}<p><span class="info">{TrackName}</span></p>{/block:TrackName}
  1942. {block:Artist}<p><span class="info">{Artist}</span></p>{/block:Artist}
  1943.  
  1944. <div class="seek-cont">
  1945.     <span class="custom_audio_current_time"></span>
  1946.     <div class="custom_audio_seekbar"></div>
  1947.     <span class="custom_audio_time_left"></span>
  1948.     </div>
  1949. </div>
  1950. {/block:AudioPlayer}
  1951. </div>
  1952. </div>
  1953.  
  1954. {block:IfShowCaptions}
  1955. {block:Caption} <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">
  1956.  
  1957. {block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  1958.  
  1959. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  1960.  
  1961. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  1962.  
  1963. {block:IsActive} <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  1964.  
  1965. {block:IsDeactivated} <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated} </div> <div class="reblog-content"> {Body} </div> </div> {/block:Reblogs} </div> {/block:RebloggedFrom} </div> {/block:Caption}
  1966. {/block:IfShowCaptions}
  1967.  
  1968. {block:IfnotShowCaptions}
  1969. {block:PermalinkPage}
  1970. {block:Caption} <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">
  1971.  
  1972. {block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  1973.  
  1974. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  1975.  
  1976. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  1977.  
  1978. {block:IsActive} <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  1979.  
  1980. {block:IsDeactivated} <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated} </div> <div class="reblog-content"> {Body} </div> </div> {/block:Reblogs} </div> {/block:RebloggedFrom} </div> {/block:Caption}
  1981. {/block:PermalinkPage}
  1982. {/block:IfnotShowCaptions}
  1983. {/block:Audio}
  1984.  
  1985. {block:Video}
  1986. <div class="video">{Video-500}</div>
  1987. {block:IfShowCaptions}
  1988. {block:Caption} <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">
  1989.  
  1990. {block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  1991.  
  1992. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  1993.  
  1994. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  1995.  
  1996. {block:IsActive} <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  1997.  
  1998. {block:IsDeactivated} <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated}
  1999.  
  2000. </div> <div class="reblog-content"> {Body} </div> </div> {/block:Reblogs} </div> {/block:RebloggedFrom} </div> {/block:Caption}
  2001. {/block:IfShowCaptions}
  2002.  
  2003. {block:IfnotShowCaptions}
  2004. {block:PermalinkPage}
  2005. {block:Caption} <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">
  2006.  
  2007. {block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  2008.  
  2009. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  2010.  
  2011. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  2012.  
  2013. {block:IsActive} <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  2014.  
  2015. {block:IsDeactivated} <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated}
  2016.  
  2017. </div> <div class="reblog-content"> {Body} </div> </div> {/block:Reblogs} </div> {/block:RebloggedFrom} </div> {/block:Caption}
  2018. {/block:PermalinkPage}
  2019. {/block:IfnotShowCaptions}
  2020. {/block:Video}
  2021.  
  2022. {block:Chat}
  2023. <div class="chatp">
  2024. {block:Title}<div class="title">{Title}</div>{/block:Title}
  2025. <div class="chat">{block:Lines}<div class="line">{block:Label}<span class="label"><b>{Label}</b></span>{/block:Label}
  2026. {Line}</div>{/block:Lines}</div>
  2027. </div>
  2028. {/block:Chat}
  2029.  
  2030. {block:Answer}
  2031. <div id="askcont">
  2032. <div class="asker-cont">
  2033. <div id="asker-image"><img src="{AskerPortraitURL-128}"></div>
  2034. <div id="asker">
  2035. <div class="asker-link">{Asker} asked</div>
  2036. <div class="question">{Question}</div>
  2037. </div>
  2038. </div>
  2039. </div>
  2040.  
  2041. {block:Answerer}
  2042. <div id="replycont">
  2043. <div class="replier-cont">
  2044. <div id="replier-image"><img src="{AnswererPortraitURL-128}"></div>
  2045. <div id="replier">
  2046. <div class="replier-link">{Answerer} replied</div>
  2047. <div class="answer">{Answer}</div>
  2048. </div>
  2049. </div>
  2050. </div>
  2051. {/block:Answerer}
  2052.  
  2053. {block:NotReblog}  
  2054. <div class="caption"><figcaption>{Answer}</figcaption></div>
  2055. {/block:NotReblog}
  2056. {block:RebloggedFrom}
  2057. {block:Reblogs}
  2058. <div class="ask-caption" style="padding: 0 5px 5px;">
  2059. <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  2060. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  2061.  
  2062. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  2063.  
  2064. {block:IsActive} <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  2065.  
  2066. {block:IsDeactivated} <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated}</div>
  2067.  
  2068. <div class="reblog-content">{Body}</div></div>
  2069. </div>
  2070. {/block:Reblogs}
  2071. {/block:RebloggedFrom}
  2072. {/block:Answer}
  2073.  
  2074. {block:IndexPage}
  2075. {block:HasTags} <!-----------POST TAGS----------->
  2076. <div class="post_tags">
  2077. {block:Tags}
  2078. <a href="{TagURL}"><i class="ph-hash"></i> {Tag}</a>{/block:Tags}</div>
  2079. {/block:HasTags} <!-----------POST TAGS----------->
  2080.  
  2081. {block:Date}
  2082. <div class="time"> <!-----------POST INFO & PERMALINKS----------->
  2083. <div id="date-box">
  2084.     {block:Date}
  2085.     <a href="{Permalink}" title="{TimeAgo}"> {ShortMonth} <span>{DayOfMonth}{DayOfMonthSuffix}</span></a>
  2086.     {/block:Date}
  2087. </div>
  2088.  
  2089. {block:NoteCount}
  2090. <div class="notecount"><a href="{Permalink}"><i class="ph-eye"></i>{NoteCountWithLabel}</a></div>{/block:NoteCount}
  2091.  
  2092. <div class="controls">  
  2093. <a href="{ReblogURL}" target="_blank" title="reblog this post" class="reblog"><i class="ph-arrows-clockwise"></i></a>
  2094. <a title="like this post" class="like">{LikeButton size="15"}
  2095. <i class="ph-heart-straight"></i></a>
  2096. {block:HasTags}
  2097. <div class="tag-button"><a href="javascript:;" title="click for tags"><i class="ph-hash-straight"></i></a></div>
  2098. {/block:HasTags}
  2099. </div>  
  2100.  
  2101. </div> <!-----------POST INFO & PERMALINKS----------->
  2102. {/block:Date}
  2103. {/block:IndexPage}
  2104.  
  2105. </article> <!-----------POSTS----------->
  2106.  
  2107. <!-----------PERMALINK PAGE----------->
  2108. {block:PermalinkPage}
  2109. {block:Date}
  2110. <div id="perma">
  2111. <div class="perma-date">
  2112. <b>Posted:</b> {ShortMonth} {DayOfMonthWithZero}, {Year} @ {12Hour} {AmPm} {DayOfWeek}
  2113. <span class="perma-note">
  2114. {block:NoteCount}<b>Note count:</b> {NoteCountWithLabel}{/block:NoteCount}
  2115. </span>
  2116.  
  2117. {block:HasTags}
  2118. <span class="permatg">
  2119. <b>Tags:</b>
  2120. {block:Tags} <a href="{TagURL}" title="Tagged as">#{Tag}</a> {/block:Tags}
  2121. </span>
  2122. {/block:HasTags}
  2123. </div>
  2124.  
  2125. {block:RebloggedFrom}
  2126. <div class="rb">
  2127. <a class="via" href="{ReblogParentURL}" title="{ReblogParentName}"><img src="{ReblogParentPortraitURL-96}"></a>
  2128. <a class="root" href="{ReblogRootURL}" title="{ReblogRootName}"><img src="{ReblogRootPortraitURL-96}"></a>
  2129. </div>
  2130. {/block:RebloggedFrom}
  2131.  
  2132. </div>
  2133.  
  2134. {block:PostNotes}
  2135. <div id="notecontainer">{PostNotes}</div>
  2136. {/block:PostNotes}
  2137.  
  2138. {block:PermalinkPagination}
  2139. <div id="permpage">
  2140.     {block:NextPost}
  2141.         <a href="{NextPost}" title="Previous Post"><i class="ph-arrow-left"></i></a>
  2142.     {/block:NextPost}
  2143.    
  2144.     {block:PreviousPost}
  2145.         <a href="{PreviousPost}" title="Next Post"><i class="ph-arrow-right"></i></a>
  2146.     {/block:PreviousPost}
  2147. </div>
  2148. {/block:PermalinkPagination}
  2149. {/block:Date}
  2150. {/block:PermalinkPage}
  2151. <!-----------PERMALINK PAGE----------->
  2152. {/block:Posts}
  2153.  
  2154. </section><!------------------POSTS WRAPPER----------------------->
  2155.  
  2156. {block:IndexPage}
  2157. {block:Pagination}
  2158. <footer id="pagination"> <!-----------PAGINATION----------->
  2159. {block:PreviousPage}
  2160. <a href="{PreviousPage}"><i class="ph-caret-left-bold"></i></a>
  2161. {/block:PreviousPage}
  2162. page {CurrentPage} / {TotalPages}
  2163. {block:NextPage}
  2164. <a href="{NextPage}"><i class="ph-caret-right-bold"></i></a>
  2165. {/block:NextPage}
  2166. </footer> <!-----------PAGINATION----------->
  2167. {/block:Pagination}
  2168. {/block:IndexPage}
  2169.  
  2170. </section>  <!--------- POSTS CONTAINER ----------->
  2171.  
  2172.  
  2173. <!-------------------SCRIPTS/JQUERY (PART TWO)------------------->
  2174.  
  2175. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  2176.  
  2177. <!-----------Pixel Union photosets script----------->
  2178. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  2179. <script src="https://static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></script>
  2180. <!-----------Pixel Union photosets script----------->
  2181.  
  2182. <!---------- Responsive tumblr videos and external iframes script ---------->
  2183. <script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
  2184. <!---------- Responsive tumblr videos and external iframes script ---------->
  2185.  
  2186. <!-----------Tooltips Script----------->
  2187. <script src="https://unpkg.com/popper.js@1"></script> <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script> <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  2188. <!-----------Tooltips Script----------->
  2189.  
  2190. <!-----------customaudio.js script by annasthms @ tumblr----------->
  2191. <script src="https://cdn.jsdelivr.net/gh/annasthms/customaudio@latest/customaudio.min.js"></script>
  2192. <!-----------customaudio.js script by annasthms @ tumblr----------->
  2193.  
  2194. <script src="https://unpkg.com/feather-icons"></script>
  2195.  
  2196. <script>
  2197. $(document).ready(function(){
  2198.     //pxu photosets by @ shythemes & bychloethemes
  2199.    $('.photo-slideshow').pxuPhotoset({
  2200.        lightbox: true,
  2201.        rounded: false,
  2202.        gutter: '{select:photoset gutter}px',
  2203.        photoset: '.photo-slideshow',
  2204.        photoWrap: '.photo-data',
  2205.        photo: '.pxu-photo'
  2206.    });
  2207.     //.gifv to gif conversion script
  2208.     $('img[src*="media.tumblr.com"]').each(function() {
  2209.         var newsrc = $(this).attr('src').replace('gifv','gif');
  2210.     $(this).attr('src', newsrc);
  2211.     });
  2212.     $('a[href*="media.tumblr.com"]').each(function() {
  2213.         var newhref = $(this).attr('href').replace('gifv','gif');
  2214.      $(this).attr('href', newhref);
  2215.     });
  2216.     // tippy tooltips script
  2217.     tippy('a[title]', {
  2218.         theme: 'custom',
  2219.         arrow: tippy.roundArrow,
  2220.         zIndex: 9999999999,
  2221.         placement: 'auto',
  2222.         maxWidth: 300,
  2223.         content(reference) {
  2224.             const title = reference.getAttribute('title');
  2225.             reference.removeAttribute('title'); return title; },
  2226.     });
  2227.     //responsive tumblr videos and external iframes by @ nouvae
  2228.     function flexFrame() {
  2229.     $(".caption").each(function() {
  2230.         $(this).find("iframe").wrap("<div class='capframe'></div>"); // wrap iframe
  2231.             flexibleFrames($(".capframe"));
  2232.         });
  2233.             flexibleFrames($(".video"));
  2234.     }
  2235.     $(document).ready(flexFrame);
  2236.     //customaudio.js script by annasthms @ tumblr
  2237.     customAudio({
  2238.     post: ".posts",
  2239.     wrappers: {
  2240.         audio: ".custom_audio_wrapper",
  2241.         buttons: ".custom_audio_buttons",
  2242.         duration: ".custom_audio_duration",
  2243.         timeCurrent: ".custom_audio_current_time",
  2244.         timeLeft: ".custom_audio_time_left",
  2245.         seekbar: ".custom_audio_seekbar"
  2246.     },
  2247.         default: false,
  2248.         pauseAll: true,
  2249.         playButton: "<i data-feather='play'></i>",
  2250.         pauseButton: "<i data-feather='pause'></i>",
  2251.         errorIcon: "<i data-feather='x'></i>",
  2252.         hideInfoIfError: true,
  2253.         callAfterLoad: () => {
  2254.             feather.replace();
  2255.         }
  2256.     });
  2257. });
  2258. </script>
  2259.  
  2260. <script>
  2261.    
  2262.   // toggle dark/light
  2263. const toggle = document.getElementById("theme-toggle");
  2264.  
  2265. toggle.onclick = function () {
  2266.     document.documentElement.classList.add("theme-transition");
  2267.  
  2268.     let currentTheme = document.documentElement.getAttribute("data-theme");
  2269.     let targetTheme = "light";
  2270.  
  2271.     if (currentTheme === "light") {
  2272.         targetTheme = "dark";
  2273.     }
  2274.  
  2275.     window.setTimeout(function () {
  2276.         document.documentElement.classList.remove("theme-transition");
  2277.     }, 50);
  2278.  
  2279.     document.documentElement.setAttribute("data-theme", targetTheme);
  2280.     localStorage.setItem("theme", targetTheme);
  2281.     };
  2282. </script>
  2283.  
  2284. <!-------------------SCRIPTS/JQUERY (PART TWO)------------------->
  2285.  
  2286. </body>
  2287. </html> <!---------------------------END--------------------------->
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!