API tools faq
paste
Advertisement
themesbydoori

Ludic

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