API tools faq
paste
Advertisement
themesbydoori

Spectrum

themesbydoori
Jun 20th, 2018 (edited)
4,526
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 89.86 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.googleapis.com">
  74. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  75. <link href="https://fonts.googleapis.com/css2?family={text:body font}:wght@400;600;700&display=swap" rel="stylesheet">
  76. <!--------------Custom Fonts-------------->
  77.  
  78. <!--------------Homelinks Icons -------------->
  79. <script src="https://unpkg.com/phosphor-icons"></script>
  80. <!--------------Homelinks Icons-------------->
  81.  
  82.     <title>{Title}</title>
  83.     <link rel="shortcut icon" href="{Favicon}">
  84.     <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  85.     <meta charset="utf-8">
  86.     {block:Description}
  87.     <meta name="description" content="{MetaDescription}" />
  88.     {/block:Description}
  89.     <meta http-equiv="x-dns-prefetch-control" content="off"/>
  90.     <meta name="viewport" content="width=device-width, initial-scale=1">
  91.  
  92. <!--------------Custom Options-------------->
  93. <meta name="color:background" content="#ffffff" />
  94. <meta name="color:accent" content="#74aa98" />
  95. <meta name="color:accented text" content="#ffffff" />
  96. <meta name="color:Text" content="#292929" />    
  97. <meta name="color:bold" content="#74aa98"/>
  98. <meta name="color:italic" content="#292929"/>
  99. <meta name="color:Links" content="#000000" />
  100. <meta name="color:Link Hover" content="#74aa98" />
  101. <meta name="color:text selection" content="#292929" />
  102. <meta name="color:text selection background" content="#74aa98" />
  103. <meta name="color:tooltip" content="#ffffff" />
  104. <meta name="color:tooltip background" content="#414141" />
  105. <meta name="color:Blockquote" content="#74aa98" />
  106. <meta name="color:scrollbar" content="#74aa98" />
  107. <meta name="color:linkbar links" content="#ffffff" />
  108. <meta name="color:linkbar links hover" content="#74aa98" />
  109. <meta name="color:linkbar" content="#414141" />
  110. <meta name="color:header content" content="#292929" />
  111. <meta name="color:header content background" content="#ffffff" />
  112. <meta name="color:description" content="#292929" />
  113. <meta name="color:Posts" content="#fafafa" />
  114. <meta name="color:Post Title" content="#000000" />
  115. <meta name="color:Post Borders" content="#e8e8e8" />
  116. <meta name="color:question" content="#000000" />
  117. <meta name="color:question background" content="#fafafa" />
  118. <meta name="color:chat odd" content="#000000"/>
  119. <meta name="color:chat even" content="#74aa98"/>
  120. <meta name="color:pagination" content="#000000" />
  121. <meta name="color:permalink" content="#000000" />
  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 hover night" content="#92bcae" />
  158. <meta name="color:permalink like night" content="#df2b2b" />
  159. <meta name="color:permalink reblog night" content="#38bb27" />
  160.  
  161. <meta name="select:Background Attachment" content="fixed" title="fixed">
  162. <meta name="select:Background Attachment" content="scroll" title="scroll">
  163. <meta name="select:Background Repeat" content="repeat" title="repeat">
  164. <meta name="select:Background Repeat" content="no-repeat" title="no repeat">
  165.  
  166. <meta name="select:font size" content="11" title="11px">
  167. <meta name="select:font size" content="12" title="12px">
  168. <meta name="select:font size" content="13" title="13px">
  169. <meta name="select:font size" content="14" title="14px">
  170. <meta name="select:font size" content="15" title="15px">
  171.  
  172. <meta name="select:text align" content="left" title="left">
  173. <meta name="select:text align" content="justify" title="justify">
  174. <meta name="select:description text align" content="center" title="center">
  175. <meta name="select:description text align" content="justify" title="justify">
  176.  
  177. <meta name="select:Post Size" content="300" title="300px">
  178. <meta name="select:Post Size" content="350" title="350px">
  179. <meta name="select:Post Size" content="400" title="400px">
  180. <meta name="select:Post Size" content="450" title="450px">
  181. <meta name="select:Post Size" content="475" title="475px">
  182. <meta name="select:Post Size" content="500" title="500px">
  183. <meta name="select:Post Size" content="525" title="525px">
  184. <meta name="select:Post Size" content="540" title="540px">
  185.  
  186. <meta name="select:Photoset gutter" content="1" title="1px">
  187. <meta name="select:Photoset gutter" content="2" title="2px">
  188. <meta name="select:Photoset gutter" content="4" title="4px">
  189. <meta name="select:Photoset gutter" content="6" title="6px">
  190. <meta name="select:Photoset gutter" content="8" title="8px">
  191. <meta name="select:Photoset gutter" content="10" title="10px">
  192.  
  193. <meta name="text:main font" content="Source Sans Pro">
  194.  
  195. <meta name="text:about name" content="name here" />
  196. <meta name="text:about age" content="age here" />
  197. <meta name="text:about pronouns" content="pronous here" />
  198. <meta name="text:about location" content="location here" />
  199. <meta name="text:about description" content="about me here" />
  200.  
  201. <meta name="text:skill percentage one" content="25" />
  202. <meta name="text:skill percentage two" content="60" />
  203. <meta name="text:skill percentage three" content="43" />
  204. <meta name="text:skill percentage four" content="80" />
  205.  
  206. <meta name="text:skill label one" content="skill one" />
  207. <meta name="text:skill label two" content="skill two" />
  208. <meta name="text:skill label three" content="skill three" />
  209. <meta name="text:skill label four" content="skill four" />
  210.  
  211. <meta name="text:social media URL 1" content="social media URL 1" />
  212. <meta name="text:social media name 1" content="Instagram" />
  213. <meta name="text:social media URL 2" content="social media URL 2" />
  214. <meta name="text:social media name 2" content="Twitter" />
  215. <meta name="text:social media URL 3" content="social media URL 3" />
  216. <meta name="text:social media name 3" content="Discord" />
  217. <meta name="text:social media URL 4" content="social media URL 4" />
  218. <meta name="text:social media name 4" content="Tiktok" />
  219.  
  220. <meta name="text:CustomLink1URL" content="Link 1 URL" />
  221. <meta name="text:CustomLink1Name" content="Link 1" />
  222. <meta name="text:CustomLink2URL" content="Link 2 URL" />
  223. <meta name="text:CustomLink2Name" content="Link 2" />
  224. <meta name="text:CustomLink3URL" content="Link 3 URL" />
  225. <meta name="text:CustomLink3Name" content="Link 3" />
  226. <meta name="text:CustomLink4URL" content="Link 4 URL" />
  227. <meta name="text:CustomLink4Name" content="Link 4" />
  228. <meta name="text:CustomLink5URL" content="Link 5 URL" />
  229. <meta name="text:CustomLink5Name" content="Link 5" />
  230. <meta name="text:CustomLink6URL" content="Link 6 URL" />
  231. <meta name="text:CustomLink6Name" content="Link 6" />
  232. <meta name="text:CustomLink7URL" content="Link 7 URL" />
  233. <meta name="text:CustomLink7Name" content="Link 7" />
  234. <meta name="text:CustomLink8URL" content="Link 8 URL" />
  235. <meta name="text:CustomLink8Name" content="Link 8" />
  236. <meta name="text:CustomLink9URL" content="Link 9 URL" />
  237. <meta name="text:CustomLink9Name" content="Link 9" />
  238.  
  239. <meta name="text:tagLink1URL" content="taglink 1 URL" />
  240. <meta name="text:tagLink1Name" content="taglink 1" />
  241. <meta name="text:tagLink2URL" content="taglink 2 URL" />
  242. <meta name="text:tagLink2Name" content="taglink 2" />
  243. <meta name="text:tagLink3URL" content="taglink 3 URL" />
  244. <meta name="text:tagLink3Name" content="taglink 3" />
  245. <meta name="text:tagLink4URL" content="taglink 4 URL" />
  246. <meta name="text:tagLink4Name" content="taglink 4" />
  247. <meta name="text:tagLink5URL" content="taglink 5 URL" />
  248. <meta name="text:tagLink5Name" content="taglink 5" />
  249. <meta name="text:tagLink6URL" content="taglink 6 URL" />
  250. <meta name="text:tagLink6Name" content="taglink 6" />
  251.  
  252. <meta name="image:background" content=""/>
  253. <meta name="image:header" content=""/>
  254.  
  255. <meta name="if:two columns" content="0"/>
  256. <meta name="if:three columns" content="1"/>
  257. <meta name="if:header" content="1"/>
  258. <meta name="if:blog label" content="1"/>
  259. <meta name="if:Small Cursor" content="0" />
  260. <meta name="if:Custom Text Selection" content="0"/>
  261. <meta name="if:Faded Images" content="0"/>
  262. <meta name="if:Grayscale Images" content="0"/>
  263. <meta name="if:Show Captions" content="1"/>
  264.  
  265. <meta name="if:Link1" content="1" />
  266. <meta name="if:Link2" content="1" />
  267. <meta name="if:Link3" content="1" />
  268. <meta name="if:Link4" content="1" />
  269. <meta name="if:Link5" content="1" />
  270. <meta name="if:Link6" content="1" />
  271. <meta name="if:Link7" content="1" />
  272. <meta name="if:Link8" content="1" />
  273. <meta name="if:Link9" content="1" />
  274.  
  275. <script>
  276. const storedTheme = localStorage.getItem("theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
  277. if (storedTheme) document.documentElement.setAttribute("data-theme", storedTheme);  
  278. </script>
  279.  
  280. <!--
  281.        NPF images fix v3.0 by @glenthemes [2021]
  282.        💌 git.io/JRBt7
  283. --->
  284. <script src="//npf-images-v3.github.io/script.js"></script>
  285. <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
  286. <style tmblr-npf>
  287. :root {
  288.     --NPF-Caption-Spacing: 0.5em;
  289.     --NPF-Image-Spacing: 4px;
  290. }
  291. </style>
  292.  
  293. <style type="text/css">
  294.  
  295. :root {
  296.    
  297.     /*----------BLOG OPTIONS----------*/
  298.     --body-font: '{text:main font}';
  299.     --text-font: {select:font size}px;
  300.     --post-size: {select:post size}px;
  301.    
  302.     --skill-percentage-one: {text:skill percentage one}%;
  303.     --skill-percentage-two: {text:skill percentage two}%;
  304.     --skill-percentage-three: {text:skill percentage three}%;
  305.     --skill-percentage-four: {text:skill percentage four}%;
  306.  
  307. }
  308.  
  309.     /*----------COLOR OPTIONS----------*/
  310.  
  311. :root, html[data-theme='light'] {
  312.     --LightOn: block; /* displays <span> with moon icon */
  313.     --LightOff: none;  /* hides <span> with sun icon */
  314.    
  315.     --main-background: {color:background};
  316.     --accent: {color:accent};
  317.     --accented-text: {color:accented text};
  318.     --lightbox-background: rgba({RGBcolor:background}, 0.6);
  319.     --audio-player-background: rgba({RGBcolor:posts}, 0.8);
  320.     --audio-background:  rgba({RGBcolor:posts}, 0.9);
  321.     --main-text: {color:text};
  322.     --bold: {color:bold};
  323.     --italic: {color:italic};
  324.     --main-links: {color:links};
  325.     --link-hover: {color:link hover};
  326.     --text-selection: {color:text selection};
  327.     --text-selection-background: {color:text selection background};
  328.     --tooltip: {color:tooltip};
  329.     --tooltip-background: {color:tooltip background};
  330.     --blockquote: {color:blockquote};
  331.     --scrollbar: {color:scrollbar};
  332.     --linkbar-links: {color:linkbar links};
  333.     --linkbar-links-hover: {color:linkbar links hover};
  334.     --description: {color:description};
  335.     --linkbar: {color:linkbar};
  336.     --header-content: {color:header content};
  337.     --header-content-background: rgba({RGBcolor:header content background}, 0.15);
  338.     --header-content-border: rgba({RGBcolor:header content background}, 0.55);
  339.     --main-posts: {color:posts};
  340.     --post-title: {color:post title};
  341.     --post-borders: {color:post borders};
  342.     --question: {color:question};
  343.     --question-background: {color:question background};
  344.     --chat-odd: {color:chat odd};
  345.     --chat-even: {color:chat even};
  346.     --pagination: {color:pagination};
  347.     --permalink: {color:permalink};
  348.     --permalink-hover: {color:permalink hover};
  349.     --permalink-like: {color:permalink like};
  350.     --permalink-reblog: {color:permalink reblog};
  351. }
  352.  
  353. html[data-theme='dark'] {
  354.     --LightOn: none; /* hides <span> with moon icon */
  355.     --LightOff: block; /* displays <span> with sun icon */
  356.    
  357.     --accent: {color:accent night};
  358.     --accented-text: {color:accented text night};
  359.     --main-background: {color:background night};
  360.     --lightbox-background: rgba({RGBcolor:background night}, 0.6);
  361.     --audio-player-background: rgba({RGBcolor:posts background night}, 0.8);
  362.     --audio-background:  rgba({RGBcolor:posts background night}, 0.9);
  363.     --main-text: {color:text night};
  364.     --bold: {color:bold night};
  365.     --italic: {color:italic night};
  366.     --main-links: {color:links night};
  367.     --link-hover: {color:link hover night};
  368.     --text-selection: {color:text selection night};
  369.     --text-selection-background: {color:text selection background night};
  370.     --tooltip: {color:tooltip night};
  371.     --tooltip-background: {color:tooltip background night};
  372.     --description: {color:description night};
  373.     --linkbar-links: {color:linkbar links night};
  374.     --linkbar-links-hover: {color:linkbar links hover night};
  375.     --header-content: {color:header content night};
  376.     --header-content-background: rgba({RGBcolor:header content background night},0.15);
  377.     --header-content-border: rgba({RGBcolor:header content background night}, 0.55);
  378.     --linkbar: {color:linkbar night};
  379.     --main-posts: {color:posts background night};
  380.     --post-borders: {color:post borders night};
  381.     --post-title: {color:posts title night};
  382.     --question: {color:question night};
  383.     --question-background: {color:question background night};
  384.     --chat-odd: {color:chat odd night};
  385.     --chat-even: {color:chat even night};
  386.     --pagination: {color:pagination night};
  387.     --permalink: {color:permalink night};
  388.     --permalink-hover: {color:permalink hover night};
  389.     --permalink-like: {color:permalink like night};
  390.     --permalink-reblog: {color:permalink reblog night};
  391. }
  392.  
  393. html.theme-transition,
  394. html.theme-transition *,
  395. html.theme-transition *:before,
  396. html.theme-transition *:after {
  397.   transition: 0s !important;
  398.   transition-delay: 0 !important;
  399. }
  400.  
  401. /*----------TUMBLR CONTROLS----------*/
  402.  
  403. iframe.tmblr-iframe {
  404.     opacity: 0;
  405.     visibility: hidden;
  406.     position:fixed!important;
  407.     z-index: 300!important;
  408.     top: 80px!important;
  409.     right: 70px!important;
  410.     opacity:0.7!important;
  411.     transform:scale(0.7);
  412.     transform-origin:100% 0;
  413.     -webkit-transform:scale(0.7);
  414.     -webkit-transform-origin:100% 0;
  415.     -o-transform:scale(0.7);
  416.     -o-transform-origin:100% 0;
  417.     -moz-transform:scale(0.7);
  418.     -moz-transform-origin:100% 0;
  419.     -ms-transform:scale(0.7);
  420.      filter:invert(1);
  421.     -webkit-filter:invert(1);
  422.     -o-filter:invert(1);
  423.     -moz-filter:invert(1);
  424.     -ms-filter:invert(1);
  425.     filter:invert(100%) hue-rotate(180deg);
  426.     -webkit-filter:invert(100%) hue-rotate(180deg);
  427.     -moz-filter:invert(100%) hue-rotate(180deg);
  428.     -o-filter:invert(100%) hue-rotate(180deg);
  429.     -ms-filter:invert(100%) hue-rotate(180deg);
  430.     -webkit-transition: all 0.5s;
  431.     -moz-transition: all 0.5s;
  432.     -ms-transition: all 0.5s;
  433.     -o-transition: all 0.5s;
  434.     transition: all 0.5s;
  435. }
  436.  
  437. body.controls-click iframe.tmblr-iframe {
  438.     opacity: 0.7;
  439.     visibility: visible;
  440.     -webkit-transition: all 0.5s;
  441.     -moz-transition: all 0.5s;
  442.     -ms-transition: all 0.5s;
  443.     -o-transition: all 0.5s;
  444.     transition: all 0.5s;
  445. }
  446.  
  447. iframe.tmblr-iframe:hover {
  448.     opacity:1.1!important;
  449.     -webkit-transition: 0.6s ease;
  450.     -moz-transition: 0.6s ease;
  451.     -o-transition: 0.6s ease;
  452.     transition: 0.6s ease;
  453. }
  454.  
  455. html[data-theme='dark'] iframe.tmblr-iframe  {
  456.     opacity: 1;
  457.     filter:invert(0)!important;
  458.     -webkit-filter:invert(0)!important;
  459.     -o-filter:invert(0)!important;
  460.     -moz-filter:invert(0)!important;
  461.     -ms-filter:invert(0)!important;
  462.     filter:invert(100%) hue-rotate(180deg);
  463.     -webkit-filter:invert(100%) hue-rotate(180deg);
  464.     -moz-filter:invert(100%) hue-rotate(180deg);
  465.     -o-filter:invert(100%) hue-rotate(180deg);
  466.     -ms-filter:invert(100%) hue-rotate(180deg);
  467. }
  468.  
  469. /*--------CUSTOM TUMBLR LIGHTBOX--------*/
  470.  
  471. .vignette, #vignette {
  472.     opacity:0;
  473. }
  474. .lightbox-image, #tumblr_lightbox img {
  475.     box-shadow:none !important;
  476.     border-radius:0 !important;
  477.     max-width:none;
  478. }
  479.  
  480. .tmblr-lightbox, #tumblr_lightbox {
  481.     background-color: var(--lightbox-night)!important;
  482. }
  483.  
  484. .lightbox-image, #tumblr_lightbox img {
  485.     background-color: var(--main-posts)!important;
  486.     padding: 10px !important;
  487.     -moz-box-sizing:border-box;
  488.     box-sizing:border-box;
  489. }
  490.  
  491. /*----------SCROLLBAR----------*/
  492.  
  493. ::-webkit-scrollbar {
  494.     width: 14px;
  495.     height: 10px;
  496. }
  497. ::-webkit-scrollbar-button {
  498.     width: 0px;
  499.     height: 0px;
  500. }
  501. ::-webkit-scrollbar-thumb {
  502.     background-color: var(--scrollbar);
  503.     border-radius: 20px;
  504.     border: 3px solid var(--main-background);
  505. }
  506.  
  507. ::-webkit-scrollbar-track {
  508.     background: var(--main-posts);
  509.     border: 8px solid var(--main-posts);
  510. }
  511.  
  512. ::-webkit-scrollbar-corner {
  513.     background: transparent;
  514. }
  515.  
  516. /*----------TOOLTIPS----------*/
  517.  
  518. .tippy-tooltip.custom-theme {
  519.     background-color: var(--tooltip-background);
  520.     color: var(--tooltip);
  521.     text-align:center;
  522.     font-size: 12px;
  523.     font-weight: 700;
  524.     text-transform: lowercase;
  525. }
  526.  
  527. .tippy-tooltip.custom-theme .tippy-svg-arrow {
  528.   fill: var(--tooltip-background);
  529. }
  530.  
  531. /*----------TEXT SELECTION----------*/
  532.  
  533. {block:ifCustomTextSelection}
  534. ::selection {
  535.     background: var(--text-selection-background);
  536.     color: var(--text-selection);
  537. }
  538.  
  539. ::-moz-selection {
  540.     background: var(--text-selection-background);
  541.     color: var(--text-selection);
  542. }
  543.  
  544. ::-webkit-selection {
  545.     background: var(--text-selection-background);
  546.     color: var(--text-selection);
  547. }
  548. {/block:ifCustomTextSelection}
  549.  
  550. /*----------THEME BASICS----------*/
  551.  
  552. body {
  553.     color: var(--main-text);
  554.     font-family: var(--body-font), sans-serif;
  555.     font-weight: 400;
  556.     font-size: var(--text-font);
  557.     line-height:180%;
  558.     margin:0;
  559.     padding: 0;
  560.     box-sizing: border-box;
  561.     text-align:left;
  562.     background: var(--main-background) url({image:Background}) center;
  563.     background-attachment: {select:Background Attachment};
  564.     background-repeat: {select:Background Repeat};
  565.     -webkit-font-smoothing: antialiased;
  566.     -moz-osx-font-smoothing: grayscale;
  567. }
  568.  
  569. p:empty {
  570.     display: none;
  571. }
  572.  
  573. b,strong {
  574.     color:var(--bold);
  575.     font-weight: 700;
  576. }
  577.  
  578. i,em {
  579.     color:var(--italic);
  580. }
  581.  
  582. small,sub,sup {
  583.     font-size: calc(var(--text-font) - 1px);
  584. }
  585.  
  586. h1,h2,h3 {
  587.     font-weight: 700;
  588.     font-size: 1.3em;
  589.     color: var(--bold);
  590. }
  591.  
  592. h4,h5,h6 {
  593.     font-weight: 700;
  594.     font-size: 1.2em;
  595.     color: var(--bold);
  596. }
  597.  
  598. pre {
  599.     white-space: pre-wrap;
  600.     white-space: -moz-pre-wrap;
  601.     white-space: -pre-wrap;
  602.     white-space: -o-pre-wrap;
  603.     word-wrap: break-word;
  604.     padding: 5px 10px;
  605.     font-family: inherit;
  606.     font-size: inherit;
  607.     font-weight: inherit;
  608.     line-height: 150%;
  609.     color: var(--question);
  610.     background-color: var(--question-background);
  611. }
  612.  
  613. blockquote:not(.tumblr_parent) {
  614.     padding-left: 20px;
  615.     margin: 10px;
  616.     border-left: 3px solid var(--blockquote);
  617. }
  618.  
  619. blockquote img {
  620.     max-width: 100%;
  621.     height: auto;
  622. }
  623.  
  624. figure {
  625.   margin: 1em 3px;
  626. }
  627.  
  628. a {
  629.     color:var(--main-links);
  630.     text-decoration: none;
  631.     -moz-transition: 0.6s ease;
  632.     -o-transition: 0.6s ease;
  633.     -webkit-transition: 0.6s ease;
  634.     transition: 0.6s ease;
  635. }
  636.  
  637. a:hover {
  638.     color:var(--link-hover);
  639.     -moz-transition: 0.6s ease;
  640.     -o-transition: 0.6s ease;
  641.     -webkit-transition: 0.6s ease;
  642.     transition: 0.6s ease;
  643. }
  644.  
  645. {block:ifSmallCursor}
  646. html, body, a { cursor:url("https://i.imgur.com/2qleX.jpg"), auto !important; }
  647. a:hover{cursor:url("https://i.imgur.com/IepP2.jpg"), auto !important;}
  648. {/block:ifSmallCursor}
  649.  
  650. /*----------PAGINATION----------*/
  651.  
  652. #pagination {
  653.     margin: 20px auto 0 auto;
  654.     padding: 15px 20px;
  655.     font-weight: 700;
  656.     background-color: var(--main-posts);
  657.     display: flex;
  658.     justify-content: center;
  659.     align-items: center;
  660.     color: var(--pagination);
  661. }
  662.  
  663. #pagination i {
  664.     margin: 0 20px;
  665.     font-weight: 700;
  666.     border-radius: 5px;
  667.     color:var(--accented-text);
  668.     background-color: var(--accent);
  669.     padding: 5px;
  670.     border-radius: 5px;
  671.     border: 1px dashed transparent;
  672.     -moz-transition: 0.6s ease;
  673.     -o-transition: 0.6s ease;
  674.     -webkit-transition: 0.6s ease;
  675.     transition: 0.6s ease;
  676. }
  677.  
  678. #pagination i:hover {
  679.     color: var(--main-links);
  680.     border: 1px dashed var(--accent);
  681.     background-color: transparent;
  682.     -moz-transition: 0.6s ease;
  683.     -o-transition: 0.6s ease;
  684.     -webkit-transition: 0.6s ease;
  685.     transition: 0.6s ease;
  686. }
  687.  
  688. /*----------CAROUSEL CONTAINER----------*/
  689.  
  690. #all {
  691.     display: flex;
  692.     justify-content: center;
  693.     position: relative;
  694.     margin-top: 0;
  695.     min-height: 100vh;
  696. }
  697.  
  698. .blog-wrapper {
  699.     position: relative;
  700.     width: 100%;
  701.     height: 100%;
  702.     transition: transform 0.4s ease-in-out;
  703. }
  704.  
  705. #carousel {
  706.     overflow: hidden;
  707.     width: 100%;
  708.     height: 100vh;
  709.     background-color: var(--main-background);
  710. }
  711.  
  712. /*----------POSIS CONTAINER----------*/
  713.  
  714. .cage-1, .cage-2, .cage-3, .cage-4 {
  715.     overflow-y: auto;
  716.     overflow-X: hidden;
  717.     width: inherit;
  718.     height: calc(100% - 70px);
  719.     margin-top: 70px;
  720. }
  721.  
  722. .cage-2, .cage-3, .cage-4 {
  723.     display: flex;
  724.     justify-content: center;
  725. }
  726.  
  727. .wrap {
  728.     position: relative;
  729.     margin: auto;
  730.     padding-bottom: 0;
  731.     {block:PermalinkPage}
  732.     margin-bottom: 0;
  733.     padding-bottom: 50px;
  734.     {block:PermalinkPage}
  735. }
  736.  
  737. #content {
  738.     width: var(--post-size);
  739.     {block:iftwocolumns}
  740.     width: calc((var(--post-size) * 2) + 60px);
  741.     {/block:iftwocolumns}
  742.     {block:ifthreecolumns}
  743.     width: calc((var(--post-size) * 3) + 120px);
  744.     {/block:ifthreecolumns}
  745.     margin: 100px auto 0;
  746.     {block:PermalinkPage}
  747.     width: 700px;
  748.     margin-top: 80px;
  749.     {/block:PermalinkPage}
  750. }
  751.  
  752. .posts {
  753.     width: var(--post-size);
  754.     margin-bottom: 60px;
  755.     {block:IndexPage}
  756.     opacity: 1;
  757.     z-index: -1;
  758.     {/block:IndexPage}
  759.     {block:PermalinkPage}
  760.     margin-bottom: 50px;
  761.     width: 700px;
  762.     {/block:PermalinkPage}
  763. }
  764.  
  765. .posts ul li {
  766.     list-style: none;
  767.     margin-left: -25px;
  768.     padding-left: 10px;
  769. }
  770.  
  771. .posts ul li:before {
  772.     content: "▷";
  773.     padding-right: 10px;
  774.     color: var(--accent);
  775. }
  776.  
  777. .posts ol {
  778.     list-style-type: upper-roman;
  779.     text-transform: justify;
  780.     margin-left: -10px;
  781. }
  782.  
  783. .posts iframe {
  784.     max-width:100%;
  785.     display: block;
  786.     padding: 0;
  787.     margin: 0
  788. }
  789.  
  790. /*----------ABOUT SECTION----------*/
  791.  
  792. #about-container, #faq-container, #navi-container {
  793.     width: 700px;
  794.     margin-top: 30px;
  795. }
  796. .about-content, .faq-content, .navi-content {
  797.     padding-bottom: 70px;
  798. }
  799.  
  800. .about-title, .faq-title, .navi-title {
  801.     padding: 10px 0;
  802.     box-sizing: border-box;
  803.     margin-bottom: 20px;
  804. }
  805.  
  806. .blog-label {
  807.     width: var(--post-size);
  808.     position: relative;
  809.     margin: 20px auto -70px;
  810.     padding: 10px 0;
  811.     box-sizing: border-box;
  812.     {block:ifnotbloglabel}
  813.     display: none;
  814.     {/block:ifnotbloglabel}
  815. }
  816.  
  817. .blog-label h2, .about-title h2, .faq-title h2, .navi-title h2 {
  818.     font-size: 1.2em;
  819.     text-transform: uppercase;
  820.     text-align: center;
  821.     color: var(--main-links);
  822. }
  823.  
  824. .about-description {
  825.     padding: 40px;
  826.     box-sizing: border-box;
  827.     background-color: var(--main-posts);
  828.     margin-top: 10px;
  829.     text-align: {select:text align};
  830. }
  831.  
  832. .about-description li {
  833.     list-style-type: none;
  834.     margin: 0;
  835.     display: inline-block;
  836.     margin: 0 10px 20px 0;
  837. }
  838.  
  839. .about-description li i, .social-links i {
  840.     margin-right: 10px;
  841.     background-color: var(--accent);
  842.     color: var(--accented-text);
  843.     padding: 3px;
  844.     font-size: 20px;
  845.     vertical-align: middle;
  846.     border-radius: 5px;
  847. }
  848.  
  849. .social-links {
  850.     margin-top: 35px;
  851. }
  852.  
  853. .about-info h2 {
  854.     margin-top: 0;
  855. }
  856.  
  857. .about-info h2, .social-links h2 {
  858.     color: var(--main-links);
  859. }
  860.  
  861. .social-links a {
  862.     display: inline-block;
  863.     margin-right: 10px;
  864. }
  865.  
  866. /*----------ABOUT SKILLS / STATS----------*/
  867.  
  868. .skills-wrapper {
  869.     padding: 40px;
  870.     background-color: var(--main-posts);
  871.     margin-top: 10px;
  872. }
  873.  
  874. .skills-content p {
  875.     color: var(--main-links);
  876.     font-weight: 700;
  877.     margin: 0 0 15px;
  878. }
  879.  
  880. .skill-cont {
  881.     margin-bottom: 30px;
  882. }
  883.  
  884. .skill-cont:last-of-type {
  885.     margin-bottom: 0;
  886. }
  887.  
  888. .skill {
  889.     background-color: var(--post-borders);
  890.     padding: 0;
  891.     box-sizing: border-box;
  892.     border-radius: 10px;
  893. }
  894.  
  895. .skill-set {
  896.     background-color: var(--accent);
  897.     width: 100%;
  898.     height: 10px;
  899.     border-radius: 10px;
  900.     transition: 0.6s;
  901. }
  902.  
  903. /*----------FAQ SECTION----------*/
  904.  
  905. .faq-description {
  906.     margin-top: 20px;
  907.     margin-bottom: 40px;
  908. }
  909.  
  910. .faq-question {
  911.     padding: 15px 25px;
  912.     box-sizing: border-box;
  913.     position: relative;
  914.     font-weight: 700;
  915.     background-color: var(--accent);
  916.     color: var(--accented-text);
  917. }
  918.  
  919. .faq-question:after {
  920.     top: 100%;
  921.     left: 25px;
  922.     border: solid transparent;
  923.     content: " ";
  924.     height: 0;
  925.     width: 0;
  926.     position: absolute;
  927.     pointer-events: none;
  928.     border-color: rgba({RGBcolor:posts}, 0);
  929.     border-top-color: var(--accent);
  930.     border-width: 13px;
  931.     margin-left: 0px;
  932. }
  933.  
  934. .faq-answer {
  935.     padding: 20px 25px;
  936.     box-sizing: border-box;
  937.     background-color: var(--main-posts);
  938. }
  939.  
  940. /*----------NAVIGATION SECTION----------*/
  941.  
  942. .morelinks, .taglinks {
  943.     padding: 25px 40px;
  944.     box-sizing: border-box;
  945.     background-color: var(--main-posts);
  946.     text-align: center;
  947. }
  948.  
  949. .morelinks h2, .taglinks h2 {
  950.     color: var(--main-links);
  951.     text-align: left;
  952.     text-transform: lowercase;
  953. }
  954.  
  955. .morelinks i, .taglinks i {
  956.     margin-right: 10px;
  957.     background-color: var(--accent);
  958.     color: var(--accented-text);
  959.     padding: 3px;
  960.     font-size: 20px;
  961.     vertical-align: middle;
  962.     border-radius: 5px;
  963. }
  964.  
  965. .morelinks a, .taglinks a {
  966.     display: inline-block;
  967.     margin: 20px;
  968.     width: 150px;
  969.     border: 1px dashed transparent;
  970.     padding: 3px 10px;
  971.     box-sizing: border-box;
  972. }
  973.  
  974. .morelinks a:hover, .taglinks a:hover {
  975.     border: 1px dashed var(--accent);
  976. }
  977.  
  978. /*----------VIDEO POSTS----------*/
  979.  
  980. .video {
  981.     overflow: hidden;
  982. }
  983.  
  984. .tumblr_video_container {
  985.     width: auto !important;
  986.     height: auto !important;
  987. }
  988.  
  989. /*----------PHOTO/PHOTOSET POSTS----------*/
  990.  
  991. .posts img {
  992.     max-width: 100%;
  993.     display: block;
  994.     border: 0;
  995. }
  996.  
  997. .posts .photo img {
  998.     {block:ifFadedImages}
  999.     {block:IndexPage}
  1000.     opacity: 0.6;
  1001.     -moz-transition: 0.6s ease;
  1002.     -o-transition: 0.6s ease;
  1003.     -webkit-transition: 0.6s ease;
  1004.     transition: 0.6s ease;
  1005. }
  1006.  
  1007. .posts:hover .photo img {
  1008.     opacity: 1.0;
  1009.     -moz-transition: 0.6s ease;
  1010.     -o-transition: 0.6s ease;
  1011.     -webkit-transition: 0.6s ease;
  1012.     transition: 0.6s ease;
  1013.     {/block:IndexPage}
  1014.     {/block:ifFadedImages}
  1015. }
  1016.  
  1017. {block:ifGrayscaleImages}
  1018. {block:IndexPage}
  1019. .posts .photo img {
  1020.     z-index: -9999999999999999999999999px;
  1021.     -webkit-filter: grayscale(100%);
  1022.     filter: grayscale(100%);
  1023.     filter: gray;
  1024.     /* IE 6-9 */
  1025.     -moz-transition: 0.6s ease;
  1026.     -o-transition: 0.6s ease;
  1027.     -webkit-transition: 0.6s ease;
  1028.     transition: 0.6s ease;
  1029. }
  1030.  
  1031. .posts:hover .photo img {
  1032.     -webkit-filter: none;
  1033.     filter: none;
  1034.     -moz-transition: 0.6s ease;
  1035.     -o-transition: 0.6s ease;
  1036.     -webkit-transition: 0.6s ease;
  1037.     transition: 0.6s ease;
  1038. }
  1039. {/block:IndexPage}
  1040. {/block:ifGrayscaleImages}
  1041.  
  1042. /*----------TEXT/CAPTION CONTAINER----------*/
  1043.  
  1044. .caption {
  1045.     padding: 10px;
  1046.     margin-top: 10px;
  1047.     text-align: {select:text align};
  1048.     background-color: var(--main-posts);
  1049. }
  1050.  
  1051. .ask-caption {
  1052.     padding: 10px;
  1053.     margin-top: 10px;
  1054.     text-align: {select:text align};
  1055.     background-color: var(--main-posts);
  1056. }
  1057.  
  1058. .text .caption {
  1059.     margin-top: 0;
  1060. }
  1061.  
  1062. .text .title, .chatp .title {
  1063.     margin-bottom: 10px;
  1064. }
  1065.  
  1066. .caption a {
  1067.     text-decoration: underline;
  1068. }
  1069.  
  1070. .caption figcaption {
  1071.     padding: 15px;
  1072. }
  1073.  
  1074. figcaption p {
  1075.     margin: 5px 0 0;
  1076. }
  1077.  
  1078. .caption img {
  1079.     max-width: 100%;
  1080. }
  1081.  
  1082. .reblog-list {
  1083.     padding: 0 10px;
  1084. }
  1085.  
  1086. .reblog-header {
  1087.     padding: 20px 15px;
  1088. }
  1089.  
  1090. .reblog-header a {
  1091.     text-decoration: none;
  1092. }
  1093.  
  1094. .reblog-header img {
  1095.     width: 30px;
  1096.     height: 30px;
  1097.     display: inline-block;
  1098.     vertical-align: middle;
  1099.     margin-right: 10px;
  1100.     border-radius: 5px;
  1101. }
  1102.  
  1103. .inactive, .user, .deactivated {
  1104.     font-weight: 700;
  1105.     color: var(--main-links);
  1106.     text-align: center;
  1107. }
  1108.  
  1109. .user:hover {
  1110.     color: var(--link-hover);
  1111. }
  1112.  
  1113. .reblog-content {
  1114.     padding: 0 15px;
  1115. }
  1116.  
  1117. .reblog-content p, .reblog-content h2 {
  1118.     margin: 0 0 10px 0;
  1119. }
  1120.  
  1121. .read_more {
  1122.     position: relative;
  1123.     width: 100%;
  1124.     padding: 3px 10px;
  1125.     font-weight: 700;
  1126.     color: var(--accented-text);
  1127.     background-color: var(--accent);
  1128.     border-radius: 5px;
  1129.     -moz-transition: 0.6s ease;
  1130.     -o-transition: 0.6s ease;
  1131.     -webkit-transition: 0.6s ease;
  1132.     transition: 0.6s ease;
  1133. }
  1134.  
  1135. .caption .read_more {
  1136.     text-decoration: none;
  1137. }
  1138.  
  1139. .read_more:hover {
  1140.     background-color: transparent;
  1141.     color: var(--main-links);
  1142.     -moz-transition: 0.6s ease;
  1143.     -o-transition: 0.6s ease;
  1144.     -webkit-transition: 0.6s ease;
  1145.     transition: 0.6s ease;
  1146. }
  1147.  
  1148. /*----------POST INFO & PERMALINKS----------*/
  1149.  
  1150. .post-bottom {
  1151.    display: flex;
  1152.     padding: 15px 0;
  1153.     justify-content: flex-start;
  1154.     align-items: center;
  1155.     font-weight: 700;
  1156. }
  1157.  
  1158. .post-bottom a {
  1159.     color: var(--permalink);
  1160. }
  1161.  
  1162. .post-bottom a:hover {
  1163.     color: var(--permalink-hover);
  1164. }
  1165.  
  1166. .timestamp {
  1167.     display: flex;
  1168.     align-items: center;
  1169. }
  1170.  
  1171. .date {
  1172.     display: flex;
  1173.     align-items: center;
  1174. }
  1175.  
  1176. .date a {
  1177.     padding: 5px 15px;
  1178.     background-color: var(--main-posts);
  1179.     color: var(--permalink);
  1180.     border-radius: 5px;
  1181.     border: 1px dashed transparent;
  1182. }
  1183.  
  1184. .date a:hover {
  1185.     border: 1px dashed var(--accent);
  1186. }
  1187.  
  1188. /*----------PINNED LABEL----------*/
  1189.  
  1190. .ph-push-pin {
  1191.     color: var(--accented-text);
  1192.     font-size: 18px;
  1193.     -moz-transition: 0.6s ease;
  1194.     -o-transition: 0.6s ease;
  1195.     -webkit-transition: 0.6s ease;
  1196.     transition: 0.6s ease;
  1197. }
  1198.  
  1199. /*----------LIKE/REBLOG----------*/
  1200.  
  1201. .likereblog {
  1202.     text-align: center;
  1203.     z-index: 1;
  1204.     margin-left: 10px;
  1205. }
  1206.  
  1207. .controls {
  1208.     display: flex;
  1209.     align-items: center;
  1210. }
  1211.  
  1212. .controls a {
  1213.     background-color: var(--accent);
  1214.     padding: 5px;
  1215.     border-radius: 5px;
  1216.     position:relative;
  1217.     margin: 0 5px;
  1218.     height: 18px;
  1219.     -moz-transition: 0.6s ease;
  1220.     -o-transition: 0.6s ease;
  1221.     -webkit-transition: 0.6s ease;
  1222.     transition: 0.6s ease;
  1223. }
  1224.  
  1225. .controls a:hover {
  1226.     color: var(--permalink-hover);
  1227.     -moz-transition: 0.6s ease;
  1228.     -o-transition: 0.6s ease;
  1229.     -webkit-transition: 0.6s ease;
  1230.     transition: 0.6s ease;
  1231. }
  1232.  
  1233. .ph-arrows-clockwise {
  1234.     color: var(--accented-text);
  1235.     font-size: 18px;
  1236.     -moz-transition: 0.6s ease;
  1237.     -o-transition: 0.6s ease;
  1238.     -webkit-transition: 0.6s ease;
  1239.     transition: 0.6s ease;
  1240. }
  1241.  
  1242. .ph-heart-straight {
  1243.     color: var(--accented-text);
  1244.     font-size: 18px;
  1245.     -moz-transition: 0.6s ease;
  1246.     -o-transition: 0.6s ease;
  1247.     -webkit-transition: 0.6s ease;
  1248.     transition: 0.6s ease;
  1249. }
  1250.  
  1251. .controls .like .liked + .ph-heart-straight {
  1252.    opacity: 1;
  1253. }
  1254.  
  1255. .controls .like .liked + .ph-heart-straight {
  1256.      color: #df2b2b;
  1257. }
  1258.  
  1259. .controls .like .like_button iframe {
  1260.    position:absolute;
  1261.    top: -1px;
  1262.    left:0;
  1263.    bottom:0;
  1264.    right:0;
  1265.    width:100%;
  1266.    height:100%;
  1267.    z-index:2;
  1268.    opacity:0.000001;
  1269. }
  1270.  
  1271. /*-----------POST TAGS-----------*/
  1272.  
  1273. .tag-button {
  1274.     cursor: pointer;
  1275.     display: flex;
  1276. }
  1277.  
  1278. .ph-hash {
  1279.     font-size: 18px;
  1280.     color: var(--accented-text);
  1281. }
  1282.  
  1283. .post_tags {
  1284.     padding: 15px 0 0;
  1285.     display: none;
  1286. }
  1287.  
  1288. .post_tags a {
  1289.     margin-left: 3px;
  1290.     color: var(--permalink);
  1291.     font-weight: 700;
  1292.     display: inline-block;
  1293.     border-radius: 5px;
  1294.     -moz-transition: 0.6s ease;
  1295.     -o-transition: 0.6s ease;
  1296.     -webkit-transition: 0.6s ease;
  1297.     transition: 0.6s ease;
  1298. }
  1299.  
  1300. .post_tags a:hover {
  1301.     color:var(--permalink-hover);
  1302.     -moz-transition: 0.6s ease;
  1303.     -o-transition: 0.6s ease;
  1304.     -webkit-transition: 0.6s ease;
  1305.     transition: 0.6s ease;
  1306. }
  1307.  
  1308. .ph-hash-straight {
  1309.     color:var(--accent);
  1310.     font-size:18px;
  1311.     vertical-align:middle;
  1312. }
  1313.  
  1314. /*----------PERMALINK PAGE----------*/
  1315.  
  1316. #perma {
  1317.     width: 700px;
  1318.     padding: 20px 30px;
  1319.     margin: 0 auto;
  1320.     background-color: var(--main-posts);
  1321.     box-sizing: border-box;
  1322.     position: relative;
  1323.     display: flex;
  1324.     justify-content: space-between;
  1325.     align-items: center;
  1326. }
  1327.  
  1328. #perma b {
  1329.     color: var(--main-links);
  1330. }
  1331.  
  1332. .perma-date {
  1333.     margin-right: 20px;
  1334. }
  1335.  
  1336. .perma-note {
  1337.     display: block;
  1338. }
  1339.  
  1340. .permatg a {
  1341.     display: inline-block;
  1342.     margin-left: 3px;
  1343.     color: var(--main-links);
  1344. }
  1345.  
  1346. .permatg a:hover {
  1347.     color: var(--link-hover);
  1348. }
  1349.  
  1350. .root img, .via img {
  1351.     display: block;
  1352.     width: 30px;
  1353.     height: 30px;
  1354.     border-radius: 50%;
  1355.     margin: 10px 0;
  1356.     padding: 3px;
  1357.     border: 1px dashed var(--accent);
  1358. }
  1359.  
  1360. #notecontainer {
  1361.     margin: 10px auto;
  1362.     width: 700px;
  1363.     background-color: var(--main-posts);
  1364.     color: var(--main-text);
  1365.     position: relative;
  1366.     padding: 10px;
  1367.     box-sizing: border-box;
  1368. }
  1369.  
  1370. #notecontainer ol.notes {
  1371.     list-style-type: none;
  1372.     margin: 0;
  1373.     padding: 0;
  1374.     font-size: {text:body font}px;
  1375. }
  1376.  
  1377. #notecontainer .notes li, #notecontainer li.note.reblog  {
  1378.     list-style-type:none;
  1379. }
  1380.  
  1381. #notecontainer li.note.like::before {
  1382.     content:'❤';
  1383.     float: right;
  1384.     font-size: 25px;
  1385.     vertical-align: middle;
  1386.     color: var(--permalink-like);
  1387. }
  1388.  
  1389. #notecontainer li.note.reblog:before {
  1390.     content:'⟳';
  1391.     float: right;
  1392.     font-size: 25px;
  1393.     display: inline-block;
  1394.     vertical-align: middle;
  1395.     color: var(--permalink-reblog);
  1396. }
  1397.  
  1398. #notecontainer ol.notes li.note {
  1399.     padding: 15px;
  1400. }
  1401.  
  1402. #notecontainer img.avatar {
  1403.     margin-right: 10px;
  1404.     vertical-align: middle;
  1405.     width: 25px;
  1406.     height: 25px;
  1407.     border-radius: 50%;
  1408. }
  1409.  
  1410. #permpage {
  1411.     text-align: center;
  1412.     margin-top: 50px;
  1413.     justify-content: center;
  1414.     align-items: center;
  1415. }
  1416.  
  1417. .ph-arrow-left, .ph-arrow-right {
  1418.     padding: 5px;
  1419.     font-size: 20px;
  1420.     display: inline-block;
  1421.     height: 20px;
  1422.     border-radius: 5px;
  1423.     margin: 0 10px;
  1424.     background-color: var(--accent);
  1425.     color: var(--accented-text);
  1426.     border: 1px dashed transparent;
  1427.     -webkit-transition: all 0.6s ease;
  1428.     -moz-transition: all 0.6s ease;
  1429.     -o-transition: all 0.6s ease;
  1430.     transition: all 0.6s ease;
  1431. }
  1432.  
  1433. .ph-arrow-left:hover, .ph-arrow-right:hover {
  1434.     background-color: transparent;
  1435.     color: var(--main-links);
  1436.     border: 1px dashed var(--accent);
  1437.     -webkit-transition: all 0.6s ease;
  1438.     -moz-transition: all 0.6s ease;
  1439.     -o-transition: all 0.6s ease;
  1440.     transition: all 0.6s ease;
  1441. }
  1442.  
  1443. /*----------TUMBLR TEXT/LINKS----------*/  
  1444.  
  1445. .posts .title, .posts .link {
  1446.     background-color: var(--main-posts);
  1447.     color: var(--post-title);
  1448.     text-transform: uppercase;
  1449.     padding: 20px;
  1450.     font-size: 1.2em;
  1451.     font-weight: 700;
  1452.     line-height: 200%;
  1453.     text-align: center;
  1454.     -moz-transition: 0.6s ease;
  1455.     -o-transition: 0.6s ease;
  1456.     -webkit-transition: 0.6s ease;
  1457.     transition: 0.6s ease;
  1458. }
  1459.  
  1460. .posts .link a {
  1461.     color: var(--post-title);
  1462. }
  1463.  
  1464. .ph-caret-double-right {
  1465.     color: var(--accent);
  1466. }
  1467.  
  1468. .posts .link a:hover {
  1469.     color: var(--link-hover);
  1470.     -moz-transition: 0.6s ease;
  1471.     -o-transition: 0.6s ease;
  1472.     -webkit-transition: 0.6s ease;
  1473.     transition: 0.6s ease;
  1474. }
  1475.  
  1476. .thumbnail {
  1477.     margin-bottom: 10px;
  1478. }
  1479.  
  1480. .thumbnail img {
  1481.     width: 100%;
  1482.     height: auto;
  1483.     display: block;
  1484. }
  1485.  
  1486. /*----------TUMBLR QUOTES----------*/  
  1487.  
  1488. .qt {
  1489.     padding: 30px;
  1490.     display: flex;
  1491.     flex-direction: row;
  1492.     justify-content: space-between;
  1493.     background-color: var(--main-posts);
  1494. }
  1495.  
  1496. .quote {
  1497.     font-family: 'Lora', serif;
  1498.     font-weight: 500;
  1499.     line-height: 150%;
  1500.     font-size: 1.6em;
  1501.     padding: 20px;
  1502.     color: var(--question);
  1503.     padding-left: 20px;
  1504.     border-left: 1px solid var(--post-borders);
  1505. }
  1506.  
  1507. .ph-quotes {
  1508.     color: var(--accent);
  1509.     padding: 5px;
  1510.     font-size: 1.2em;
  1511.     align-self: center;
  1512.     border-radius: 5px;
  1513. }
  1514.  
  1515. .quote-box {
  1516.     font-size: 20px;
  1517.     align-self: center;
  1518.     color: var(--main-links);
  1519.     margin-right: 20px;
  1520. }
  1521.  
  1522. .qtsource {
  1523.     padding: 25px 30px;
  1524.     background-color: var(--main-posts);
  1525.     margin-top: 10px;
  1526. }
  1527.  
  1528. /*----------TUMBLR AUDIO----------*/
  1529.  
  1530. .audiop {
  1531.     padding: 20px;
  1532.     overflow:hidden;
  1533.     position: relative;
  1534. }
  1535.  
  1536. .album-background-image {
  1537.     position: absolute;
  1538.     overflow: hidden;
  1539.     width: 100%;
  1540.     height: 260px;
  1541.     top: 0;
  1542.     left: 0;
  1543. }
  1544.  
  1545. .audiowrapper {
  1546.     display:flex;
  1547. }
  1548.  
  1549. .album-background {
  1550.     width: 100%;
  1551.     filter: blur(0px)!important;
  1552. }
  1553.  
  1554. .audio-content .audio_player {
  1555.     background-color: var(--audio-player-background);
  1556. }
  1557.  
  1558. .audio-content {
  1559.     width: 90px;
  1560.     padding:10%;
  1561.     position:relative;
  1562.     display: flex;
  1563.     justify-content: center;
  1564.     align-items: center;
  1565. }
  1566.  
  1567. .audio_player {
  1568.     position: absolute;
  1569.     z-index: 2;
  1570.     width: 70px;
  1571.     height: 70px;
  1572.     border-radius: 50%;
  1573. }
  1574.  
  1575. .audio_player > div {
  1576.     display: inline-block;
  1577.     margin: 0 0.5em 0 0;
  1578.     vertical-align: middle;
  1579. }
  1580.  
  1581. .custom_audio_buttons {
  1582.     height: 1.25em;
  1583. }
  1584.  
  1585. .custom_audio_buttons svg {
  1586.     width : 1.70em;
  1587.     height: 1.70em;
  1588.     margin-left: 24px;
  1589.     margin-top: 22px;
  1590.     stroke: var(--main-text);
  1591. }
  1592.  
  1593. .custom_audio_error_icon svg {
  1594.     stroke: red;
  1595. }
  1596.  
  1597. .custom_audio_duration {
  1598.     display: inline;
  1599. }
  1600.  
  1601. .seek-cont {
  1602.     display: flex;
  1603.     justify-content: space-between;
  1604.     align-items: center;
  1605.     margin-top: 20px;
  1606. }
  1607.  
  1608. .seek-cont span {
  1609.     width: 50px;
  1610. }
  1611.  
  1612. .custom_audio_seekbar {
  1613.     height: 0.5em;
  1614.     border: 1px solid var(--main-text);
  1615.     width: 85%;
  1616. }
  1617.  
  1618. .custom_audio_seekbar_progress {
  1619.     width: 0;
  1620.     height: 100%;
  1621.     background: var(--main-links);
  1622. }
  1623.  
  1624. .custom_audio_current_time, .custom_audio_time_left {
  1625.     font-size: 12px;
  1626.     width: 50px;
  1627. }
  1628.  
  1629. .custom_audio_current_time {
  1630.     text-align: left;
  1631. }
  1632.  
  1633. .custom_audio_time_left {
  1634.     text-align: right;
  1635. }
  1636.  
  1637. .audio_info p {
  1638.     margin: 0.25em 0;
  1639. }
  1640.  
  1641. .album-background {
  1642.     position: absolute;
  1643.     top: -40%;
  1644.     left: 0;
  1645.     filter: blur(2px);
  1646. }
  1647.  
  1648. .music_menu {
  1649.     position: relative;
  1650.     margin: 0px;
  1651.     list-style:none;
  1652.     padding: 5%;
  1653.     width: 70%;
  1654.     align-self: center;
  1655.     font-size:18px;
  1656.     font-weight: 700;
  1657.     background-color: var(--audio-background);
  1658.     color: var(--main-links);
  1659. }
  1660.  
  1661. .music_menu  p {
  1662.     margin: 5px 0;
  1663. }
  1664.  
  1665. .music_menu  p:nth-child(2) {
  1666.     font-weight: 400;
  1667.     font-size: 15px;
  1668.     margin-top: 10px;
  1669. }
  1670.  
  1671. /*----------TUMBLR QUESTION/ANSWER----------*/
  1672.  
  1673. #askcont {
  1674.     padding: 20px;
  1675.     background-color: var(--question-background);
  1676.     margin-bottom: 10px;
  1677. }
  1678.  
  1679. #replycont {
  1680.     padding: 20px;
  1681.     background-color: var(--question-background);
  1682. }
  1683.  
  1684. .asker-cont, .replier-cont {
  1685.     display: flex;
  1686.     align-items: center;
  1687. }
  1688.  
  1689. #asker {
  1690.     padding: 20px 10px 0;
  1691. }
  1692.  
  1693. #asker-image, #replier-image {
  1694.     width: 50px;
  1695.     height: 50px;
  1696. }
  1697.  
  1698. #asker-image, #replier-image  {
  1699.     margin-right: 10px;
  1700. }
  1701.  
  1702. #asker-image img, #replier-image img {
  1703.     border-radius: 50%;
  1704.     padding: 5px;
  1705.     border: 3px solid var(--accent);
  1706.     box-sizing: border-box;
  1707. }
  1708.  
  1709. .asker-link, .replier-link {
  1710.     font-weight: 700;
  1711. }
  1712.  
  1713. .question p {
  1714.     margin: 0;
  1715. }
  1716.  
  1717. #asker, #replier {
  1718.     padding: 20px 0 0;
  1719.     box-sizing: border-box;
  1720.     display: block;
  1721.     width: 100%;
  1722. }
  1723.  
  1724. .answer {
  1725.     margin-top: 10px;
  1726. }
  1727.  
  1728. .answer a {
  1729.     text-decoration: underline;
  1730. }
  1731.  
  1732. .answer p {
  1733.     margin: 0;
  1734. }
  1735.  
  1736. /*----------TUMBLR CHAT----------*/
  1737.  
  1738. .chat .line {
  1739.     margin-top: 0px;
  1740.     padding: 15px 20px;
  1741.     background-color: var(--main-posts);
  1742.     margin-bottom: 10px;
  1743. }
  1744.  
  1745. .chat .line:nth-child(2n)  {
  1746.     background-color: var(--accent);
  1747.     color: var(--accented-text);
  1748. }
  1749.  
  1750. .chat .line:last-of-type {
  1751.     margin-bottom: 0px;
  1752. }
  1753.  
  1754. .line:nth-child(odd) .label b {
  1755.     color: var(--chat-odd);
  1756.     font-weight: 700;
  1757.     display: block;
  1758.     margin-bottom: 5px;
  1759. }
  1760.  
  1761. .line:nth-child(even) .label b {
  1762.     color: var(--chat-even);
  1763.     font-weight: 700;
  1764.     display: block;
  1765.     margin-bottom: 5px;
  1766. }
  1767.  
  1768. /*----------HEADER----------*/
  1769.  
  1770. #header {
  1771.     height: 100vh;
  1772.     position: relative;
  1773.     display: flex;
  1774.     justify-content: center;
  1775.     align-items: center;
  1776.     top: 0;
  1777.     left: 0;
  1778.     right: 0;
  1779.     {block:PermalinkPage}
  1780.     display: none;
  1781.     {/block:PermalinkPage}
  1782.     {block:ifnotheader}
  1783.     display: none;
  1784.     {/block:ifnotheader}
  1785.     {block:TagPage}
  1786.     display: none;
  1787.     {/block:TagPage}
  1788. }
  1789.  
  1790. #header-content {
  1791.     width: 650px;
  1792.     position: absolute;
  1793.     bottom: 0px;
  1794.     top: 0;
  1795.     height: calc(100% - 123px);
  1796.     padding: 60px;
  1797.     text-align: center;
  1798.     /* From https://css.glass */
  1799.     background-color: var(--header-content-background);
  1800.     box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  1801.     backdrop-filter: blur(10px);
  1802.     -webkit-backdrop-filter: blur(10px);
  1803.     border: 1px solid var(--header-content-border);
  1804.     border-top: none;
  1805.     border-bottom: none;
  1806.     display: flex;
  1807.     flex-wrap: wrap;
  1808.     flex-direction: column;
  1809.     justify-content: center;
  1810. }
  1811.  
  1812. #header-content .description {
  1813.     text-align: {select:description text align};
  1814.     padding: 0 20px;
  1815.     margin-top: -5px;
  1816.     color: var(--description);
  1817. }
  1818.  
  1819. #header-content .description a {
  1820.     color: var(--header-content);
  1821.     text-decoration: underline;
  1822. }
  1823.  
  1824. #header-content .blog-title {
  1825.     font-family: 'Lora', serif;
  1826.     font-weight: 500;
  1827.     border-bottom: 1px solid var(--header-content);
  1828.     padding: 20px 10px;
  1829.     color: var(--header-content);
  1830.     font-size: 1.8em;
  1831.     text-transform: uppercase;
  1832. }
  1833.  
  1834. #responsive-header {display: none;}
  1835.  
  1836. /*----------LINKBAR---------*/
  1837.  
  1838. #linkbar {
  1839.     height: 70px;
  1840.     position: fixed;
  1841.     top: 0;
  1842.     left: 0;
  1843.     right: 0;
  1844.     background-color: var(--linkbar);
  1845.     z-index: 5;
  1846.     display: flex;
  1847.     justify-content: space-between;
  1848.     align-items: center;
  1849.     padding: 0;
  1850. }
  1851.  
  1852. /*----------DAY/NIGHT MODE---------*/
  1853.  
  1854. button#theme-toggle {
  1855.     outline: none;
  1856.     border: 0;
  1857.     background: transparent;
  1858.     padding: 0;
  1859.     cursor: pointer;
  1860. }
  1861.  
  1862. button#theme-toggle i, .controls-button i {
  1863.     font-size: 25px;
  1864.     background-color: var(--accent);
  1865.     color: var(--accented-text);
  1866.     padding: 23px;
  1867.     margin-top: -1px;
  1868. }
  1869.  
  1870. .toggle-header {
  1871.     display: flex;
  1872. }
  1873.  
  1874. .light-on{
  1875.     display: var(--LightOn);
  1876. }
  1877.  
  1878. .light-off{
  1879.     display: var(--LightOff);
  1880. }
  1881.  
  1882. /*----------CAROUSEL LINKS---------*/
  1883.  
  1884. .label_ask, .label_blog, .label_about, .label_navigation, .homelinks a {
  1885.     margin: 0 10px;
  1886.     font-weight: 700;
  1887.     color: var(--linkbar-links);
  1888.     padding: 5px 2px;
  1889.     border-bottom: 2px solid transparent;
  1890.     -moz-transition: 0.6s ease;
  1891.     -o-transition: 0.6s ease;
  1892.     -webkit-transition: 0.6s ease;
  1893.     transition: 0.6s ease;
  1894. }
  1895.  
  1896. .label_ask:hover, .label_blog:hover, .label_about:hover, .label_navigation:hover, .homelinks a:hover {
  1897.     cursor: pointer;
  1898.     color: var(--linkbar-links-hover);
  1899.     padding: 5px 2px;
  1900.     border-bottom: 2px solid transparent;
  1901.     -moz-transition: 0.6s ease;
  1902.     -o-transition: 0.6s ease;
  1903.     -webkit-transition: 0.6s ease;
  1904.     transition: 0.6s ease;
  1905. }
  1906.  
  1907. #button_a:checked ~ #all #linkbar .homelinks .label_blog,
  1908. #button_b:checked ~ #all #linkbar .homelinks .label_ask,
  1909. #button_c:checked ~ #all #linkbar .homelinks .label_about,
  1910. #button_d:checked ~ #all #linkbar .homelinks .label_navigation {
  1911.      cursor: default;
  1912.      border-bottom: 2px solid var(--accent);
  1913. }
  1914.  
  1915. #button_a:checked ~ #all #carousel .blog-wrapper {
  1916.     -webkit-transform: translateY(0);
  1917.     transform: translateY(0);
  1918. }
  1919.  
  1920. #button_b:checked ~ #all #carousel .blog-wrapper {
  1921.     -webkit-transform: translateY(-100%);
  1922.     transform: translateY(-100%);
  1923. }
  1924.  
  1925. #button_c:checked ~ #all #carousel .blog-wrapper {
  1926.     -webkit-transform: translateY(-200%);
  1927.     transform: translateY(-200%);
  1928. }
  1929.  
  1930. #button_d:checked ~ #all #carousel .blog-wrapper {
  1931.     -webkit-transform: translateY(-300%);
  1932.     transform: translateY(-300%);
  1933. }
  1934.  
  1935. /*----------NPF STYLING (DO NOT TOUCH)----------*/
  1936.  
  1937. .npf_inst > *:last-child {
  1938.     margin-bottom: 0;
  1939. }
  1940.  
  1941. .npf_inst, #npf_a0rsv {
  1942.     margin-bottom: 20px;
  1943. }
  1944.  
  1945. .npf_inst.photo-origin, #npf_wmw57 {
  1946.     padding-top: 10px;
  1947. }
  1948.  
  1949. .soundcloud_audio_player {
  1950.     max-height:116px!important;
  1951. }
  1952.  
  1953. .spotify_audio_player {
  1954.     max-height:80px!important;
  1955. }
  1956.  
  1957. figure.tmblr-embed.tmblr-full iframe {max-width: 100%;}
  1958.  
  1959. div.npf-link-block .title {
  1960.     font-size: 16px;
  1961.     text-align: left;
  1962. }
  1963.  
  1964. .answer .npf_inst, #npf_a0rsv {
  1965.     margin-bottom: 0;
  1966. }
  1967.  
  1968. p.npf_chat {  
  1969.     border-bottom: 1px solid var(--post-borders);
  1970.     padding: 20px 0;
  1971.     margin-top: 0;
  1972.     margin-bottom: 5px;
  1973. }
  1974.  
  1975. p.npf_chat:first-of-type {
  1976.     padding-top: 0;
  1977. }
  1978.  
  1979. p.npf_chat:last-of-type {
  1980.     margin-bottom: 0px;
  1981.     border-bottom: none;
  1982. }
  1983.  
  1984. p.npf_chat b {    
  1985.     display: block;
  1986.     padding-bottom: 10px;
  1987.     color: var(--main-links);
  1988. }
  1989.  
  1990. /*----------THEME CREDIT/DO NOT REMOVE!!!---------*/
  1991.  
  1992. #bottom, #cred-bottom {
  1993.     position: fixed;
  1994.     bottom: 115px;
  1995.     right: 30px;
  1996.     z-index: 10;
  1997.     display: flex;
  1998.     flex-direction: column;
  1999. }
  2000.  
  2001. #bottom a:hover {
  2002.     color: var(--accented-text);
  2003. }
  2004.  
  2005. .ph-arrow-circle-up, .ph-copyright {
  2006.     padding: 3px;
  2007.     font-size: 22px;
  2008.     background-color: var(--accent);
  2009.     color: var(--accented-text);
  2010.     border-radius: 5px;
  2011.     margin: 3px 0;
  2012. }
  2013.  
  2014. #cred-bottom {
  2015.     bottom: 8px;
  2016. }
  2017.  
  2018. /*----------RESPONSIVE DESIGN (DO NOT TOUCH)---------*/
  2019.  
  2020. @media screen and (max-width: 1375px) {
  2021.    
  2022.     .tmblr-iframe--app-cta-button {
  2023.         display: none!important;
  2024.     }
  2025.    
  2026.     #content {
  2027.         width: var(--post-size);
  2028.         {block:iftwocolumns}
  2029.         width: calc((var(--post-size) * 2) + 60px);
  2030.         {/block:iftwocolumns}
  2031.         {block:ifthreecolumns}
  2032.         width: calc((var(--post-size) * 2) + 60px);
  2033.         {/block:ifthreecolumns}
  2034.         {block:PermalinkPage}
  2035.         margin: 80px auto 60px;
  2036.         width: 700px;
  2037.         {/block:PermalinkPage}
  2038.     }
  2039.    
  2040.     .posts {
  2041.         width: var(--post-size);
  2042.         {block:PermalinkPage}
  2043.         width: 700px;
  2044.         {/block:PermalinkPage}
  2045.     }
  2046.    
  2047.     #pagination {
  2048.         margin: 0 auto;
  2049.     }
  2050.    
  2051. }
  2052.  
  2053. @media screen and (max-width: 960px) {
  2054.    
  2055.     .wrap {
  2056.         width: 100%;
  2057.         margin-top: 20px;
  2058.         {block:PermalinkPage}
  2059.         margin-top: 100px;
  2060.         {/block:PermalinkPage}
  2061.     }
  2062.    
  2063.     .blog-label {
  2064.         width: 100%;
  2065.         position: relative;
  2066.         margin: 40px auto -5px;
  2067.     }
  2068.    
  2069.     #content {
  2070.         width: 90%;
  2071.         margin-top: 40px;
  2072.     }
  2073.    
  2074.     #about-container, #faq-container, #navi-container {
  2075.         width: 90%;
  2076.     }
  2077.    
  2078.     .posts {
  2079.         width: 100%;
  2080.         margin-bottom: 100px;
  2081.     }
  2082.    
  2083.      #pagination {
  2084.         margin: 0;
  2085.         width: 100%;
  2086.         box-sizing: border-box;
  2087.     }
  2088.    
  2089.     #notecontainer, #perma {
  2090.         width: 100%;
  2091.     }
  2092.    
  2093.     #header {
  2094.         display: none;
  2095.     }
  2096.    
  2097.     #responsive-header {
  2098.         display: block;
  2099.         width: 90%;
  2100.         background-color: var(--main-posts);
  2101.         padding: 40px;
  2102.         box-sizing: border-box;
  2103.         position: relative;
  2104.         margin: 30px auto 0;
  2105.     }
  2106.    
  2107.     .responsive-blogtitle {
  2108.         font-size: 1.3em;
  2109.         font-family: 'Lora', serif;
  2110.         font-weight: 500;
  2111.         text-transform: uppercase;
  2112.         padding-bottom: 20px;
  2113.         border-bottom: 1px solid var(--post-borders);
  2114.     }
  2115.    
  2116.     .responsive-blogtitle img {
  2117.         width: 45px;
  2118.         height: 45px;
  2119.         margin-right: 15px;
  2120.         vertical-align: middle;
  2121.         border-radius: 50%;
  2122.         padding: 5px;
  2123.         border: 2px solid var(--accent);
  2124.     }
  2125.    
  2126.     .responsive-description {
  2127.         margin-top: 20px;
  2128.         color: var(--description);
  2129.     }
  2130.    
  2131.     .responsive-description a {
  2132.         text-decoration: underline;
  2133.     }
  2134.    
  2135.     .about-description li, .social-links a {
  2136.         display: block;
  2137.         margin-bottom: 10px;
  2138.     }
  2139.    
  2140.     .social-links a:last-of-type {
  2141.         margin-bottom: 0;
  2142.     }
  2143.    
  2144. }
  2145.  
  2146. {CustomCSS}
  2147. </style>
  2148.  
  2149. <script>
  2150. $(document).ready(function(){
  2151.    
  2152.     //Click to show/hide tags
  2153.     $('.post_tags').hide();
  2154.     $('.tag-button').click(function() {
  2155.         $(this).closest('.posts').find('.post_tags').slideToggle(600);
  2156.         return false;
  2157.     });
  2158.    
  2159.     //click to show/hide tumblr controls
  2160.     $('.controls-button').click(function(){
  2161.        $('body').toggleClass('controls-click');
  2162.     });
  2163.    
  2164.     //Scroll To Top Script
  2165.     $(function(){$window=$(window);
  2166.         $link=$("#scrollToTop");
  2167.         $link.click(function(){
  2168.             $(".cage-1").animate({scrollTop:0},"slow")
  2169.         });
  2170.     });
  2171.    
  2172. });
  2173.  
  2174. </script>
  2175.  
  2176. </head>
  2177.  
  2178. <body>
  2179.  
  2180. <!-----------CAROUSEL INPUTS (DO NOT TOUCH)----------->
  2181. <input hidden type="radio" name="carousel-control" id="button_a" checked/>
  2182. <input hidden type="radio" name="carousel-control" id="button_b" />
  2183. <input hidden type="radio" name="carousel-control" id="button_c" />
  2184. <input hidden type="radio" name="carousel-control" id="button_d" />
  2185. <!-----------CAROUSEL INPUTS (DO NOT TOUCH)----------->
  2186.  
  2187. <div id="all"> <!-----------BLOG CONTAINER----------->
  2188.  
  2189. <footer id="cred-bottom">
  2190. <!-------------------DO NOT REMOVE THEME CREDIT!!!------------------->
  2191.  <a href="https://sheathemes.tumblr.com" target="_blank" title="theme by sheathemes"><i class="ph-copyright"></i></a>  
  2192. <!-------------------DO NOT REMOVE THEME CREDIT!!!------------------->
  2193. </footer>
  2194.    
  2195. <header id="linkbar"> <!-----------LINK BAR----------->
  2196.     <div class="toggle-header">
  2197.         <button id="theme-toggle" aria-label="toggle dark or light mode" type="button">
  2198.         <span class="light-on"><a class="night-time" title="toggle dark mode"><i class="ph-moon"></i></a></span>
  2199.         <span class="light-off"><a class="day-time" title="toggle light mode"><i class="ph-sun"></i></a></span>
  2200.         </button>
  2201.     </div>
  2202.    
  2203.      <nav class="homelinks"> <!-----------TUMBLR LINKS----------->
  2204.         <a href="/">Home</a>  
  2205.         <label for="button_a" class="label_blog"> <span>Blog</span> </label>
  2206.         <label for="button_b" class="label_ask"> <span>Contact</span> </label>
  2207.         <label for="button_c" class="label_about"> <span>About</span> </label>
  2208.         <label for="button_d" class="label_navigation"> <span>Navigation</span> </label>
  2209.         <a href="/archive">Archive</a>  
  2210.         {block:SubmissionsEnabled}  
  2211.         <a href="/submit">Submit</a>
  2212.         {/block:SubmissionsEnabled}
  2213.     </nav> <!-----------TUMBLR LINKS----------->
  2214.        
  2215.     <a class="controls-button" title="toggle tumblr controls"><i class="ph-gear"></i></a>
  2216. </header> <!-----------LINK BAR----------->
  2217.  
  2218. <div id="carousel"><!-----------CAROUSEL CONTAINER----------->
  2219.  
  2220. <div class="blog-wrapper"> <!-----------CAROUSEL WRAPPER----------->
  2221.  
  2222. <div class="cage-1"> <!-----------BLOG CONTAINER----------->
  2223.  
  2224. <footer id="bottom">
  2225. <!-----------SCROLL TO TOP ----------->
  2226. <a class="scroll-top" id="scrollToTop" rel="nofollow" title="scroll to top"><i class="ph-arrow-circle-up"></i></a>
  2227. <!-----------SCROLL TO TOP ----------->
  2228. </footer>
  2229.  
  2230. <header id="header"> <!-----------HEADER----------->
  2231.     <div class="header-image"><img src="{image:header}" alt="header"></div>
  2232.         <section id="header-content">
  2233.             <h2 class="blog-title">{Title}</h2>
  2234.             <div class="description">{Description}</div>
  2235.         </section>
  2236. </header> <!-----------HEADER----------->
  2237.  
  2238. <section class="wrap"> <!-----------POST CONTAINER----------->
  2239.  
  2240. {block:IndexPage}
  2241. <!-----------RESPONSIVE HEADER----------->
  2242. <header id="responsive-header">
  2243. <div class="responsive-blogtitle"><img src="{PortraitURL-64}">{title}</div>
  2244. <div class="responsive-description">{Description}</div>
  2245. </header>
  2246. <div class="blog-label"><h2>Blog Posts</h2></div>
  2247. <!-----------RESPONSIVE HEADER----------->
  2248. {/block:IndexPage}
  2249.  
  2250. <section id="content"> <!-----------POST WRAPPER----------->
  2251.  
  2252. <!-----------POSTS----------->
  2253. {block:posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
  2254. <article class="posts" id="{PostID}" post-type="{PostType}"> <!-----------POSTS----------->
  2255.  
  2256. {block:ContentSource}
  2257. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  2258. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  2259. {/block:SourceLogo}
  2260. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  2261. {/block:ContentSource}
  2262.  
  2263. <!-- {block:NoRebloggedFrom}
  2264. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  2265. {/block:NoRebloggedFrom} -->
  2266.  
  2267. {block:Text}
  2268. <div class="text">
  2269. {block:Title}<div class="title">{Title}</div>{/block:Title}
  2270. <div class="caption">{block:NotReblog} <figcaption> {Body} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">
  2271.  
  2272. {block:Reblogs}
  2273. <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}">
  2274. <div class="source-head">
  2275. <div class="reblog-header">
  2276.  
  2277. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  2278.  
  2279. {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}
  2280.  
  2281. {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>
  2282. {block:IndexPage}
  2283. <div class="post-cover"></div>
  2284. {/block:IndexPage}
  2285. </div>
  2286. {/block:Text}
  2287.  
  2288. {block:Photo}
  2289. <div class="photo">
  2290. {LinkOpenTag}
  2291. <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">
  2292. <center><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"></center>
  2293. </a>
  2294. {LinkCloseTag}
  2295. </div>
  2296. {block:IfShowCaptions}
  2297. {block:Caption} <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">
  2298.  
  2299. {block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  2300.  
  2301. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  2302.  
  2303. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  2304.  
  2305. {block:IsActive} <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  2306.  
  2307. {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}
  2308. {/block:IfShowCaptions}
  2309.  
  2310. {block:IfnotShowCaptions}
  2311. {block:PermalinkPage}
  2312. {block:Caption} <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">
  2313.  
  2314. {block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  2315.  
  2316. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  2317.  
  2318. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  2319.  
  2320. {block:IsActive} <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  2321.  
  2322. {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}
  2323. {/block:PermalinkPage}
  2324. {/block:IfnotShowCaptions}
  2325. {/block:Photo}
  2326.  
  2327. {block:Photoset}
  2328. <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>
  2329. {block:IfShowCaptions}
  2330. {block:Caption}
  2331. <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom}
  2332. <div class="reblog-list">
  2333.  
  2334. {block:Reblogs}
  2335. <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  2336. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  2337.  
  2338. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  2339.  
  2340. {block:IsActive}
  2341. <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  2342.  
  2343. {block:IsDeactivated}
  2344. <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated}
  2345. </div>
  2346. <div class="reblog-content"> {Body}</div></div> {/block:Reblogs} </div>
  2347. {/block:RebloggedFrom} </div>
  2348. {/block:Caption}
  2349. {/block:IfShowCaptions}
  2350.  
  2351. {block:IfnotShowCaptions}
  2352. {block:PermalinkPage}
  2353. {block:Caption}
  2354. <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom}
  2355. <div class="reblog-list">
  2356.  
  2357. {block:Reblogs}
  2358. <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  2359. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  2360.  
  2361. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  2362.  
  2363. {block:IsActive}
  2364. <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  2365.  
  2366. {block:IsDeactivated}
  2367. <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated}
  2368. </div>
  2369. <div class="reblog-content"> {Body}</div></div> {/block:Reblogs} </div>
  2370. {/block:RebloggedFrom} </div>
  2371. {/block:Caption}
  2372. {/block:PermalinkPage}
  2373. {/block:IfnotShowCaptions}
  2374. {/block:Photoset}
  2375.  
  2376. {block:Quote}
  2377. <div class="qt">
  2378. <div class="quote-box"><i class="ph-quotes"></i></div>
  2379. <div class="quote">
  2380. {Quote}
  2381. </div>
  2382. </div>
  2383. {block:Source}<div class="qtsource"><center>{Source}</center></div>{/block:Source}
  2384. {/block:Quote}
  2385.  
  2386. {block:Link}
  2387. {block:Thumbnail}
  2388. <div class="thumbnail"><img src="{Thumbnail-HighRes}" alt="{Name}"></div>
  2389. {/block:Thumbnail}
  2390.  
  2391. <div class="link"><a href="{URL}">{Name} <i class="ph-caret-double-right" style="vertical-align: middle;"></i></a> </div>
  2392. {block:Description}
  2393. <div class="caption">{block:NotReblog} <figcaption> {Description} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">
  2394.  
  2395. {block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  2396.  
  2397. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  2398.  
  2399. {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}
  2400.  
  2401. {block:IsDeactivated} <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated} </div> <div class="reblog-content"> {Body} </div> </div> {/block:Reblogs} </div> {/block:RebloggedFrom} </div>
  2402. {/block:Description}
  2403. {/block:Link}
  2404.  
  2405. {block:Audio}
  2406. <div class="audiop">
  2407. <div class="album-background-image">
  2408. {block:AlbumArt}<img src="{AlbumArtURL}" class="album-background">{/block:AlbumArt}
  2409. </div>
  2410. <div class="audiowrapper">
  2411. {block:AudioPlayer}
  2412. {AudioPlayer}
  2413. <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;">
  2414.    <div class="audio_player">
  2415.     <span class="custom_audio_buttons"></span>
  2416. </div>
  2417. </div>
  2418. <div class="music_menu">
  2419. {block:TrackName}<p><span class="info">{TrackName}</span></p>{/block:TrackName}
  2420. {block:Artist}<p><span class="info">{Artist}</span></p>{/block:Artist}
  2421.  
  2422. <div class="seek-cont">
  2423.     <span class="custom_audio_current_time"></span>
  2424.     <div class="custom_audio_seekbar"></div>
  2425.     <span class="custom_audio_time_left"></span>
  2426.     </div>
  2427. </div>
  2428. {/block:AudioPlayer}
  2429. </div>
  2430. </div>
  2431.  
  2432. {block:IfShowCaptions}
  2433. {block:Caption} <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">
  2434.  
  2435. {block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  2436.  
  2437. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  2438.  
  2439. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  2440.  
  2441. {block:IsActive} <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  2442.  
  2443. {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}
  2444. {/block:IfShowCaptions}
  2445.  
  2446. {block:IfnotShowCaptions}
  2447. {block:PermalinkPage}
  2448. {block:Caption} <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">
  2449.  
  2450. {block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  2451.  
  2452. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  2453.  
  2454. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  2455.  
  2456. {block:IsActive} <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  2457.  
  2458. {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}
  2459. {/block:PermalinkPage}
  2460. {/block:IfnotShowCaptions}
  2461. {/block:Audio}
  2462.  
  2463. {block:Video}
  2464. <div class="video">{Video-500}</div>
  2465. {block:IfShowCaptions}
  2466. {block:Caption} <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">
  2467.  
  2468. {block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  2469.  
  2470. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  2471.  
  2472. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  2473.  
  2474. {block:IsActive} <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  2475.  
  2476. {block:IsDeactivated} <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated}
  2477.  
  2478. </div> <div class="reblog-content"> {Body} </div> </div> {/block:Reblogs} </div> {/block:RebloggedFrom} </div> {/block:Caption}
  2479. {/block:IfShowCaptions}
  2480.  
  2481. {block:IfnotShowCaptions}
  2482. {block:PermalinkPage}
  2483. {block:Caption} <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">
  2484.  
  2485. {block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  2486.  
  2487. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  2488.  
  2489. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  2490.  
  2491. {block:IsActive} <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  2492.  
  2493. {block:IsDeactivated} <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated}
  2494.  
  2495. </div> <div class="reblog-content"> {Body} </div> </div> {/block:Reblogs} </div> {/block:RebloggedFrom} </div> {/block:Caption}
  2496. {/block:PermalinkPage}
  2497. {/block:IfnotShowCaptions}
  2498. {/block:Video}
  2499.  
  2500. {block:Chat}
  2501. <div class="chatp">
  2502. {block:Title}<div class="title">{Title}</div>{/block:Title}
  2503. <div class="chat">{block:Lines}<div class="line">{block:Label}<span class="label"><b>{Label}</b></span>{/block:Label}
  2504. {Line}</div>{/block:Lines}</div>
  2505. </div>
  2506. {/block:Chat}
  2507.  
  2508. {block:Answer}
  2509. <div id="askcont">
  2510. <div class="asker-cont">
  2511. <div id="asker-image"><img src="{AskerPortraitURL-128}"></div>
  2512. <div class="asker-link">{Asker} asked</div>
  2513. </div>
  2514. <div id="asker">
  2515. <div class="question">{Question}</div>
  2516. </div>
  2517. </div>
  2518.  
  2519. {block:Answerer}
  2520. <div id="replycont">
  2521. <div class="replier-cont">
  2522. <div id="replier-image"><img src="{AnswererPortraitURL-128}"></div>
  2523. <div class="replier-link">{Answerer} replied</div>
  2524. </div>
  2525. <div id="replier">
  2526. <div class="answer">{Answer}</div>
  2527. </div>
  2528. </div>
  2529. {/block:Answerer}
  2530.  
  2531. {block:NotReblog}  
  2532. <div class="caption"><figcaption>{Answer}</figcaption></div>
  2533. {/block:NotReblog}
  2534. {block:RebloggedFrom}
  2535. {block:Reblogs}
  2536. <div class="ask-caption">
  2537. <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  2538. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  2539.  
  2540. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  2541.  
  2542. {block:IsActive} <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  2543.  
  2544. {block:IsDeactivated} <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated}</div>
  2545.  
  2546. <div class="reblog-content">{Body}</div></div>
  2547. </div>
  2548. {/block:Reblogs}
  2549. {/block:RebloggedFrom}
  2550. {/block:Answer}
  2551.  
  2552. {block:IndexPage}
  2553. {block:HasTags} <!-----------POST TAGS----------->
  2554. <div class="post_tags">
  2555. {block:Tags}
  2556. <a href="{TagURL}"><i class="ph-hash-straight"></i> {Tag}</a>
  2557. {/block:Tags}</div>
  2558. {/block:HasTags} <!-----------POST TAGS----------->
  2559.  
  2560. <div class="post-bottom"> <!-----------POST INFO/PERMALINKS----------->
  2561.     {block:Date}
  2562.     <div class="date">
  2563.         <a class="timestamp" href="{Permalink}" {block:NoteCount}title="{NoteCountWithLabel}"{/block:NoteCount}>{Timestamp}</a>
  2564.     </div>
  2565.     {/block:Date}
  2566. <div class="likereblog">
  2567. <div class="controls">
  2568. {block:PinnedPostLabel} <!-----------PINNED POST----------->
  2569. <a href="{Permalink}" title="{PinnedPostLabel}"><i class="ph-push-pin"></i></a>
  2570. {/block:PinnedPostLabel} <!-----------PINNED POST----------->
  2571. <a href="{ReblogURL}" target="_blank" title="reblog this post" class="reblog"><i class="ph-arrows-clockwise"></i></a>
  2572. <a title="like this post" class="like">{LikeButton size="15"}
  2573. <i class="ph-heart-straight"></i></a>
  2574. {block:HasTags}
  2575. <a class="tag-button" title="click for tags"><i class="ph-hash"></i></a>
  2576. {/block:HasTags}
  2577. </div>
  2578. </div>
  2579. </div> <!-----------POST INFO/PERMALINKS----------->
  2580. {/block:IndexPage}
  2581.  
  2582. </article> <!-----------POSTS----------->
  2583.  
  2584. <!-----------PERMALINK PAGE----------->
  2585. {block:PermalinkPage}
  2586. {block:Date}
  2587. <div id="perma">
  2588. <div class="perma-date">
  2589. <b>Posted:</b> {ShortMonth} {DayOfMonthWithZero}, {Year} @ {12Hour} {AmPm} {DayOfWeek}
  2590. <span class="perma-note">
  2591. {block:NoteCount}<b>Note count:</b> {NoteCountWithLabel}{/block:NoteCount}
  2592. </span>
  2593.  
  2594. {block:HasTags}
  2595. <span class="permatg">
  2596. <b>Tags:</b>
  2597. {block:Tags} <a href="{TagURL}" title="Tagged as">#{Tag}</a> {/block:Tags}
  2598. </span>
  2599. {/block:HasTags}
  2600. </div>
  2601.  
  2602. {block:RebloggedFrom}
  2603. <div class="rb">
  2604. <a class="via" href="{ReblogParentURL}" title="{ReblogParentName}"><img src="{ReblogParentPortraitURL-96}"></a>
  2605. <a class="root" href="{ReblogRootURL}" title="{ReblogRootName}"><img src="{ReblogRootPortraitURL-96}"></a>
  2606. </div>
  2607. {/block:RebloggedFrom}
  2608.  
  2609. </div>
  2610.  
  2611. {block:PostNotes}
  2612. <div id="notecontainer">{PostNotes}</div>
  2613. {/block:PostNotes}
  2614.  
  2615. {block:PermalinkPagination}
  2616. <div id="permpage">
  2617.     {block:NextPost}
  2618.         <a href="{NextPost}" title="Previous Post"><i class="ph-arrow-left"></i></a>
  2619.     {/block:NextPost}
  2620.    
  2621.     {block:PreviousPost}
  2622.         <a href="{PreviousPost}" title="Next Post"><i class="ph-arrow-right"></i></a>
  2623.     {/block:PreviousPost}
  2624. </div>
  2625. {/block:PermalinkPagination}
  2626. {/block:Date}
  2627. {/block:PermalinkPage}
  2628. <!-----------PERMALINK PAGE----------->
  2629. {/block:Posts}
  2630.  
  2631. </section><!------------------POSTS WRAPPER----------------------->
  2632.  
  2633. {block:IndexPage}
  2634. {block:Pagination}
  2635. <footer id="pagination"> <!-----------PAGINATION----------->
  2636. {block:PreviousPage}
  2637. <a href="{PreviousPage}"><i class="ph-caret-left-bold"></i></a>
  2638. {/block:PreviousPage}
  2639. page {CurrentPage} / {TotalPages}
  2640. {block:NextPage}
  2641. <a href="{NextPage}"><i class="ph-caret-right-bold"></i></a>
  2642. {/block:NextPage}
  2643. </footer> <!-----------PAGINATION----------->
  2644. {/block:Pagination}
  2645. {/block:IndexPage}
  2646.  
  2647. </section>  <!--------- POSTS CONTAINER ----------->
  2648. </div> <!-----------BLOG CONTAINER----------->
  2649.  
  2650. <div class="cage-2"> <!---------FAQ CONTAINER START----------->
  2651.     <div id="faq-container">
  2652.         <div class="faq-content">
  2653.             <div class="faq-title"><h2>Frequency Asked Questions</h2></div>
  2654.            
  2655.             <!---------
  2656.            If you would like to add another FAQ question/answer to this page please copy the code below and paste it directly below the [-----FAQ BLOCK-----] and directly above the [-----ASK BLOCK----].
  2657.            
  2658. -------------------------------------------------------------
  2659.            
  2660.            <div class="faq-description">
  2661.                <div class="faq-question">
  2662.                
  2663.                Write your question here
  2664.  
  2665.                </div>
  2666.                <div class="faq-answer">
  2667.  
  2668.                write your answer here
  2669.  
  2670.                </div>
  2671.            </div>
  2672.  
  2673. -------------------------------------------------------------
  2674.            
  2675.             ----------->
  2676.            
  2677.             <!--------- FAQ BLOCK ----------->
  2678.             <div class="faq-description">
  2679.                 <div class="faq-question">
  2680.                 <!---------Write your question below----------->
  2681.                 Lorem ipsum dolor sit amet, consectetur adipiscing elit?
  2682.                 <!---------Write your question above----------->
  2683.                 </div>
  2684.                 <div class="faq-answer">
  2685.                 <!---------Write your answer below----------->
  2686.                 Phasellus ultricies a diam eget eleifend. Praesent tristique tempor nisi non hendrerit. Maecenas sit amet metus mi. Curabitur sit amet pretium massa. Aliquam ultricies metus quam, et vulputate nisi eleifend non.
  2687.                 <!---------Write your answer above----------->
  2688.                 </div>
  2689.             </div>
  2690.             <!--------- FAQ BLOCK ----------->
  2691.            
  2692.             <!--------- FAQ BLOCK ----------->
  2693.             <div class="faq-description">
  2694.                 <div class="faq-question">
  2695.                 <!---------Write your question below----------->
  2696.                 Lorem ipsum dolor sit amet, consectetur adipiscing elit?
  2697.                 <!---------Write your question above----------->
  2698.                 </div>
  2699.                 <div class="faq-answer">
  2700.                 <!---------Write your answer below----------->
  2701.                 Phasellus ultricies a diam eget eleifend. Praesent tristique tempor nisi non hendrerit. Maecenas sit amet metus mi. Curabitur sit amet pretium massa. Aliquam ultricies metus quam, et vulputate nisi eleifend non.
  2702.                 <!---------Write your answer above----------->
  2703.                 </div>
  2704.             </div>
  2705.             <!--------- FAQ BLOCK ----------->
  2706.            
  2707.                <!--------- FAQ BLOCK ----------->
  2708.             <div class="faq-description">
  2709.                 <div class="faq-question">
  2710.                 <!---------Write your question below----------->
  2711.                 Lorem ipsum dolor sit amet, consectetur adipiscing elit?
  2712.                 <!---------Write your question above----------->
  2713.                 </div>
  2714.                 <div class="faq-answer">
  2715.                 <!---------Write your answer below----------->
  2716.                 Phasellus ultricies a diam eget eleifend. Praesent tristique tempor nisi non hendrerit. Maecenas sit amet metus mi. Curabitur sit amet pretium massa. Aliquam ultricies metus quam, et vulputate nisi eleifend non.
  2717.                 <!---------Write your answer above----------->
  2718.                 </div>
  2719.             </div>
  2720.             <!--------- FAQ BLOCK ----------->
  2721.            
  2722.             <!--------- FAQ BLOCK ----------->
  2723.             <div class="faq-description">
  2724.                 <div class="faq-question">
  2725.                 <!---------Write your question below----------->
  2726.                 Lorem ipsum dolor sit amet, consectetur adipiscing elit?
  2727.                 <!---------Write your question above----------->
  2728.                 </div>
  2729.                 <div class="faq-answer">
  2730.                 <!---------Write your answer below----------->
  2731.                 Phasellus ultricies a diam eget eleifend. Praesent tristique tempor nisi non hendrerit. Maecenas sit amet metus mi. Curabitur sit amet pretium massa. Aliquam ultricies metus quam, et vulputate nisi eleifend non.
  2732.                 <!---------Write your answer above----------->
  2733.                 </div>
  2734.             </div>
  2735.             <!--------- FAQ BLOCK ----------->
  2736.            
  2737.             <!---------ASK BOX (DO NO TOUCH)----------->
  2738.             <div class="faq-description">
  2739.             <iframe frameborder="0" height="auto" id="ask_form" scrolling="no" src="https://www.tumblr.com/ask_form/{Name}.tumblr.com" width="100%" style="background-color: transparent; overflow: hidden; margin-top:10px"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]-->
  2740.             </div>
  2741.             <!---------ASK BOX (DO NO TOUCH)----------->
  2742.                
  2743.         </div>
  2744.     </div>
  2745. </div> <!---------FAQ CONTAINER END----------->
  2746.  
  2747. <div class="cage-3"> <!---------ABOUT CONTAINER----------->
  2748.     <div id="about-container">
  2749.         <div class="about-content">
  2750.     <!----------------ABOUT ME SECTION START---------------->
  2751.             <div class="about-title"><h2>About me</h2></div>
  2752.             <div class="about-description">
  2753.             <div class="about-info">
  2754.             <h2>quick info</h2>
  2755.                 <li><i class="ph-user"></i>{text:about name}</li>
  2756.                 <li><i class="ph-trend-up"></i>{text:about age}</li>
  2757.                 <li><i class="ph-gender-nonbinary"></i>{text:about pronouns}</li>
  2758.                 <li><i class="ph-map-pin"></i>{text:about location}</li>
  2759.             </div>
  2760.             {text:about description}
  2761.             <nav class="social-links"> <!-----------SOCIAL MEDIA LINKS----------->
  2762.                 <h2>social media links</h2>
  2763.                 <a href="{text:social media URL 1}"><i class="ph-twitter-logo"></i>{text:social media name 1}</a>
  2764.                 <a href="{text:social media URL 2}"><i class="ph-instagram-logo"></i>{text:social media name 2}</a>
  2765.                 <a href="{text:social media URL 3}"><i class="ph-discord-logo"></i>{text:social media name 3}</a>
  2766.                 <a href="{text:social media URL 4}"><i class="ph-tiktok-logo"></i>{text:social media name 4}</a>
  2767.             </nav> <!-----------SOCIAL MEDIA LINKS----------->
  2768.             </div>
  2769.     <!----------------ABOUT ME SECTION END---------------->
  2770.                
  2771.     <!----------------SKILLS START---------------->
  2772.     <section class="skills-content">
  2773.         <div class="about-title" style="margin-top: 10px;"><h2>Skills</h2></div>
  2774.         <div class="skills-wrapper">
  2775.             <p>{text:skill label one}</p>
  2776.             <section class="skill-cont">
  2777.                 <section class="skill">
  2778.                 <section class="skill-set" style="width:var(--skill-percentage-one);"></section>
  2779.                 </section>
  2780.             </section>
  2781.            
  2782.             <p>{text:skill label two}</p>
  2783.             <section class="skill-cont">
  2784.                 <section class="skill">
  2785.                 <section class="skill-set" style="width:var(--skill-percentage-two);"></section>
  2786.                 </section>
  2787.             </section>
  2788.            
  2789.             <p>{text:skill label three}</p>
  2790.             <section class="skill-cont">
  2791.                 <section class="skill">
  2792.                 <section class="skill-set" style="width:var(--skill-percentage-three);"></section>
  2793.                 </section>
  2794.             </section>
  2795.            
  2796.             <p>{text:skill label four}</p>
  2797.             <section class="skill-cont">
  2798.                 <section class="skill">
  2799.                 <section class="skill-set" style="width:var(--skill-percentage-four);"></section>
  2800.                 </section>
  2801.             </section>
  2802.            
  2803.             </div>
  2804.     </section>
  2805.     <!----------------SKILLS END---------------->
  2806.             </div>
  2807.         </div>
  2808. </div> <!---------ABOUT CONTAINER----------->
  2809.  
  2810. <div class="cage-4"> <!---------NAVIGATION CONTAINER START----------->
  2811.     <div id="navi-container">
  2812.         <div class="navi-content">
  2813.             <div class="navi-title"><h2>Navigation</h2></div>
  2814.             <nav class="morelinks">
  2815.         <!---------NAVIGATION LINKS----------->
  2816.                 <h2><i class="ph-link-fill"></i>Navigation Links</h2>
  2817.         {block:ifLink1}<a href="{text:CustomLink1URL}">{text:CustomLink1Name}</a>{/block:ifLink1}
  2818.         {block:ifLink2}<a href="{text:CustomLink2URL}">{text:CustomLink2Name}</a>{/block:ifLink2}
  2819.         {block:ifLink3}<a href="{text:CustomLink3URL}">{text:CustomLink3Name}</a>{/block:ifLink3}
  2820.         {block:ifLink4}<a href="{text:CustomLink4URL}">{text:CustomLink4Name}</a>{/block:ifLink4}
  2821.         {block:ifLink5}<a href="{text:CustomLink5URL}">{text:CustomLink5Name}</a>{/block:ifLink5}
  2822.         {block:ifLink6}<a href="{text:CustomLink6URL}">{text:CustomLink6Name}</a>{/block:ifLink6}
  2823.         {block:ifLink7}<a href="{text:CustomLink7URL}">{text:CustomLink7Name}</a>{/block:ifLink7}
  2824.         {block:ifLink8}<a href="{text:CustomLink8URL}">{text:CustomLink8Name}</a>{/block:ifLink8}
  2825.         {block:ifLink9}<a href="{text:CustomLink9URL}">{text:CustomLink9Name}</a>{/block:ifLink9}
  2826.         <!---------NAVIGATION LINKS----------->
  2827.             </nav>
  2828.            
  2829.             <nav class="taglinks" style="margin-top: 30px;">
  2830.         <!---------TAGS LINKS----------->
  2831.                 <h2><i class="ph-hash-fill"></i>Favorite Tags</h2>
  2832.         <a href="{text:taglink1URL}">{text:taglink1Name}</a>
  2833.         <a href="{text:taglink2URL}">{text:taglink2Name}</a>
  2834.         <a href="{text:taglink3URL}">{text:taglink3Name}</a>
  2835.         <a href="{text:taglink4URL}">{text:taglink4Name}</a>
  2836.         <a href="{text:taglink5URL}">{text:taglink5Name}</a>
  2837.         <a href="{text:taglink6URL}">{text:taglink6Name}</a>
  2838.         <!---------TAGS LINKS----------->
  2839.             </nav>
  2840.         </div>
  2841.     </div>
  2842. </div> <!---------NAVIGATION CONTAINER END----------->
  2843.    
  2844. </div> <!-----------CAROUSEL WRAPPER----------->
  2845.  
  2846. </div> <!--------- CAROUSEL CONTAINER ----------->
  2847.  
  2848. </div> <!--------- BLOG CONTAINER ----------->
  2849.  
  2850. <!-------------------SCRIPTS/JQUERY (PART TWO)------------------->
  2851.  
  2852. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  2853.  
  2854. <!-----------Pixel Union photosets script----------->
  2855. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  2856. <script src="https://static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></script>
  2857. <!-----------Pixel Union photosets script----------->
  2858.  
  2859. {block:IndexPage}
  2860. <script src="https://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
  2861. <script src="https://static.tumblr.com/pbhn8p5/PH4oshh3z/imagesloaded.pkgd.min.js"></script>
  2862. {/block:IndexPage}
  2863.  
  2864. <!---------- Responsive tumblr videos and external iframes script ---------->
  2865. <script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
  2866. <!---------- Responsive tumblr videos and external iframes script ---------->
  2867.  
  2868. <!-----------Tooltips Script----------->
  2869. <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" />
  2870. <!-----------Tooltips Script----------->
  2871.  
  2872. <!--Time ago script by bychloethemes @ tumblr-->
  2873. <script type="text/javascript" src="https://static.tumblr.com/i5s2zks/9Acok8oo2/bct-timeago.min.js"></script>
  2874. <!--Time ago script by bychloethemes @ tumblr-->
  2875.  
  2876. <!-----------customaudio.js script by annasthms @ tumblr----------->
  2877. <script src="https://cdn.jsdelivr.net/gh/annasthms/customaudio@latest/customaudio.min.js"></script>
  2878. <!-----------customaudio.js script by annasthms @ tumblr----------->
  2879.  
  2880. <script src="https://unpkg.com/feather-icons"></script>
  2881.  
  2882. <script>
  2883. $(document).ready(function(){
  2884.     //pxu photosets by @ shythemes & bychloethemes
  2885.    $('.photo-slideshow').pxuPhotoset({
  2886.        lightbox: true,
  2887.        rounded: false,
  2888.        gutter: '{select:photoset gutter}px',
  2889.        photoset: '.photo-slideshow',
  2890.        photoWrap: '.photo-data',
  2891.        photo: '.pxu-photo'
  2892.    });
  2893.     {block:IndexPage}
  2894.     var $container = $('#content');
  2895.         $container.masonry({
  2896.         itemSelector: '.posts',
  2897.         columnWidth: {select:post size},
  2898.         gutterWidth: 60,  
  2899.         percentPosition: true,
  2900.         horizontalOrder: true
  2901.     });
  2902.         $container.imagesLoaded(function(){
  2903.         $container.masonry();
  2904.         $container.find('.posts').animate({ opacity: 1, zIndex: 1 });
  2905.     });
  2906.     {/block:IndexPage}
  2907.     //.gifv to gif conversion script
  2908.     $('img[src*="media.tumblr.com"]').each(function() {
  2909.         var newsrc = $(this).attr('src').replace('gifv','gif');
  2910.     $(this).attr('src', newsrc);
  2911.     });
  2912.     $('a[href*="media.tumblr.com"]').each(function() {
  2913.         var newhref = $(this).attr('href').replace('gifv','gif');
  2914.      $(this).attr('href', newhref);
  2915.     });
  2916.     $('.timestamp').timeAgo({
  2917.         time: "short",
  2918.         spaces: true,
  2919.         words: false,
  2920.         suffix: "ago",  
  2921.     });
  2922.     // tippy tooltips script
  2923.     tippy('a[title]', {
  2924.         theme: 'custom',
  2925.         arrow: tippy.roundArrow,
  2926.         zIndex: 9999999999,
  2927.         placement: 'auto',
  2928.         maxWidth: 300,
  2929.         content(reference) {
  2930.             const title = reference.getAttribute('title');
  2931.             reference.removeAttribute('title'); return title; },
  2932.     });
  2933.     //responsive tumblr videos and external iframes by @ nouvae
  2934.     function flexFrame() {
  2935.     $(".caption").each(function() {
  2936.         $(this).find("iframe").wrap("<div class='capframe'></div>"); // wrap iframe
  2937.             flexibleFrames($(".capframe"));
  2938.         });
  2939.             flexibleFrames($(".video"));
  2940.     }
  2941.     $(document).ready(flexFrame);
  2942.     //customaudio.js script by annasthms @ tumblr
  2943.     customAudio({
  2944.     post: ".posts",
  2945.     wrappers: {
  2946.         audio: ".custom_audio_wrapper",
  2947.         buttons: ".custom_audio_buttons",
  2948.         duration: ".custom_audio_duration",
  2949.         timeCurrent: ".custom_audio_current_time",
  2950.         timeLeft: ".custom_audio_time_left",
  2951.         seekbar: ".custom_audio_seekbar"
  2952.     },
  2953.         default: false,
  2954.         pauseAll: true,
  2955.         playButton: "<i data-feather='play'></i>",
  2956.         pauseButton: "<i data-feather='pause'></i>",
  2957.         errorIcon: "<i data-feather='x'></i>",
  2958.         hideInfoIfError: true,
  2959.         callAfterLoad: () => {
  2960.             feather.replace();
  2961.         }
  2962.     });
  2963. });
  2964. </script>
  2965.  
  2966. <script>
  2967.    
  2968.   // toggle dark/light
  2969. const toggle = document.getElementById("theme-toggle");
  2970.  
  2971. toggle.onclick = function () {
  2972.     document.documentElement.classList.add("theme-transition");
  2973.  
  2974.     let currentTheme = document.documentElement.getAttribute("data-theme");
  2975.     let targetTheme = "light";
  2976.  
  2977.     if (currentTheme === "light") {
  2978.         targetTheme = "dark";
  2979.     }
  2980.  
  2981.     window.setTimeout(function () {
  2982.         document.documentElement.classList.remove("theme-transition");
  2983.     }, 50);
  2984.  
  2985.     document.documentElement.setAttribute("data-theme", targetTheme);
  2986.     localStorage.setItem("theme", targetTheme);
  2987.     };
  2988. </script>
  2989.  
  2990. <!-------------------SCRIPTS/JQUERY (PART TWO)------------------->
  2991.  
  2992. </body>
  2993. </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!