API tools faq
paste
Advertisement
themesbydoori

Reverberate

themesbydoori
Jun 6th, 2021 (edited)
1,335
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 96.63 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. ╭━━━┳╮╱╭┳━━━┳━━━┳━━━━┳╮╱╭┳━━━┳━╮╭━┳━━━┳━━━╮
  4. ┃╭━╮┃┃╱┃┃╭━━┫╭━╮┃╭╮╭╮┃┃╱┃┃╭━━┫┃╰╯┃┃╭━━┫╭━╮┃
  5. ┃╰━━┫╰━╯┃╰━━┫┃╱┃┣╯┃┃╰┫╰━╯┃╰━━┫╭╮╭╮┃╰━━┫╰━━╮
  6. ╰━━╮┃╭━╮┃╭━━┫╰━╯┃╱┃┃╱┃╭━╮┃╭━━┫┃┃┃┃┃╭━━┻━━╮┃
  7. ┃╰━╯┃┃╱┃┃╰━━┫╭━╮┃╱┃┃╱┃┃╱┃┃╰━━┫┃┃┃┃┃╰━━┫╰━╯┃
  8. ╰━━━┻╯╱╰┻━━━┻╯╱╰╯╱╰╯╱╰╯╱╰┻━━━┻╯╰╯╰┻━━━┻━━━╯
  9.  
  10. Theme ⎾REVERBERATE⏌ by sheathemes @ tumblr
  11.  
  12. - TERMS -
  13.  
  14. I. Do NOT remove my credit from the index page. Keep it exactly where it is
  15. II. Do NOT take any part of my code to use for your personal designs
  16. III. Do NOT claim any part of my code as your own
  17. IV. NO redistrubuting of any of my code
  18. V. Editing is allowed. As long as it's NOT being claimed as your own
  19.  
  20. CREDITS
  21.  
  22. > 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
  23.  
  24. > Responsive tumblr videos and external iframes script: https://nouvae.tumblr.com/post/176815415055/tutorial-responsive-tumblr-videos-and-external
  25.  
  26. > NPF images fix v3.0: https://github.com/npf-images-v3/npf-images-v3.github.io/blob/main/WELCOME.md
  27.  
  28. > Tippy.js: https://atomiks.github.io/tippyjs/
  29.  
  30. > Custom Tumblr lightbox: http://shythemes.tumblr.com/post/140444996328/tutorial-lightboxes
  31.  
  32. > Icons: https://boxicons.com/
  33.  
  34. > Smoothscroll script: https://cdnjs.com/libraries/smoothscroll
  35.  
  36. > Fade-in tabs: https://www.w3schools.com/howto/howto_js_tabs.asp
  37.  
  38. > Day/night mode toggle: https://egg.design/post/186889223257/day-night-mode-tutorial-after-featuring-a
  39.  
  40. !-->
  41.  
  42. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  43. <html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  44.  
  45. <head>
  46.  
  47. <!--------------Custom Fonts-------------->
  48. <link rel="preconnect" href="https://fonts.gstatic.com">
  49. <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Lato:wght@400;700&family=Noto+Sans+JP:wght@400;700&family=Open+Sans:wght@400;700&family=Playfair+Display&family=Poppins:wght@400;700&family=Roboto:wght@400;700&family=Epilogue:wght@400;700&family=Roboto+Slab:wght@400;700&family=Source+Sans+Pro:wght@400;700&display=swap" rel="stylesheet">
  50. <!--------------Custom Fonts-------------->
  51.  
  52. <!--------------Homelinks Icons-------------->
  53. <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
  54. <!--------------Homelinks Icons-------------->
  55.  
  56.     <title>{Title}</title>
  57.     <link rel="shortcut icon" href="{Favicon}">
  58.     <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  59.     <meta charset="utf-8">
  60.     {block:Description}
  61.     <meta name="description" content="{MetaDescription}" />
  62.     {/block:Description}
  63.     <meta http-equiv="x-dns-prefetch-control" content="off"/>
  64.     <meta name="viewport" content="width=device-width, initial-scale=1">
  65.  
  66. <!--------------Custom Options-------------->
  67.  
  68. <meta name="color:background" content="#f8f8f8" />
  69. <meta name="color:accent" content="#f0a866" />
  70. <meta name="color:accented text" content="#ffffff" />
  71. <meta name="color:Text" content="#414552" />    
  72. <meta name="color:bold" content="#f0a866"/>
  73. <meta name="color:italic" content="#f0a866"/>
  74. <meta name="color:Links" content="#000000" />
  75. <meta name="color:Link Hover" content="#f0a866" />
  76. <meta name="color:text selection" content="#000000" />
  77. <meta name="color:text selection background" content="#f0a866" />
  78. <meta name="color:Blockquote" content="#f0a866" />
  79.  
  80. <meta name="color:banner text" content="#000000" />
  81. <meta name="color:banner background" content="#ffffff" />
  82. <meta name="color:banner hover" content="#f0a866" />
  83.  
  84. <meta name="color:sidebar title" content="#ffffff" />
  85. <meta name="color:sidebar description" content="#414552" />
  86. <meta name="color:navigation" content="#ffffff" />
  87. <meta name="color:navigation background" content="#111319" />
  88. <meta name="color:navigation hover" content="#f0a866" />
  89.  
  90. <meta name="color:Posts" content="#ffffff" />
  91. <meta name="color:Post Title" content="#000000" />
  92. <meta name="color:Post Borders" content="#f0f0f0" />
  93. <meta name="color:question" content="#444444" />
  94. <meta name="color:question background" content="#fafafa" />
  95. <meta name="color:chat odd" content="#f0a866"/>
  96. <meta name="color:chat even" content="#000000"/>
  97. <meta name="color:pagination" content="#000000" />
  98.  
  99. <meta name="color:permalink" content="#ffffff" />
  100. <meta name="color:permalink background" content="#f0a866" />
  101. <meta name="color:permalink hover" content="#eeeeee" />
  102. <meta name="color:like and reblog" content="#ffffff" />
  103. <meta name="color:like and reblog background" content="#111319" />
  104. <meta name="color:like and reblog hover" content="#cccccc" />
  105. <meta name="color:source" content="#ffffff" />
  106. <meta name="color:source background" content="#111319" />
  107. <meta name="color:source hover" content="#f0a866" />
  108. <meta name="color:tag icon" content="#ffffff" />
  109. <meta name="color:tag icon background" content="#f0a866" />
  110. <meta name="color:tag bar" content="#ffffff" />
  111. <meta name="color:tag bar background" content="#111319" />
  112. <meta name="color:tag bar hover" content="#f0a866" />
  113.  
  114. <meta name="color:&#x25C6;&#x3A;&#x2A;&#x3A;&#x25C7;&#x3A;&#x2A;&#x3A;&#x25C6;&#x3A;&#x2A;&#x3A;&#x25C7;&#x3A;&#x2A;&#x3A;&#x25C6;">
  115.  
  116. <!------------------- night mode ------------------>
  117.  
  118. <meta name="color:accent night" content="#F0A866" />
  119. <meta name="color:accented text night" content="#000000" />
  120. <meta name="color:background night" content="#313131" />
  121. <meta name="color:text night" content="#ffffff" />
  122. <meta name="color:bold night" content="#ffffff" />
  123. <meta name="color:italic night" content="#ffffff" />
  124. <meta name="color:links night" content="#ffffff" />
  125. <meta name="color:link hover night" content="#F0A866" />
  126. <meta name="color:posts background night" content="#414141" />
  127. <meta name="color:posts title night" content="#ffffff" />
  128. <meta name="color:post borders night" content="#323131" />
  129. <meta name="color:navigation night" content="#ffffff" />
  130. <meta name="color:navigation background night" content="#313131" />
  131. <meta name="color:question night" content="#ffffff" />
  132. <meta name="color:question background night" content="#494949" />
  133. <meta name="color:permalink night" content="#ffffff" />
  134. <meta name="color:permalink background night" content="#494949" />
  135. <meta name="color:permalink hover night" content="#eeeeee" />
  136.  
  137.  
  138. <meta name="select:Background Attachment" content="fixed" title="fixed">
  139. <meta name="select:Background Attachment" content="scroll" title="scroll">
  140. <meta name="select:Background Repeat" content="repeat" title="repeat">
  141. <meta name="select:Background Repeat" content="no-repeat" title="no repeat">
  142.  
  143. <meta name="select:Body Font" content="Open Sans" title="Open Sans">
  144. <meta name="select:Body Font" content="Lato" title="Lato">
  145. <meta name="select:Body Font" content="Titillium Web" title="Titillium Web">
  146. <meta name="select:Body Font" content="Noto Sans JP" title="Noto Sans JP">
  147. <meta name="select:Body Font" content="Roboto" title="Roboto">
  148. <meta name="select:Body Font" content="Inter" title="Inter">
  149. <meta name="select:Body Font" content="Poppins" title="Poppins">
  150. <meta name="select:Body Font" content="Source Sans Pro" title="Source Sans Pro">
  151.  
  152. <meta name="select:font size" content="11" title="11px">
  153. <meta name="select:font size" content="12" title="12px">
  154. <meta name="select:font size" content="13" title="13px">
  155. <meta name="select:font size" content="14" title="14px">
  156. <meta name="select:font size" content="15" title="15px">
  157.  
  158. <meta name="select:text align" content="left" title="left">
  159. <meta name="select:text align" content="justify" title="justify">
  160. <meta name="select:description text align" content="left" title="left">
  161. <meta name="select:description text align" content="justify" title="justify">
  162.  
  163. <meta name="select:Post Size" content="400" title="400px">
  164. <meta name="select:Post Size" content="450" title="450px">
  165. <meta name="select:Post Size" content="475" title="475px">
  166. <meta name="select:Post Size" content="500" title="500px">
  167. <meta name="select:Post Size" content="525" title="525px">
  168. <meta name="select:Post Size" content="540" title="540px">
  169.  
  170. <meta name="select:Post Padding" content="0" title="0px">
  171. <meta name="select:Post Padding" content="2" title="2px">
  172. <meta name="select:Post Padding" content="5" title="5px">
  173. <meta name="select:Post Padding" content="10" title="10px">
  174. <meta name="select:Post Padding" content="15" title="15px">
  175. <meta name="select:Post Padding" content="20" title="20px">
  176.  
  177. <meta name="select:Photoset gutter" content="1" title="1px">
  178. <meta name="select:Photoset gutter" content="2" title="2px">
  179. <meta name="select:Photoset gutter" content="4" title="4px">
  180. <meta name="select:Photoset gutter" content="6" title="6px">
  181. <meta name="select:Photoset gutter" content="8" title="8px">
  182. <meta name="select:Photoset gutter" content="10" title="10px">
  183.  
  184. <meta name="text:margin bottom" content="50"/>
  185.  
  186. <meta name="if:Link1" content="1" />
  187. <meta name="if:Link2" content="1" />
  188. <meta name="if:Link3" content="1" />
  189. <meta name="if:Link4" content="1" />
  190. <meta name="if:Link5" content="1" />
  191. <meta name="if:Link6" content="1" />
  192. <meta name="if:Link7" content="1" />
  193. <meta name="if:Link8" content="1" />
  194. <meta name="if:Link9" content="1" />
  195.  
  196. <meta name="text:CustomLink1URL" content="Link 1 URL" />
  197. <meta name="text:CustomLink1Name" content="Link 1" />
  198. <meta name="text:CustomLink2URL" content="Link 2 URL" />
  199. <meta name="text:CustomLink2Name" content="Link 2" />
  200. <meta name="text:CustomLink3URL" content="Link 3 URL" />
  201. <meta name="text:CustomLink3Name" content="Link 3" />
  202. <meta name="text:CustomLink4URL" content="Link 4 URL" />
  203. <meta name="text:CustomLink4Name" content="Link 4" />
  204. <meta name="text:CustomLink5URL" content="Link 5 URL" />
  205. <meta name="text:CustomLink5Name" content="Link 5" />
  206. <meta name="text:CustomLink6URL" content="Link 6 URL" />
  207. <meta name="text:CustomLink6Name" content="Link 6" />
  208. <meta name="text:CustomLink7URL" content="Link 7 URL" />
  209. <meta name="text:CustomLink7Name" content="Link 7" />
  210. <meta name="text:CustomLink8URL" content="Link 8 URL" />
  211. <meta name="text:CustomLink8Name" content="Link 8" />
  212. <meta name="text:CustomLink9URL" content="Link 9 URL" />
  213. <meta name="text:CustomLink9Name" content="Link 9" />
  214.  
  215. <meta name="text:about name" content="name here" />
  216. <meta name="text:about pronouns" content="pronouns here" />
  217. <meta name="text:about age" content="age here" />
  218. <meta name="text:about location" content="location here" />
  219. <meta name="text:about occupation" content="occupation here" />
  220. <meta name="text:about zodiac" content="zodiac here" />
  221. <meta name="text:about biography" content="Biography here" />
  222.  
  223. <meta name="text:skills title" content="HTML/HTML5" />
  224. <meta name="text:skills percentage" content="90%" />
  225. <meta name="text:skills title 2" content="CSS/CSS3" />
  226. <meta name="text:skills percentage 2" content="60%" />
  227. <meta name="text:skills title 3" content="JavaScript/Jquery" />
  228. <meta name="text:skills percentage 3" content="10%" />
  229. <meta name="text:skills title 4" content="UX / UI design" />
  230. <meta name="text:skills percentage 4" content="30%" />
  231.  
  232. <meta name="image:background" content=""/>
  233. <meta name="image:sidebar" content=""/>
  234. <meta name="image:about header" content=""/>
  235.  
  236. <meta name="if:inverted tumblr controls" content="1" />
  237. <meta name="if:Small Cursor" content="0" />
  238. <meta name="if:Custom Text Selection" content="0"/>
  239. <meta name="if:Faded Images" content="0"/>
  240. <meta name="if:Grayscale Images" content="0"/>
  241. <meta name="if:Show Captions" content="1"/>
  242.  
  243. <!--------------Custom Options-------------->
  244.  
  245. <!------------Smooth Scroll Script------------>
  246. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  247. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.6/SmoothScroll.min.js"></script>
  248. <!------------Smooth Scroll Script------------>
  249.  
  250. <!--
  251.        NPF images fix v3.0 by @glenthemes [2021]
  252.        💌 git.io/JRBt7
  253. --->
  254. <script src="//npf-images-v3.github.io/script.js"></script>
  255. <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
  256.  
  257. <style tmblr-npf>
  258.  
  259. :root {
  260.     --NPF-Caption-Spacing:1em;
  261.     --NPF-Image-Spacing:4px;
  262.    
  263.     /*---------- NIGHT MODE COLOR CUSTOMIZATION ----------*/
  264.    
  265.     --accent-night: {color:accent night};
  266.     --accented-text-night: {color:accented text night};
  267.     --background-night: {color:background night};
  268.     --lightbox-background-night: rgba({RGBcolor:background night}, 0.6);
  269.     --text-night: {color:text night};
  270.     --bold-night: {color:bold night};
  271.     --italic-night: {color:italic night};
  272.     --links-night: {color:links night};
  273.     --link-hover-night: {color:link hover night};
  274.     --posts-background-night: {color:posts background night};
  275.     --posts-title-night: {color:posts title night};
  276.     --post-borders-night: {color:post borders night};
  277.     --navigation-night: {color:navigation night};
  278.     --navigation-background-night: {color:navigation background night};
  279.     --question-night: {color:question night};
  280.     --question-background-night: {color:question background night};
  281.     --permalink-night: {color:permalink night};
  282.     --permalink-background-night: {color:permalink background night};
  283.     --permalink-hover-night: {color:permalink hover night};
  284. }
  285.  
  286. /*----------FADE-IN ANIMATION----------*/
  287.  
  288. @keyframes fadein {
  289.     from {opacity:0;}
  290.     to {opacity:1;}
  291. }
  292.  
  293. @-moz-keyframes fadein { /* Firefox */
  294.     from {opacity:0;}
  295.     to {opacity:1;}
  296. }
  297.  
  298. @-webkit-keyframes fadein { /* Safari and Chrome */
  299.     from {opacity:0;}
  300.     to {opacity:1;}
  301. }
  302.  
  303. @-o-keyframes fadein { /* Opera */
  304.     from {opacity:0;}
  305.     to {opacity: 1;}
  306. }
  307.  
  308. iframe.tmblr-iframe {
  309.     position:fixed!important;
  310.     z-index: 300!important;
  311.     top: 80px!important;
  312.     right: 15px!important;
  313.     opacity:0.6!important;
  314.     filter:invert(1);
  315.     -webkit-filter:invert(1);
  316.     -o-filter:invert(1);
  317.     -moz-filter:invert(1);
  318.     -ms-filter:invert(1);
  319.     filter:invert(100%) hue-rotate(180deg);
  320.     -webkit-filter:invert(100%) hue-rotate(180deg);
  321.     -moz-filter:invert(100%) hue-rotate(180deg);
  322.     -o-filter:invert(100%) hue-rotate(180deg);
  323.     -ms-filter:invert(100%) hue-rotate(180deg);
  324.     transform:scale(0.7);
  325.     transform-origin:100% 0;
  326.     -webkit-transform:scale(0.7);
  327.     -webkit-transform-origin:100% 0;
  328.     -o-transform:scale(0.7);
  329.     -o-transform-origin:100% 0;
  330.     -moz-transform:scale(0.7);
  331.     -moz-transform-origin:100% 0;
  332.     -ms-transform:scale(0.7);
  333.     -ms-transform-origin:100% 0;
  334.     -webkit-transition: 0.8s ease;
  335.     -moz-transition: 0.8s ease;
  336.     -o-transition: 0.8s ease;
  337.     transition: 0.8s ease;
  338. }
  339.  
  340. iframe.tmblr-iframe:hover {
  341.     opacity:0.8!important;
  342.     -webkit-transition: 0.8s ease;
  343.     -moz-transition: 0.8s ease;
  344.     -o-transition: 0.8s ease;
  345.     transition: 0.8s ease;
  346. }
  347.  
  348. body.night iframe.tmblr-iframe {
  349.     opacity: 1;
  350.     filter:invert(0)!important;
  351.     -webkit-filter:invert(0)!important;
  352.     -o-filter:invert(0)!important;
  353.     -moz-filter:invert(0)!important;
  354.     -ms-filter:invert(0)!important;
  355.     filter:invert(100%) hue-rotate(180deg);
  356.     -webkit-filter:invert(100%) hue-rotate(180deg);
  357.     -moz-filter:invert(100%) hue-rotate(180deg);
  358.     -o-filter:invert(100%) hue-rotate(180deg);
  359.     -ms-filter:invert(100%) hue-rotate(180deg);
  360.     -webkit-transition: 0.8s ease;
  361.     -moz-transition: 0.8s ease;
  362.     -o-transition: 0.8s ease;
  363.     transition: 0.8s ease;
  364. }
  365.  
  366. /*--------CUSTOM TUMBLR LIGHTBOX--------*/
  367.  
  368. .vignette, #vignette {
  369.     opacity:0;
  370. }
  371. .lightbox-image, #tumblr_lightbox img {
  372.     box-shadow:none !important;
  373.     border-radius:0 !important;
  374.     max-width:none;
  375. }
  376.  
  377. .tmblr-lightbox, #tumblr_lightbox {
  378.     background-color:rgba({RGBcolor:Background}, 0.6)!important;
  379.     transition: 0.6s;
  380. }
  381.  
  382. body.night .tmblr-lightbox, body.night #tumblr_lightbox {
  383.     background-color:var(--lightbox-background-night)!important;
  384.     transition: 0.6s;
  385. }
  386.  
  387. .lightbox-image, #tumblr_lightbox img {
  388.     background-color: {color:posts}!important;
  389.     padding: 10px !important;
  390.     -moz-box-sizing:border-box;
  391.     box-sizing:border-box;
  392.     transition: 0.6s;
  393. }
  394.  
  395. body.night .lightbox-image, body.night #tumblr_lightbox img {
  396.     background-color: var(--posts-background-night)!important;
  397.     transition: 0.6s;
  398. }
  399.  
  400. /*----------SCROLLBAR----------*/
  401.  
  402. ::-webkit-scrollbar {
  403.     width: 10px;
  404.     height: 6px;
  405. }
  406. ::-webkit-scrollbar-button {
  407.     width: 0px;
  408.     height: 0px;
  409. }
  410. ::-webkit-scrollbar-thumb {
  411.     background-color: {color:accent};
  412.     border-radius: 20px;
  413.     border: 2px solid {color:Background};
  414.     transition: 0.6s;
  415. }
  416.  
  417. body.night::-webkit-scrollbar-thumb {
  418.     background-color: var(--accent-night)!important;
  419.     border: 2px solid var(--background-night)!important;
  420.     transition: 0.6s;
  421. }
  422.  
  423. ::-webkit-scrollbar-track {
  424.     background: {color:posts};
  425.     border: 8px solid {color:posts};
  426.     border-radius: 20px;
  427.     transition: 0.6s;
  428. }
  429.  
  430. body.night::-webkit-scrollbar-track {
  431.     background-color: var(--background-night)!important;
  432.     border: 8px solid var(--background-night)!important;
  433.     transition: 0.6s;
  434. }
  435.  
  436. ::-webkit-scrollbar-corner {
  437.     background: transparent;
  438. }
  439.  
  440. /*----------TOOLTIPS----------*/
  441.  
  442. .tippy-tooltip.custom-theme {
  443.     background-color: {color:accent};
  444.     color: {color:accented text};
  445.     text-align:center;
  446.     font-size: 12px;
  447. }
  448.  
  449. .tippy-tooltip.custom-theme .tippy-svg-arrow {
  450.   fill: {color:accent};
  451. }
  452.  
  453. /*----------TEXT SELECTION----------*/
  454.  
  455. {block:ifCustomTextSelection}
  456. ::selection {
  457.     background: {color:text selection background};
  458.     color: {color:text selection};
  459. }
  460.  
  461. ::-moz-selection {
  462.     background: {color:text selection background};
  463.     color: {color:text selection};
  464. }
  465.  
  466. ::-webkit-selection {
  467.     background: {color:text selection background};
  468.     color: {color:text selection};
  469. }
  470. {/block:ifCustomTextSelection}
  471.  
  472. /*----------THEME BASICS----------*/
  473.  
  474. body {
  475.     color: {color:text};
  476.     font-family: {select:Body Font}, helvetica, sans-serif;
  477.     font-weight: 400;
  478.     font-size: {select:font size}px;
  479.     line-height:180%;
  480.     margin:0;
  481.     padding: 0;
  482.     text-align:left;
  483.     background: {color:background} url({image:Background}) center;
  484.     background-attachment: {select:Background Attachment};
  485.     background-repeat: {select:Background Repeat};
  486.     -webkit-font-smoothing: antialiased;
  487.     -moz-osx-font-smoothing: grayscale;
  488.     transition:.6s;
  489.     animation: fadein 2.5s;
  490.     -moz-animation: fadein 2.5s; /* Firefox */
  491.     -webkit-animation: fadein 2.5s; /* Safari and Chrome */
  492.     -o-animation: fadein  2.5s; /* Opera */
  493. }
  494.  
  495. body.night {
  496.     background: var(--background-night)!important;
  497.     color:var(--text-night)!important;
  498.     transition:.6s;
  499. }
  500.  
  501. p:empty {
  502.     display: none;
  503. }
  504.  
  505. b,strong {
  506.     color:{color:bold};
  507.     font-weight: 700;
  508.     transition: 0.6s;
  509. }
  510.  
  511. body.night b, body.night strong {
  512.     color:var(--bold-night)!important;
  513.     transition:.6s;
  514. }
  515.  
  516. i,em {
  517.     color:{color:italic};
  518.     transition: 0.6s;
  519. }
  520.  
  521. body.night i, body.night em {
  522.     color: var(--italic-night)!important;
  523. }
  524.  
  525. small,sub,sup {
  526.     font-size: calc({select:font size}px - 0.5px);
  527. }
  528.  
  529. h1,h2,h3 {
  530.     font-weight: 700;
  531.     font-size: 1.3em;
  532.     color: {color:bold};
  533. }
  534.  
  535. h4,h5,h6 {
  536.     font-weight: 700;
  537.     font-size: 1.2em;
  538.     color: {color:bold};
  539. }
  540.  
  541. pre {
  542.     white-space: pre-wrap;
  543.     white-space: -moz-pre-wrap;
  544.     white-space: -pre-wrap;
  545.     white-space: -o-pre-wrap;
  546.     word-wrap: break-word;
  547.     padding: 5px 10px;
  548.     font-family: inherit;
  549.     font-weight: 400;
  550.     line-height: 150%;
  551.     color: {color:question};
  552.     background-color: {color:question background};
  553. }
  554.  
  555. blockquote:not(.tumblr_parent) {
  556.     padding-left:10px;
  557.     margin: 10px;
  558.     border-left: 3px solid {color:blockquote};
  559.     border-radius: 5px;
  560.     transition: 0.6s;
  561. }
  562.  
  563. body.night blockquote:not(.tumblr_parent) {
  564.     border-left: 2px solid var(--accent-night)!important;
  565.     transition: 0.6s;
  566. }
  567.  
  568. blockquote img {
  569.     max-width: 100%;
  570.     height: auto;
  571. }
  572.  
  573. figure {
  574.   margin: 1em 3px;
  575. }
  576.  
  577. a {
  578.     color:{color:links};
  579.     text-decoration:none;
  580.     -moz-transition-duration: 0.5s;
  581.     -o-transition-duration: 0.5s;
  582.     -webkit-transition-duration: 0.5s;
  583.     transition-duration: 0.5s;
  584. }
  585.  
  586. body.night a {
  587.     color: var(--links-night)!important;
  588.     transition: 0.6s;
  589. }
  590.  
  591. a:hover {
  592.     color:{color:link hover};
  593.     -moz-transition-duration: 0.5s;
  594.     -o-transition-duration: 0.5s;
  595.     -webkit-transition-duration: 0.5s;
  596.     transition-duration: 0.5s;
  597. }
  598.  
  599. body.night a:hover {
  600.     color: var(--link-hover-night)!important;
  601. }
  602.  
  603. {block:ifSmallCursor}
  604. html, body, a { cursor:url("https://i.imgur.com/2qleX.jpg"), auto !important; }
  605. a:hover{cursor:url("https://i.imgur.com/IepP2.jpg"), auto !important;}
  606. {/block:ifSmallCursor}
  607.  
  608. /*----------PAGINATION----------*/
  609.  
  610. #pagination {
  611.     height:auto;
  612.     width: calc(540px + 20px);
  613.     margin: 20px auto 40px auto;
  614.     text-align:center;
  615.     background-color: {color:posts};
  616.     padding: 15px 20px;
  617.     font-size: 1.1em;
  618.     transition: 0.6s;
  619. }
  620.  
  621. body.night #pagination {
  622.     background-color: var(--posts-background-night)!important;
  623.     transition: 0.6s;
  624. }
  625.  
  626. .current_page {
  627.     color:{color:pagination};
  628.     border-bottom: 2px solid {color:accent};
  629.     padding: 5px 10px;
  630.     transition: 0.6s;
  631.     font-weight: 700;
  632.     transition: 0.6s;
  633. }
  634.  
  635. body.night .current_page {
  636.     color: var(--links-night);
  637.     border-bottom: 2px solid var(--accent-night)!important;
  638. }
  639.  
  640. #pagination a {
  641.     margin: 0 10px;
  642.     padding: 5px 10px;
  643.     color: {color:pagination};
  644.     font-weight: 700;
  645.     border-bottom: 2px solid transparent;
  646.     -webkit-transition:all 0.8s ease-out;
  647.     -moz-transition:all 0.8s ease-out;
  648.     transition:all 0.8s ease-out;
  649. }
  650.  
  651. body.night #pagination a {
  652.     color: var(--links-night)!important;
  653.     transition: 0.6s;
  654. }
  655.  
  656. #pagination a:hover {
  657.     border-bottom: 2px solid {color:accent};
  658.     -webkit-transition:all 0.8s ease-out;
  659.     -moz-transition:all 0.8s ease-out;
  660.     transition:all 0.8s ease-out;
  661. }
  662.  
  663. body.night #pagination a:hover {
  664.     color: var(--link-hover-night);
  665. }
  666.  
  667. /*----------POSIS CONTAINER----------*/
  668.  
  669. .cage {
  670.     width: 100%;
  671.     display: flex;
  672.     flex-flow: row wrap;
  673. }
  674.  
  675. .wrap {
  676.     position: relative;
  677.     width: 100%;
  678.     height: 100%;
  679.     display: flex;
  680.     flex-direction: row;
  681. }
  682.  
  683. .posts-section {
  684.     width: 50%;
  685.     position: absolute;
  686.     right: 0;
  687. }
  688.  
  689. #content-content-box, #faq-cont-content-box, #about-cont-content-box, #tag-cont-content-box {
  690.     width: {select:post size}px;
  691.     position: relative;
  692.     margin: 120px auto 0;
  693.     padding-top: 35px;
  694.     {block:PermalinkPage}
  695.     width: 540px;
  696.     {/block:PermalinkPage}
  697. }
  698.  
  699. /*----------POSIS / FAQ / ABOUT / TAGS----------*/
  700.  
  701. .posts, .faq-section, .about-section, .tag-section {
  702.     position: relative;
  703.     width: {select:post size}px;
  704.     background-color: {color:posts};
  705.     {block:IndexPage}
  706.     margin-bottom: {text:margin bottom}px;
  707.     {/block:IndexPage}
  708.     {block:PermalinkPage}
  709.     margin-bottom: 50px;
  710.     width: 540px;
  711.     {/block:PermalinkPage}
  712.     transition: 0.6s;
  713. }
  714.  
  715. body.night .posts, body.night .faq-section, body.night .about-section, body.night .tag-section {
  716.     background-color: var(--posts-background-night)!important;
  717.     transition: 0.6s;
  718. }
  719.  
  720. .tag-page h2 {
  721.     font-size: 1.3em;
  722.     color: {color:links};
  723.     font-family: 'Roboto Slab', serif;
  724.     padding-bottom: 30px;
  725. }
  726.  
  727. body.night .tag-page h2 {
  728.     color: var(--links-night);
  729.     transition: 0.6s;
  730. }
  731.  
  732. .pinned {
  733.     position: absolute;
  734.     top: 0;
  735.     right: 0;
  736.     z-index: 2;
  737. }
  738.  
  739. .bx-pin {
  740.     font-size: 22px;
  741.     background-color: {color:accent};
  742.     color: {color:accented text};
  743.     padding: 5px;
  744.     transition: 0.6s;
  745. }
  746.  
  747. body.night .bx-pin {
  748.     background-color: var(--accent-night);
  749.     color: var(accented-text-night);
  750. }
  751.  
  752. .posts ul li {
  753.     list-style: none;
  754.     margin-left: -25px;
  755.     padding-left: 10px;
  756. }
  757.  
  758. .posts ul li:before {
  759.     content: "―";
  760.     padding-right: 5px;
  761.     color: {color:accent};
  762. }
  763.  
  764. .posts ol {
  765.     list-style-type: upper-roman;
  766.     text-transform: justify;
  767.     margin-left: -10px;
  768. }
  769.  
  770. .posts iframe {
  771.     max-width:100%;
  772.     display: block;
  773.     padding: 0;
  774.     margin: 0
  775. }
  776.  
  777. .posts img {
  778.     max-width: 100%;
  779.     display: block;
  780.     border: 0;
  781. }
  782.  
  783. .tumblr_video_container {
  784.     width: auto !important;
  785.     height: auto !important;
  786. }
  787.  
  788. .posts .photo img {
  789.     {block:ifFadedImages}
  790.     {block:IndexPage}
  791.     opacity: 0.6;
  792.     -moz-transition: all 0.8s ease-in;
  793.     -o-transition: all 0.8s ease-in;
  794.     -webkit-transition: all 0.8s ease-in;
  795.     transition: all 0.8s ease-in;
  796. }
  797.  
  798. .posts:hover .photo img {
  799.     opacity: 1.0;
  800.     -moz-transition: all 0.8s ease-in;
  801.     -o-transition: all 0.8s ease-in;
  802.     -webkit-transition: all 0.8s ease-in;
  803.     transition: all 0.8s ease-in;
  804.     {/block:IndexPage}
  805.     {/block:ifFadedImages}
  806. }
  807.  
  808. {block:ifGrayscaleImages}
  809. {block:IndexPage}
  810. .posts .photo img {
  811.     z-index: -9999999999999999999999999px;
  812.     -webkit-filter: grayscale(100%);
  813.     filter: grayscale(100%);
  814.     filter: gray;
  815.     /* IE 6-9 */
  816.     -moz-transition: all 0.8s ease-in;
  817.     -o-transition: all 0.8s ease-in;
  818.     -webkit-transition: all 0.8s ease-in;
  819.     transition: all 0.8s ease-in;
  820. }
  821.  
  822. .posts:hover .photo img {
  823.     -webkit-filter: none;
  824.     filter: none;
  825.     -moz-transition: all 0.8s ease-in;
  826.     -o-transition: all 0.8s ease-in;
  827.     -webkit-transition: all 0.8s ease-in;
  828.     transition: all 0.8s ease-in;
  829. }
  830. {/block:IndexPage}
  831. {/block:ifGrayscaleImages}
  832.  
  833. /*----------FAQ PAGE----------*/
  834.  
  835. .faq-section h2  {
  836.     color: {color:post title};
  837.     font-family: 'Roboto Slab', serif;
  838.     padding-bottom: 20px;
  839.     font-size: 1.5em;
  840.     font-weight: 700;
  841.     line-height: 200%;
  842.     position: relative;
  843.     line-height: 120%;
  844.     transition: 0.6s;
  845. }
  846.  
  847. body.night .faq-section h2  {
  848.     color: var(--posts-title-night)!important;
  849.     transition: 0.6s;
  850. }
  851.  
  852. .faq-section h2:before {
  853.     content: '';
  854.     position: absolute;
  855.     top: 100%;
  856.     left: 0;
  857.     width: 10%;
  858.     height: 2px;
  859.     background-color: {color:accent};
  860. }
  861.  
  862. .faq-item {
  863.     margin: 50px 0;
  864. }
  865.  
  866. .faq-item:first-child {
  867.     margin-top: 0;
  868. }
  869.  
  870. .faq-item:last-child {
  871.     margin-bottom: 0;
  872. }
  873.  
  874. .faq-question h3 {
  875.     font-family: 'Roboto Slab', serif;
  876.     color: {color:links};
  877.     font-size: 1.2em;
  878.     transition: 0.6s;
  879. }
  880.  
  881. body.night .faq-question h3 {
  882.     color: var(--links-night)!important;
  883.     transition: 0.6s;
  884. }
  885.  
  886. .faq-answer {
  887.     margin-top: 30px;
  888.     padding: 0 20px;
  889. }
  890.  
  891. .faq-answer {
  892.     background-color: {color:accent};
  893.     color: {color:accented text};
  894.     padding: 10px;
  895. }
  896.  
  897. body.night .faq-answer {
  898.     background-color: var(--question-background-night)!important;
  899.     color: var(--question-night)!important;
  900. }
  901.  
  902. .faqp h3 {
  903.     font-family: 'Roboto Slab', serif;
  904.     color: {color:links};
  905.     font-size: 1.2em;
  906.     transition: 0.6s;
  907. }
  908.  
  909. body.night .faqp h3 {
  910.     color: var(--links-night)!important;
  911.     transition: 0.6s;
  912. }
  913.  
  914. /*----------ABOUT PAGE----------*/
  915.  
  916. .about-image {
  917.     width: 100%;
  918.     height: 250px;
  919.     overflow: hidden;
  920.     background-color: {color:accent};
  921. }
  922.  
  923. .about-image img {
  924.     width: 100%;
  925.     height: auto;
  926.     object-fit: cover;
  927. }
  928.  
  929. .about-container h2  {
  930.     color: {color:post title};
  931.     font-family: 'Roboto Slab', serif;
  932.     padding-bottom: 20px;
  933.     font-size: 1.5em;
  934.     font-weight: 700;
  935.     line-height: 200%;
  936.     position: relative;
  937.     line-height: 120%;
  938.     margin-top: 30px;
  939.     transition: 0.6s;
  940. }
  941.  
  942. body.night .about-container h2 {
  943.     color: var(--posts-title-night)!important;
  944.     transition: 0.6s;
  945. }
  946.  
  947. .about-container h2:before {
  948.     content: '';
  949.     position: absolute;
  950.     top: 100%;
  951.     left: 0;
  952.     width: 10%;
  953.     height: 2px;
  954.     background-color: {color:accent};
  955. }
  956.  
  957. .about-stats li {
  958.     width: 45%;
  959.     display: inline-block;
  960.     margin: 10px 11px;
  961.     list-style: none;
  962.     border: 1px solid {color:post borders};
  963.     padding: 5px 10px;
  964.     box-sizing: border-box;
  965. }
  966.  
  967. body.night .about-stats li {
  968.     border: 1px solid var(--post-borders-night)!important;
  969. }
  970.  
  971. .biography p {
  972.     margin-top: 30px;
  973. }
  974.  
  975. .skill-cont p {
  976.     color: {color:links};
  977.     font-weight: 600;
  978.     transition: 0.6s;
  979. }
  980.  
  981. body.night .skill-cont p {
  982.     color: var(--links-night)!important;
  983.     transition: 0.6s;
  984. }
  985.  
  986. .skill-cont {
  987.     margin-top: 30px;
  988. }
  989.  
  990. .skill {
  991.     background-color:{color:post borders};
  992.     padding: 0;
  993.     box-sizing: border-box;
  994.     border-radius: 10px;
  995. }
  996.  
  997. body.night .skill {
  998.     background-color: var(--post-borders-night)!important;
  999. }
  1000.  
  1001. .skill-set {
  1002.     background-color: {color:accent};
  1003.     width: 100%;
  1004.     height: 10px;
  1005.     border-radius: 10px;
  1006.     transition: 0.6s;
  1007. }
  1008.  
  1009. body.night .skill-set{
  1010.     background-color: var(--bold-night)!important;
  1011.     transition: 0.6s;
  1012. }
  1013.  
  1014. /*----------TAG PAGE----------*/
  1015.  
  1016. .tag-section h2  {
  1017.     color: {color:post title};
  1018.     font-family: 'Roboto Slab', serif;
  1019.     padding-bottom: 20px;
  1020.     font-size: 1.5em;
  1021.     font-weight: 700;
  1022.     line-height: 200%;
  1023.     position: relative;
  1024.     line-height: 120%;
  1025.     transition: 0.6s;
  1026. }
  1027.  
  1028. body.night .tag-section h2 {
  1029.     color: var(--posts-title-night)!important;
  1030.     transition: 0.6s;
  1031. }
  1032.  
  1033. .tag-section h2:before {
  1034.     content: '';
  1035.     position: absolute;
  1036.     top: 100%;
  1037.     left: 0;
  1038.     width: 10%;
  1039.     height: 2px;
  1040.     background-color: {color:accent};
  1041. }
  1042.  
  1043. .tag-container h3 {
  1044.     font-size: 1.1em;
  1045.     color: {color:accent};
  1046.     margin-top: 30px;
  1047.     transition: 0.6s;
  1048.     padding-left: 20px;
  1049.     transition: 0.6s;
  1050. }
  1051.  
  1052. body.night .tag-container h3 {
  1053.     color: var(--accent-night)!important;
  1054.     transition: 0.6s;
  1055. }
  1056.  
  1057. .tag-contents {
  1058.     margin-top: 20px;
  1059.     display: flex;
  1060.     flex-wrap: wrap;
  1061.     justify-content: space-between;
  1062. }
  1063.  
  1064. .tag-contents a {
  1065.     display: inline-block;
  1066.     margin: 10px 5px;
  1067.     width: 30%;
  1068.     text-align: center;
  1069. }
  1070.  
  1071. /*----------TEXT/CAPTION CONTAINER----------*/
  1072.  
  1073. .photo, .video, .photo-slideshow, .audiop {
  1074.     padding: {select:Post Padding}px;
  1075. }
  1076.  
  1077. .faqp, .aboutp, .tagp {
  1078.     padding: 20px;
  1079. }
  1080.  
  1081. .caption {
  1082.     text-align: {select:text align};
  1083. }
  1084.  
  1085. .caption figcaption {
  1086.     padding: 15px;
  1087. }
  1088.  
  1089. figcaption p {
  1090.     margin: 5px 0 0;
  1091. }
  1092.  
  1093. .caption img {
  1094.     max-width: 100%;
  1095.     height: auto;
  1096. }
  1097.  
  1098. .reblog-list {
  1099.     padding: 0 10px;
  1100. }
  1101.  
  1102. .reblog-header {
  1103.     padding: 20px 15px 0 15px;
  1104. }
  1105.  
  1106. .reblog-header img {
  1107.     width: 25px;
  1108.     height: 25px;
  1109.     display: inline-block;
  1110.     vertical-align: middle;
  1111.     margin-right: 10px;
  1112.     border-radius: 100%;
  1113. }
  1114.  
  1115. .inactive, .user, .deactivated {
  1116.     font-weight: 700;
  1117.     color: {color:links};
  1118.     text-align: center;
  1119.     transition: 0.6s;
  1120. }
  1121.  
  1122. body.night .inactive, body.night .user, body.night .deactivated {
  1123.     color: var(--links-night)!important;
  1124.     transition: 0.6s;
  1125. }
  1126.  
  1127. .user:hover {
  1128.     color: {color:link hover};
  1129.     transition: 0.6s;
  1130. }
  1131.  
  1132. body.night .user:hover {
  1133.     color: var(--link-hover-night)!important;
  1134.     transition: 0.5s;
  1135. }
  1136.  
  1137. .reblog-content {
  1138.     padding: 5px 15px;
  1139. }
  1140.  
  1141. .read_more {
  1142.     padding: 2px 10px;
  1143.     font-weight: 700;
  1144.     border-radius: 20px;
  1145.     color: {color:accented text};
  1146.     background-color: {color:accent};
  1147.     border: 2px solid transparent;
  1148. }
  1149.  
  1150. .read_more:hover {
  1151.     background-color: transparent;
  1152.     color: {color:links};
  1153.     border: 2px solid {color:accent};
  1154. }
  1155.  
  1156. .npf_inst, #npf_a0rsv {
  1157.     margin-bottom: 20px;
  1158. }
  1159.  
  1160. .npf_inst.photo-origin, #npf_wmw57 {
  1161.     padding-top: 10px;
  1162. }
  1163.  
  1164. .soundcloud_audio_player {
  1165.     max-height:116px!important;
  1166. }
  1167.  
  1168. .spotify_audio_player {
  1169.     max-height:80px!important;
  1170. }
  1171.  
  1172. /*----------POST INFO & PERMALINKS----------*/
  1173.  
  1174. #perma-tall {
  1175.    position: absolute;
  1176.     right: calc(0px - 60px);
  1177.     width: 60px;
  1178.     height: 100%;
  1179.     background-color: {color:posts};
  1180.     display: flex;
  1181.     flex-direction: column;
  1182.     justify-content: space-between;
  1183.     align-items: center;
  1184.     transition: 0.6s;
  1185. }
  1186.  
  1187. body.night #perma-tall {
  1188.     background-color: var(--posts-background-night)!important;
  1189.     transition: 0.6s;
  1190. }
  1191.  
  1192. .date-line {
  1193.     position: absolute;
  1194.     width: 1px;
  1195.     height: 100%;
  1196.     background-color: {color:post borders};
  1197.     transition: 0.6s;
  1198. }
  1199.  
  1200. body.night .date-line {
  1201.     transition: 0.6s;
  1202.     background-color: var(--post-borders-night)!important;
  1203. }
  1204.  
  1205. .date-box {
  1206.     z-index: 5;
  1207. }
  1208.  
  1209. .date {
  1210.     width: 60px;
  1211.     height: 60px;
  1212.     background-color: {color:permalink background};
  1213.     text-align: center;
  1214.     padding: 6px 10px 10px;
  1215.     box-sizing: border-box;
  1216.     transition: 0.6s;
  1217. }
  1218.  
  1219. body.night .date {
  1220.     background-color: var(--accent-night)!important;
  1221.     transition: 0.6s;
  1222. }
  1223.  
  1224. .date span {
  1225.     font-size: 0.7em;
  1226.     font-weight: 400;
  1227. }
  1228.  
  1229. .date a {
  1230.     font-size: 1.2em;
  1231.     font-weight: 700;
  1232.     line-height: 18px;
  1233.     color: {color:permalink};
  1234.     transition: 0.6s;
  1235. }
  1236.  
  1237. body.night .date a {
  1238.     color: var(--accented-text-night)!important;
  1239.     transition: 0.6s;
  1240. }
  1241.  
  1242. .date a:hover {
  1243.     color: {color:permalink hover};
  1244.     transition: 0.6s;
  1245. }
  1246.  
  1247. body.night .date a:hover {
  1248.     color: var(--permalink-hover-night)!important;
  1249.     transition: 0.6s;
  1250. }
  1251.  
  1252. .controls {
  1253.     background-color: {color:like and reblog background};
  1254.     transition: 0.6s;
  1255. }
  1256.  
  1257. body.night .controls {
  1258.     background-color: var(--permalink-background-night)!important;
  1259.     transition: 0.6s;
  1260. }
  1261.  
  1262. .controls a {
  1263.     position:relative;
  1264.     display:inline-block;
  1265. }
  1266.  
  1267. .controls a:hover {
  1268.     color: {color:like and reblog hover};
  1269.     transition: 0.6s;
  1270. }
  1271.  
  1272. body.night .controls a:hover {
  1273.     color: var(--link-hover-night)!important;
  1274. }
  1275.  
  1276. .bx-sync, .bx-heart {
  1277.     width: 16px;
  1278.     height: 18px;
  1279.     font-size: 20px;
  1280.     padding: 5px;
  1281.     color: {color:like and reblog};
  1282.     text-align: center;
  1283.     transition: 0.6s;
  1284. }
  1285.  
  1286. body.night .bx-sync, body.night .bx-heart {
  1287.     color: var(--links-night)!important;
  1288.     transition: 0.6s;
  1289. }
  1290.  
  1291. .bx-sync:hover, .bx-heart:hover {
  1292.     color: {color:like and reblog hover};
  1293.     transition: 0.6s;
  1294. }
  1295.  
  1296. body.night .bx-sync:hover, body.night .bx-heart:hover {
  1297.     color: var(--link-hover-night)!important;
  1298.     transition: 0.6s;
  1299. }
  1300.  
  1301. .controls .like .liked + .bx-heart {
  1302.     opacity: 1;
  1303. }
  1304.  
  1305. .controls .like .liked + .bx-heart {
  1306.     color: #E5DBC0;
  1307. }
  1308.  
  1309. .controls .like .like_button iframe {
  1310.     position:absolute;
  1311.     top: -1px;
  1312.     left:0;
  1313.     bottom:0;
  1314.     right:0;
  1315.     width:100%;
  1316.     height:100%;
  1317.     z-index:2;
  1318.     opacity:0.000001;
  1319. }
  1320.  
  1321. .note-box {
  1322.     position: relative;
  1323.     z-index: 2;
  1324.     background-color: {color:posts};
  1325.     padding: 20px 0;
  1326.     transition: 0.6s;
  1327. }
  1328.  
  1329. body.night .note-box {
  1330.     background-color: var(--posts-background-night)!important;
  1331. }
  1332.  
  1333. .note-box a {
  1334.     font-weight: 700;
  1335.     font-size: 16px;
  1336.     writing-mode: vertical-lr;
  1337.     opacity: 0.3;
  1338.     color: {color:links};
  1339.     transition: 0.6s;
  1340. }
  1341.  
  1342. body.night .note-box a {
  1343.     color: var(links-night)!important;
  1344.     transition: 0.6s;
  1345. }
  1346.  
  1347. .note-box a:hover {
  1348.     letter-spacing: 2px;
  1349. }
  1350.  
  1351. .source-box {
  1352.     width: 60px;
  1353.     position: relative;
  1354.     z-index: 2;
  1355.     background-color: {color:source background};
  1356.     padding: 5px;
  1357.     box-sizing: border-box;
  1358.     text-align: center;
  1359.     font-weight: 700;
  1360.     transition: 0.6s;
  1361. }
  1362.  
  1363. body.night .source-box {
  1364.     background-color: var(--permalink-background-night)!important;
  1365.     transition: 0.6s;
  1366. }
  1367.  
  1368. .source-box a {
  1369.     color: {color:source};
  1370.     transition: 0.6s;
  1371. }
  1372.  
  1373. body.night .source-box a {
  1374.     color: var(--links-night)!impportant;
  1375.     transition: 0.6s;
  1376. }
  1377.  
  1378. .source-box a:hover {
  1379.     color: {color:source hover};
  1380.     transition: 0.6s;
  1381. }
  1382.  
  1383. body.night .source-box a:hover {
  1384.     color: var(link-hover-night)!important;
  1385. }
  1386.  
  1387. /*--------POST TAGS--------*/
  1388.  
  1389. .tag-box {
  1390.     position: relative;
  1391. }
  1392.  
  1393. .bx-purchase-tag {
  1394.     position: absolute;
  1395.     right: -60px;
  1396.     bottom: -43px;
  1397.     height: 43px;
  1398.     width: 60px;
  1399.     font-size: 20px;
  1400.     background-color: {color:tag icon background};
  1401.     color: {color:tag icon};
  1402.     text-align: center;
  1403.     padding: 5px;
  1404.     box-sizing: border-box;
  1405.     line-height: 150%;
  1406.     transition: 0.6s;
  1407. }
  1408.  
  1409. body.night .bx-purchase-tag {
  1410.     background-color: var(--accent-night)!important;
  1411.     color: var(--accented-text-night)!important;
  1412.     transition: 0.6s;
  1413. }
  1414.  
  1415. .post_tags {
  1416.     padding: 10px 20px;
  1417.     box-sizing: border-box;
  1418.     white-space: nowrap;
  1419.     overflow: hidden;
  1420.     position: absolute;
  1421.     line-height: 22px;
  1422.     width: {select:post size}px;
  1423.     height: 43px;
  1424.     font-size: 12px;
  1425.     background-color: {color:tag bar background};
  1426.     transition: 0.6s;
  1427. }
  1428.  
  1429. body.night .post_tags {
  1430.     background-color: var(--permalink-background-night)!important;
  1431.     transition: 0.6s;
  1432. }
  1433.  
  1434. .post_tags.draggable .post_tags_inner {
  1435.     cursor: col-resize;
  1436.     -webkit-touch-callout: none;
  1437.     -webkit-user-select: none;
  1438.     -khtml-user-select: none;
  1439.     -moz-user-select: none;
  1440.     -ms-user-select: none;
  1441.     user-select: none;
  1442. }
  1443.  
  1444. .post_tags_inner {
  1445.     float: left;
  1446.     position: relative;
  1447.     padding: 0px 20px 0px 0;
  1448. }
  1449.  
  1450. .post_tags a,
  1451. .post_tags .post_tag {
  1452.     display: inline-block;
  1453.     margin-left: 3px;
  1454.     color: {color:tag bar};
  1455.     font-size: 12px;
  1456.     transition: 0.6s;
  1457. }
  1458.  
  1459. body.night .post_tags a,
  1460. body.night .post_tags body.night .post_tag {
  1461.     color: var(--permalink-night)!important;
  1462.     transition: 0.6s;
  1463. }
  1464.  
  1465. .post_tags:after {
  1466.     content: '';
  1467.     position: absolute;
  1468.     right: 0;
  1469.     bottom: 0;
  1470.     width: 50px;
  1471.     height: 40px;
  1472. }
  1473.  
  1474. .post_tags a:hover,
  1475. .post_tags .post_tag:hover,
  1476. .post_tags a:focus,
  1477. .post_tags .post_tag:focus,
  1478. .post_tags a:active,
  1479. .post_tags .post_tag:active {color:{color:tag bar hover};transition:0.6s;}
  1480.  
  1481. body.night .post_tags a:hover,
  1482. body.night .post_tags body.night .post_tag:hover,
  1483. body.night .post_tags a:focus,
  1484. body.night .post_tags body.night .post_tag:focus,
  1485. body.night .post_tags a:active,
  1486. body.night .post_tags body.night .post_tag:active {color:var(--link-hover-night)!important;transition:0.6s;}
  1487.  
  1488. /*----------PERMALINK PAGE----------*/
  1489.  
  1490. #perma {
  1491.     width: 540px;
  1492.     padding: 10px 5px;
  1493.     margin: 0 auto;
  1494.     background-color: {color:posts};
  1495.     text-align: center;
  1496.     text-transform: lowercase;
  1497.     box-sizing: border-box;
  1498.     position: relative;
  1499.     transition: 0.6s;
  1500. }
  1501.  
  1502. body.night #perma {
  1503.     background-color: var(--posts-background-night)!important;
  1504.     transition: 0.6s;
  1505. }
  1506.  
  1507. #perma span {
  1508.     font-weight: 700;
  1509.     text-transform: uppercase;
  1510. }
  1511.  
  1512. #permatg {
  1513.     width: 540px;
  1514.     padding: 10px;
  1515.     margin: 10px auto 10px;
  1516.     background-color: {color:posts};
  1517.     text-align: center;
  1518.     text-transform: lowercase;
  1519.     box-sizing: border-box;
  1520.     position: relative;
  1521.     transition: 0.6s;
  1522. }
  1523.  
  1524. body.night #permatg  {
  1525.     background-color: var(--posts-background-night)!important;
  1526.     transition: 0.6s;
  1527. }
  1528.  
  1529. #permatg a {
  1530.     display: inline-block;
  1531.     margin: 0 5px;
  1532.     color: {color:links};
  1533. }
  1534.  
  1535. #permatg a:hover {
  1536.     color: {color:link hover};
  1537. }
  1538.  
  1539. .rb {
  1540.     position: absolute;
  1541.     left: 45%;
  1542.     margin-top: 27px;
  1543.     display: inline-block;
  1544.     z-index: 1;
  1545. }
  1546.  
  1547. .root img, .via img {
  1548.     border-radius: 100%;
  1549.     padding: 3px;
  1550.     margin-right: 2px;
  1551.     background-color: {color:accent};
  1552. }
  1553.  
  1554. #notecontainer {
  1555.     margin: 10px auto;
  1556.     width: 540px;
  1557.     background-color: {color:posts};
  1558.     position: relative;
  1559.     padding: 10px;
  1560.     box-sizing: border-box;
  1561.     transition: 0.6s;
  1562. }
  1563.  
  1564. body.night #notecontainer  {
  1565.     background-color: var(--posts-background-night)!important;
  1566.     transition: 0.6s;
  1567. }
  1568.  
  1569. #notecontainer ol.notes {
  1570.     list-style-type: none;
  1571.     margin: 0;
  1572.     padding: 0;
  1573.     font-size: {text:body font}px;
  1574. }
  1575.  
  1576. #notecontainer ol.notes li.note {
  1577.     padding: 15px;
  1578. }
  1579.  
  1580. #notecontainer img.avatar {
  1581.     margin-right: 10px;
  1582.     vertical-align: middle;
  1583.     width: 25px;
  1584.     height: 25px;
  1585.     border-radius: 50%;
  1586. }
  1587.  
  1588. #permpage {
  1589.     text-align: center;
  1590.     margin: 50px 0;
  1591. }
  1592.  
  1593. .bx-chevron-left-square, .bx-chevron-right-square {
  1594.     padding: 5px;
  1595.     font-size: 20px;
  1596.     width: 20px;
  1597.     height: 20px;
  1598.     line-height: 20px;
  1599.     border-radius: 50%;
  1600.     display: inline-block;
  1601.     margin: 0 10px;
  1602.     background-color: {color:accent};
  1603.     color: {color:accented text};
  1604.     border: 2px solid transparent;
  1605.     -webkit-transition: all 0.6s ease;
  1606.     -moz-transition: all 0.6s ease;
  1607.     -o-transition: all 0.6s ease;
  1608.     transition: all 0.6s ease;
  1609.     transition: 0.6s;
  1610. }
  1611.  
  1612. body.night .bx-chevron-left-square, body.night .bx-chevron-right-square {
  1613.     color: var(--links-night)!important;
  1614.     transition: 0.6s;
  1615. }
  1616.  
  1617. .bx-chevron-left-square:hover, .bx-chevron-right-square:hover {
  1618.     background-color: transparent;
  1619.     border: 2px solid {color:accent};
  1620.     color: {color:links};
  1621.     -webkit-transition: all 0.6s ease;
  1622.     -moz-transition: all 0.6s ease;
  1623.     -o-transition: all 0.6s ease;
  1624.     transition: all 0.6s ease;
  1625. }
  1626.  
  1627. /*----------TUMBLR TEXT/LINKS----------*/  
  1628.  
  1629. .posts .title, .posts .link {
  1630.     color: {color:post title};
  1631.     font-family: 'Roboto Slab', serif;
  1632.     padding: 20px 20px 25px;
  1633.     font-size: 1.5em;
  1634.     font-weight: 700;
  1635.     line-height: 200%;
  1636.     position: relative;
  1637.     line-height: 120%;
  1638.     transition: 0.6s;
  1639. }
  1640.  
  1641. body.night .posts .title, body.night .posts .link {
  1642.     color: var(--posts-title-night)!important;
  1643.     transition: 0.6s;
  1644. }
  1645.  
  1646. .posts .title:before, .posts .link:before {
  1647.     content: '';
  1648.     position: absolute;
  1649.     top: 65px;
  1650.     left: 20px;
  1651.     width: 10%;
  1652.     height: 2px;
  1653.     background-color: {color:accent};
  1654. }
  1655.  
  1656. .posts .link a {
  1657.     color: {color:post title};
  1658.     -webkit-transition: 0.8s ease;
  1659.     -moz-transition: 0.8s ease;
  1660.     -o-transition: 0.8s ease;
  1661.     transition: 0.8s ease;
  1662. }
  1663.  
  1664. .posts .link a:hover {
  1665.     color: {color:link hover};
  1666. }
  1667.  
  1668. body.night .posts .link a {
  1669.     color: var(--links-night)!important;
  1670.     transition: 0.6s;
  1671. }
  1672.  
  1673. body.night .posts .link a:hover {
  1674.     color: var(--link-hover-night)!important;
  1675.     transition: 0.6s;
  1676. }
  1677.  
  1678. /*----------TUMBLR QUOTES----------*/  
  1679.  
  1680. .qt {
  1681.     padding: 20px 20px 0;
  1682.     display: flex;
  1683.     flex-direction: row;
  1684.     justify-content: space-between;
  1685. }
  1686.  
  1687. .quote {
  1688.     line-height: 150%;
  1689.     font-size: 1.5em;
  1690.     padding: 20px;
  1691.     padding-left: 20px;
  1692.     border-left: 1px solid {color:post borders};
  1693.     font-family: 'Roboto Slab', serif;
  1694. }
  1695.  
  1696. body.night .quote {
  1697.     border-left: 1px solid var(--post-borders-night);
  1698. }
  1699.  
  1700. .bxs-quote-alt-left {
  1701.     border: 2px solid {color:accent};
  1702.     color: {color:links};
  1703.     padding: 5px;
  1704.     font-size: 1.2em;
  1705.     align-self: center;
  1706.     border-radius: 5px;
  1707.     transition: 0.6s;
  1708. }
  1709.  
  1710. body.night .bxs-quote-alt-left {
  1711.     color: var(--links-night)!important;
  1712.     transition: 0.6s;
  1713. }
  1714.  
  1715. .quote-box {
  1716.     font-size: 20px;
  1717.     align-self: center;
  1718.     margin-right: 20px;
  1719. }
  1720.  
  1721. .qtsource {
  1722.     padding: 0 20px 20px;
  1723. }
  1724.  
  1725. /*----------TUMBLR AUDIO----------*/
  1726.  
  1727. .audiowrapper {
  1728.     clear: both;
  1729.     background-color: {color:question background};
  1730.     display:flex;
  1731.     transition: 0.6s;
  1732. }
  1733.  
  1734. body.night .audiowrapper {
  1735.     background-color: var(--question-background-night)!important;
  1736.     transition: 0.6s;
  1737. }
  1738.  
  1739. .audio-content {
  1740.      width:25%;
  1741.      padding:10%;
  1742.      position:relative;
  1743. }
  1744.  
  1745. .music_menu {
  1746.     margin:0px;
  1747.     padding:0px;
  1748.     list-style:none;
  1749.     padding: 5%;
  1750.     width: 55%;
  1751.     align-self: center;
  1752.     font-size:18px;
  1753.     font-weight: 700;
  1754.     color: {color:links};
  1755.     transition: 0.6s;
  1756. }
  1757.  
  1758. body.night .music_menu {
  1759.     color: var(--links-night)!important;
  1760.     transition: 0.6s;
  1761. }
  1762.  
  1763. .music_menu  p {
  1764.     margin: 5px 0;
  1765. }
  1766.  
  1767. .music_menu  p:nth-child(2) {
  1768.     font-weight: 400;
  1769.     font-size: 15px;
  1770. }
  1771.    
  1772. .audio_player {
  1773.     width: 69px;
  1774.     height: 0px;
  1775.     padding: 30px 0 60px 20px;
  1776.     background:#f2f2f2;
  1777.     border-radius:50%;
  1778.     margin:0 auto;
  1779.     position: relative;
  1780.     opacity: 0.7;
  1781.     -webkit-transition: 0.8s ease;
  1782.     -moz-transition: 0.8s ease;
  1783.     -o-transition: 0.8s ease;
  1784.     transition: 0.8s ease;
  1785. }
  1786.  
  1787. .audio_player:hover {
  1788.     opacity: 1;
  1789.     -webkit-transition: 0.8s ease;
  1790.     -moz-transition: 0.8s ease;
  1791.     -o-transition: 0.8s ease;
  1792.     transition: 0.8s ease;
  1793. }
  1794.  
  1795. .tumblr_audio_player {
  1796.     width:33px;
  1797.     overflow: hidden;
  1798.     position: absolute;
  1799.     top: 36%;
  1800.     left: 33%;
  1801. }
  1802.  
  1803. .info {padding:2%;}
  1804.  
  1805. /*----------TUMBLR QUESTION/ANSWER----------*/
  1806.  
  1807. #askcont, #replycont {
  1808.     padding: 15px;
  1809.     display: flex;
  1810.     flex-direction: column;
  1811. }
  1812.  
  1813. #askcont img {
  1814.     float:left;
  1815.     display: inline-block;
  1816.     vertical-align: middle;
  1817.     margin-right: 20px;
  1818.     width: 40px;
  1819.     height: 40px;
  1820.     border-radius: 50%;
  1821.     border: 5px solid {color:accent};
  1822. }
  1823.  
  1824. #replycont img {
  1825.     float: right;
  1826.     display: inline-block;
  1827.     vertical-align: middle;
  1828.     margin-left: 20px;
  1829.     width: 40px;
  1830.     height: 40px;
  1831.     border-radius: 50%;
  1832.     border: 5px solid {color:accent};
  1833. }
  1834.  
  1835. #asker {
  1836.     text-transform: lowercase;
  1837.     color: {color:links};
  1838.     margin: 10px 0 20px;
  1839.     display: flex;
  1840.     transition: 0.6s;
  1841. }
  1842.  
  1843. body.night #asker {
  1844.     color: var(--links-night)!important;
  1845.     transition: 0.6s;
  1846. }
  1847.  
  1848. #asking, #replying {
  1849.     align-self: center;
  1850.     line-height: 20px;
  1851. }
  1852.  
  1853. #replier {
  1854.     text-transform: lowercase;
  1855.     color: {color:links};
  1856.     margin-bottom: 20px;
  1857.     display: flex;
  1858.     justify-content: flex-end;
  1859.     transition: 0.6s;
  1860. }
  1861.  
  1862. body.night #replier {
  1863.     color: var(--links-night)!important;
  1864.     transition: 0.6s;
  1865. }
  1866.  
  1867. #replying {
  1868.     text-align: right;
  1869. }
  1870.  
  1871. #asker a, #replier a {
  1872.     color: {color:links};
  1873.     font-weight: 700;
  1874.     text-align: capitalize;
  1875.     font-size: 1.1em;
  1876.     transition: 0.6s;
  1877. }
  1878.  
  1879. body.night #asker a, body.night #replier a  {
  1880.     color: var(--links-night)!important;
  1881.     transition: 0.6s;
  1882. }
  1883.  
  1884. #asker a:hover, #replier a:hover {
  1885.     color: {color:links};
  1886.     transition: 0.6s;
  1887. }
  1888.  
  1889. body.night #asker a:hover , body.night #replier a:hover {
  1890.     color: var(--link-hover-night)!important;
  1891.     transition: 0.6s;
  1892. }
  1893.  
  1894. .asker-text, .replier-text {
  1895.     color: {color:text};
  1896.     transition: 0.6s;
  1897. }
  1898.  
  1899. body.night .asker-text, body.night .replier-text {
  1900.     color: var(--text-night)!important;
  1901.     transition: 0.6s;
  1902. }
  1903.  
  1904. .question {
  1905.     display: block;
  1906.     text-align: justify;
  1907.     padding: 10px 15px;
  1908.     background-color: {color:question background};
  1909.     color: {color:question};
  1910.     transition: 0.6s;
  1911. }
  1912.  
  1913. body.night .question {
  1914.     color: var(--question-night)!important;
  1915.     background-color: var(--question-background-night)!important;
  1916.     transition: 0.6s;
  1917. }
  1918.  
  1919. .answer {
  1920.     padding: 15px;
  1921.     background-color: {color:question background};
  1922.     color: {color:question};
  1923.     transition: 0.6s;
  1924. }
  1925.  
  1926. body.night .answer {
  1927.     color: var(--question-night)!important;
  1928.     background-color: var(--question-background-night)!important;
  1929.     transition: 0.6s;
  1930. }
  1931.  
  1932. .question p {margin: 0!important;}
  1933. .answer p {margin: 0!important;}
  1934. .asker-link {font-weight: 700;}
  1935. .answer img {margin-top: 15px;}
  1936. .answer .npf_inst {margin-bottom: 0;}
  1937.  
  1938. /*----------TUMBLR CHAT----------*/
  1939.  
  1940. .chatp {
  1941.     padding: 20px;
  1942. }
  1943.  
  1944. .chat .line {
  1945.     margin-top: 0px;
  1946.     padding: 20px;
  1947.     border-bottom: 1px solid {color:post borders};
  1948. }
  1949.  
  1950. body.night .chat .line {
  1951.     border-bottom: 1px solid var(--post-borders-night)!important;
  1952. }
  1953.  
  1954. .chat .line:last-of-type {
  1955.     margin-bottom: 0px;
  1956.     border-bottom: none;
  1957. }
  1958.  
  1959. .chat .label {
  1960.     text-transform: capitalize;
  1961. }
  1962.  
  1963. .line:nth-child(odd) .label b {
  1964.     color: {color:chat odd};
  1965.     font-weight: 700;
  1966.     margin-right: 5px;
  1967.     font-size: 1.1em;
  1968.     transition: 0.6s;
  1969. }
  1970.  
  1971. body.night .line:nth-child(odd) .label b {
  1972.     color: var(--bold-night)!important;
  1973.     transition: 0.6s;
  1974. }
  1975.  
  1976. .line:nth-child(even) .label b {
  1977.     color: {color:chat even};
  1978.     font-weight: 700;
  1979.     margin-right: 5px;
  1980.     font-size: 1.1em;
  1981.     transition: 0.6s;
  1982. }
  1983.  
  1984. body.night .line:nth-child(even) .label b {
  1985.     color: var(--links-night)!important;
  1986.     transition: 0.6s;
  1987. }
  1988.  
  1989. /*----------LINK BAR----------*/
  1990.  
  1991. .link-bar {
  1992.     width: 50%;
  1993.     height: 60px;
  1994.     background-color: {color:banner background};
  1995.     position: fixed;
  1996.     top: 0;
  1997.     right: 0;
  1998.     z-index: 9;
  1999.     display: flex;
  2000.     justify-content: space-between;
  2001.     align-items: center;
  2002.     padding-right: 20px;
  2003.     box-sizing: border-box;
  2004.     transition: 0.6s;
  2005. }
  2006.  
  2007. body.night .link-bar  {
  2008.     background-color: var(--posts-background-night)!important;
  2009.     transition: 0.6s;
  2010. }
  2011.  
  2012. .bx-sun, .bx-moon {
  2013.     background-color: {color:accent};
  2014.     color: {color:accented text};
  2015.     padding: 20px;
  2016.     width: 60px;
  2017.     height: 60px;
  2018.     box-sizing: border-box;
  2019.     text-align: center;
  2020.     font-size: 20px;
  2021.     transition:.6s;
  2022.     cursor: pointer;
  2023. }
  2024.  
  2025. body.night .bx-sun, body.night .bx-moon {
  2026.     color: var(--accented-text-night)!important;
  2027.     transition: 0.6s;
  2028. }
  2029.  
  2030. #small-header {
  2031.     display: none;
  2032. }
  2033.  
  2034. /*----------TUMBLR LINKS----------*/
  2035.  
  2036. .homelinks {
  2037.     color: {color:banner text};
  2038.     transition:.6s;
  2039. }
  2040.  
  2041. body.night .homelinks {
  2042.     color: var(--links-night)!important;
  2043.     transition: 0.6s;
  2044. }
  2045.  
  2046. .small-links {
  2047.     display: none;
  2048. }
  2049.  
  2050. .homelinks a:hover {
  2051.     color: {color:banner hover};
  2052.     transition:.6s;
  2053. }
  2054.  
  2055. body.night .homelinks a:hover {
  2056.     color: var(--link-hover-night)!important;
  2057.     transition: 0.6s;
  2058. }
  2059.  
  2060. .homelinks ul li {
  2061.     display: inline-block;
  2062.     margin: 0 15px;
  2063.     font-weight: 700;
  2064.     color: {color:banner text};
  2065.     list-style: none;
  2066.     cursor: pointer;
  2067.     border-bottom: 2px solid transparent;
  2068.     transition:.6s;
  2069. }
  2070.  
  2071. body.night .homelinks ul li {
  2072.     color: var(--links-night)!important;
  2073.     transition: 0.6s;
  2074. }
  2075.  
  2076. .homelinks ul li:hover {
  2077.     color: {color:link hover};
  2078.     transition:.6s;
  2079. }
  2080.  
  2081. body.night .homelinks ul li:hover {
  2082.     color: var(--link-hover-night)!important;
  2083.     transition: 0.6s;
  2084. }
  2085.  
  2086. .homelinks ul li.active {
  2087.     border-bottom: 2px solid {color:accent};
  2088. }
  2089.  
  2090. /*----------FADE IN TABS----------*/
  2091.  
  2092. .hide {
  2093.     display: none;
  2094.     -webkit-animation: fadeEffect 1.5s;
  2095.     animation: fadeEffect 1.5s;
  2096. }
  2097.  
  2098. .active {
  2099.     display: block;
  2100.      -webkit-animation: fadeEffect 1.5s;
  2101.     animation: fadeEffect 1.5s;
  2102. }
  2103.  
  2104. @-webkit-keyframes fadeEffect {
  2105.   from {opacity: 0;}
  2106.   to {opacity: 1;}
  2107. }
  2108.  
  2109. @keyframes fadeEffect {
  2110.   from {opacity: 0;}
  2111.   to {opacity: 1;}
  2112. }
  2113.  
  2114. /*----------SIDEBAR CONTAINER----------*/
  2115.  
  2116. #sidebar-cont {
  2117.     width: 50%;
  2118.     height: 100vh;
  2119.     position: fixed;
  2120.     left: 0;
  2121.     display: flex;
  2122.     justify-content: center;
  2123.     align-items: center;
  2124.     overflow: hidden;
  2125.     z-index: 2;
  2126.     box-sizing: border-box;
  2127. }
  2128.  
  2129. #sidebar-tall {
  2130.     width: 100%;
  2131.     height: 100%;
  2132.     display: flex;
  2133.     flex-direction: row;
  2134.     box-sizing: border-box;
  2135. }
  2136.  
  2137. /*----------SIDEBAR IMAGE----------*/
  2138.  
  2139. #sidebar-image {
  2140.     width: 40%;
  2141.     height: 100%;
  2142.     overflow: hidden;
  2143.     background-color: {color:accent};
  2144. }
  2145.  
  2146. #sidebar-image img {
  2147.     width: 100%;
  2148.     height: auto;
  2149. }
  2150.  
  2151. #sidebar-content {
  2152.     width: 60%;
  2153.     height: 100%;
  2154.     overflow: hidden;
  2155.     display: flex;
  2156.     flex-direction: column;
  2157.     background-color: {color:posts};
  2158.     transition:.6s;
  2159. }
  2160.  
  2161. body.night #sidebar-content {
  2162.     background-color: var(--posts-background-night)!important;
  2163.     transition: 0.6s;
  2164. }
  2165.  
  2166. #sidebar-info {
  2167.     height: 70%;
  2168.     padding: 40px;
  2169.     box-sizing: border-box;
  2170.     display: flex;
  2171.     flex-direction: column;
  2172.     justify-content: center;
  2173. }
  2174.  
  2175. .sidebar-title {
  2176.     font-size: 2.5em;
  2177.     font-family: 'Roboto Slab', serif;
  2178.     color: {color:sidebar title};
  2179.     font-weight: 700;
  2180.     padding-bottom: 10px;
  2181.     position: relative;
  2182.     line-height: 120%;
  2183.     transition:.6s;
  2184. }
  2185.  
  2186. body.night .sidebar-title {
  2187.     color: var(--posts-title-night)!important;
  2188.     transition: 0.6s;
  2189. }
  2190.  
  2191. .sidebar-title:before {
  2192.     content: '';
  2193.     position: absolute;
  2194.     top: 100%;
  2195.     left: 0;
  2196.     width: 10%;
  2197.     height: 2px;
  2198.     background-color: {color:accent};
  2199. }
  2200.  
  2201. .sidebar-description {
  2202.     margin-top: 30px;
  2203.     color: {color:sidebar description};
  2204.     text-align: {select:description text align};
  2205.     transition:.6s;
  2206. }
  2207.  
  2208. body.night .sidebar-description {
  2209.     color: var(--text-night)!important;
  2210.     transition: 0.6s;
  2211. }
  2212.  
  2213. /*----------NAVIGATION LINKS----------*/
  2214.  
  2215. #navigation {
  2216.     background-color: {color:navigation background};
  2217.     height: 30%;
  2218.     padding: 40px;
  2219.     box-sizing: border-box;
  2220.     transition: 0.6s;
  2221. }
  2222.  
  2223. body.night #navigation {
  2224.     background-color: var(--navigation-background-night)!important;
  2225.     transition: 0.6s;
  2226. }
  2227.  
  2228. #navigation h2 {
  2229.     color: {color:navigation};
  2230.     margin: 0;
  2231.     position: relative;
  2232.     padding-bottom: 10px;
  2233.     transition:.6s;
  2234. }
  2235.  
  2236. body.night #navigation h2 {
  2237.     color: var(--links-night)!important;
  2238.     transition: 0.6s;
  2239. }
  2240.  
  2241. #navigation h2:before {
  2242.     content: '';
  2243.     position: absolute;
  2244.     top: 100%;
  2245.     left: 0;
  2246.     width: 10%;
  2247.     height: 2px;
  2248.     background-color: {color:accent};
  2249.     transition:.6s;
  2250. }
  2251.  
  2252. body.night #navigation h2:before {
  2253.     background-color: var(--accent-night)!important;
  2254.     transition: 0.6s;
  2255. }
  2256.  
  2257. .small-navigation {
  2258.     display: none;
  2259. }
  2260.  
  2261. .morelinks {
  2262.     margin-top: 30px;
  2263.     display: flex;
  2264.     flex-wrap: wrap;
  2265.     justify-content: center;
  2266.     align-items: center;
  2267. }
  2268.    
  2269. .morelinks a {
  2270.     width: 20%;
  2271.     margin: 2px 5px;
  2272.     color: {color:navigation};
  2273.     padding: 5px 15px;
  2274.     text-align: center;
  2275.     transition:.6s;
  2276. }
  2277.  
  2278. body.night .morelinks a {
  2279.     color: var(--links-night)!important;
  2280.     transition: 0.6s;
  2281. }
  2282.    
  2283. .morelinks a:hover {
  2284.     color: {color:navigation hover};
  2285.     transition: 0.6s;
  2286.     transition:.6s;
  2287. }
  2288.  
  2289. body.night .morelinks a:hover {
  2290.     background-color: transparent;
  2291.     color: var(--link-hover-night)!important;
  2292.     transition: 0.6s;
  2293. }
  2294.  
  2295. /*----------RESPONSIVE DESIGN (DO NOT TOUCH)----------*/
  2296.  
  2297. @media screen and (max-width: 1170px) {
  2298.    
  2299.     html, body {
  2300.         overflow-x: hidden;
  2301.     }
  2302.    
  2303.     .tmblr-iframe--app-cta-button {
  2304.         display: none!important;
  2305.     }
  2306.    
  2307.     #sidebar-cont, .homelinks {
  2308.         display: none;
  2309.     }
  2310.    
  2311.     .link-bar {
  2312.         width: 100%;
  2313.         left: 0;
  2314.     }
  2315.    
  2316.     .wrap {
  2317.         display: block;
  2318.     }
  2319.    
  2320.     .posts-section {
  2321.         position: relative;
  2322.         width: 100%;
  2323.     }
  2324.    
  2325.     #content-content-box {
  2326.         margin: 100px auto;
  2327.         width: 90%;
  2328.     }
  2329.    
  2330.     .posts  {
  2331.         width: 90%;
  2332.         {block:PermalinkPage}
  2333.         width: 100%;
  2334.         {/block:PermalinkPage}
  2335.     }
  2336.    
  2337.     #perma, #permatg, #notecontainer {
  2338.         width: 100%;
  2339.     }
  2340.    
  2341.     .post_tags {
  2342.         width: 100%;
  2343.     }
  2344.    
  2345.     .small-links {
  2346.         display: block;
  2347.     }
  2348.    
  2349.     .small-links a {
  2350.         display: inline-block;
  2351.         margin: 0 5px;
  2352.         font-weight: 700;
  2353.         transition: 0.6s;
  2354.     }
  2355.    
  2356.     body.night .small-links a {
  2357.         color: var(--links-night)!important;
  2358.         transition: 0.6s;
  2359.     }
  2360.    
  2361.     .small-links a:hover {
  2362.         color: {color:link hover};
  2363.         transition: 0.6s;
  2364.     }
  2365.    
  2366.     body.night .small-links a:hover {
  2367.         color: var(--link-hover-night)!important;
  2368.         transition: 0.6s;
  2369.     }
  2370.  
  2371.     #small-header {
  2372.         display: block;
  2373.         position: relative;
  2374.         margin: 150px auto 0;
  2375.         width: 90%;
  2376.     }
  2377.    
  2378.     #small-header-image {
  2379.         width: 100%;
  2380.         overflow: hidden;
  2381.     }
  2382.    
  2383.     #small-header-image img {
  2384.         width: 100%;
  2385.         height: auto;
  2386.     }
  2387.    
  2388.     .small-header-content {
  2389.         padding: 40px;
  2390.         box-sizing: border-box;
  2391.         background-color: {color:posts};
  2392.         transition: 0.6s;
  2393.     }
  2394.    
  2395.      body.night .small-header-content  {
  2396.         background-color: var(--posts-background-night)!important;
  2397.         transition: 0.6s;
  2398.     }
  2399.  
  2400.     .small-header-title {
  2401.         font-size: 2.0em;
  2402.         font-family: 'Roboto Slab', serif;
  2403.         color: {color:sidebar title};
  2404.         font-weight: 700;
  2405.         padding-bottom: 10px;
  2406.         position: relative;
  2407.         line-height: 120%;
  2408.         transition:.6s;
  2409.     }
  2410.  
  2411.     body.night .small-header-title {
  2412.         color: var(--posts-title-night)!important;
  2413.         transition: 0.6s;
  2414.     }
  2415.  
  2416.     .small-header-title:before {
  2417.         content: '';
  2418.         position: absolute;
  2419.         top: 100%;
  2420.         left: 0;
  2421.         width: 10%;
  2422.         height: 2px;
  2423.         background-color: {color:accent};
  2424.     }
  2425.  
  2426.     .small-header-description {
  2427.         margin-top: 30px;
  2428.         color: {color:sidebar description};
  2429.         text-align: {select:description text align};
  2430.         transition:.6s;
  2431.     }
  2432.  
  2433.     body.night .small-header-description {
  2434.         color: var(--text-night)!important;
  2435.         transition: 0.6s;
  2436.     }
  2437.    
  2438.     .nav-content {
  2439.         margin-top: 120px;
  2440.         transition: 0.6s;
  2441.         background-color: {color:posts};
  2442.         padding: 20px 40px;
  2443.         box-sizing: border-box;
  2444.     }
  2445.     body.night .nav-content {
  2446.         background-color: var(--posts-background-night)!important;
  2447.         transition: 0.6s;
  2448.     }
  2449.    
  2450.     .nav-content h2 {
  2451.         font-size: 1.4em;
  2452.         font-family: 'Roboto Slab', serif;
  2453.         color: {color:sidebar title};
  2454.         font-weight: 700;
  2455.         padding-bottom: 10px;
  2456.         position: relative;
  2457.         line-height: 120%;
  2458.         transition:.6s;
  2459.     }
  2460.    
  2461.     .nav-content h2:before {
  2462.         content: '';
  2463.         position: absolute;
  2464.         top: 100%;
  2465.         left: 0;
  2466.         width: 5%;
  2467.         height: 2px;
  2468.         background-color: {color:accent};
  2469.     }
  2470.  
  2471.     body.night .nav-content h2 {
  2472.         color: var(--posts-title-night)!important;
  2473.         transition: 0.6s;
  2474.     }
  2475.    
  2476.     .small-navigation {
  2477.         margin-top: 30px;
  2478.         display: flex;
  2479.         flex-wrap: wrap;
  2480.         justify-content: center;
  2481.         align-items: center;
  2482.     }
  2483.    
  2484.     .small-navigation a {
  2485.         width: 25%;
  2486.         margin: 10px 5px;
  2487.         color: {color:links};
  2488.         text-align: center;
  2489.         padding: 5px 15px;
  2490.         font-weight: 700;
  2491.         transition:.6s;
  2492.     }
  2493.  
  2494.     body.night .small-navigation a {
  2495.         color: var(--links-night)!important;
  2496.         transition: 0.6s;
  2497.     }
  2498.    
  2499.     .small-navigation a:hover {
  2500.         color: {color:link hover};
  2501.         transition: 0.6s;
  2502.         transition:.6s;
  2503.     }
  2504.  
  2505.     body.night .small-navigation a:hover {
  2506.         background-color: transparent;
  2507.         color: var(--link-hover-night)!important;
  2508.         transition: 0.6s;
  2509.     }
  2510.    
  2511.     .date-line {
  2512.         display: none;
  2513.     }
  2514.    
  2515.     #pagination {
  2516.         width: 90%;
  2517.     }
  2518.    
  2519. }
  2520.  
  2521. /*----------THEME CREDIT/DO NOT REMOVE!!!---------*/
  2522.  
  2523. #bottom {
  2524.     bottom: 20px;
  2525.     position: fixed;
  2526.     right: 30px;
  2527.     z-index: 99;
  2528.     display: flex;
  2529. }
  2530.  
  2531. .bxs-chevrons-up, .bx-copyright  {
  2532.     padding: 3px;
  2533.     font-size: 22px;
  2534.     width: 22px;
  2535.     height: 22px;
  2536.     background-color: {color:accent};
  2537.     color: {color:accented text};
  2538.     border-radius: 5px;
  2539.     margin: 0 2px;
  2540. }
  2541.  
  2542. body.night .bxs-chevrons-up, body.night .bx-copyright {
  2543.     background-color: var(--accent-night)!important;
  2544.     color: var(--accented-text-night)!important;
  2545. }
  2546.  
  2547. /*----------SCROLL TO TOP---------*/
  2548.  
  2549. #scrollToTop:link,
  2550. #scrollToTop:visited {
  2551.     display: none;
  2552.     font-size: 12px;
  2553.     color: var(--accented-text);
  2554.     padding: 0px 5px;
  2555.     width: auto;
  2556.     z-index: 900;
  2557.     font-weight: 700;
  2558. }
  2559.  
  2560. {CustomCSS}
  2561. </style>
  2562.  
  2563. <!-----------Scroll To Top Script----------->
  2564. <script type="text/javascript" src="https://static.tumblr.com/ikeq9mi/DfYl6o46t/scrolltotop.min.js"></script>
  2565. <!-----------Scroll To Top Script----------->
  2566.  
  2567. <script>
  2568. $(document).ready(function(){
  2569.    
  2570.     //TOGGLE NIGHT MODE SCRIPT
  2571.    
  2572.       $('.daynight').click(function(){
  2573.          $('body').toggleClass('night');
  2574.          $('.daynight i').toggleClass('bx-sun');
  2575.       });
  2576. });
  2577. </script>
  2578.  
  2579. </head>
  2580.  
  2581. <body>
  2582.  
  2583. <footer id="bottom">
  2584.  
  2585. <!-----------SCROLL TO TOP ----------->
  2586. <a href="javascript:;" id="scrollToTop" rel="nofollow" title="scroll to top"><i class="bx bxs-chevrons-up"></i></a>
  2587. <!-----------SCROLL TO TOP ----------->
  2588.  
  2589. <!-------------------DO NOT REMOVE THEME CREDIT!!!------------------->
  2590.  <a href="https://sheathemes.tumblr.com" target="_blank" title="theme by sheathemes"><i class='bx bx-copyright'></i></a>  
  2591. <!-------------------DO NOT REMOVE THEME CREDIT!!!------------------->
  2592. </footer>
  2593.  
  2594. <div class="cage"> <!-----------BLOG CONTAINER----------->
  2595.  
  2596. <div class="wrap"> <!-----------SIDEBAR / POSTS CONTAINER----------->
  2597.  
  2598. <aside id="sidebar-cont"> <!-----------LEFT CONTAINER----------->
  2599.     <aside id="sidebar-tall"> <!-----------SIDEBAR----------->
  2600.         <div id="sidebar-content">
  2601.             <div id="sidebar-info">
  2602.                 <div class="sidebar-title">{Title}</div>
  2603.                 <div class="sidebar-description">{Description}</div>
  2604.             </div>
  2605.            
  2606.             <div id="navigation"> <!-----------NAVIGATION LINKS----------->
  2607.             <h2>Navigation</h2>
  2608.                 <nav class="morelinks">
  2609.         {block:ifLink1}<a href="{text:CustomLink1URL}">{text:CustomLink1Name}</a>{/block:ifLink1}
  2610.         {block:ifLink2}<a href="{text:CustomLink2URL}">{text:CustomLink2Name}</a>{/block:ifLink2}
  2611.         {block:ifLink3}<a href="{text:CustomLink3URL}">{text:CustomLink3Name}</a>{/block:ifLink3}
  2612.         {block:ifLink4}<a href="{text:CustomLink4URL}">{text:CustomLink4Name}</a>{/block:ifLink4}
  2613.         {block:ifLink5}<a href="{text:CustomLink5URL}">{text:CustomLink5Name}</a>{/block:ifLink5}
  2614.         {block:ifLink6}<a href="{text:CustomLink6URL}">{text:CustomLink6Name}</a>{/block:ifLink6}
  2615.         {block:ifLink7}<a href="{text:CustomLink7URL}">{text:CustomLink7Name}</a>{/block:ifLink7}
  2616.         {block:ifLink8}<a href="{text:CustomLink8URL}">{text:CustomLink8Name}</a>{/block:ifLink8}
  2617.         {block:ifLink9}<a href="{text:CustomLink9URL}">{text:CustomLink9Name}</a>{/block:ifLink9}
  2618.                 </nav>
  2619.             </div> <!-----------NAVIGATION LINKS----------->
  2620.         </div>
  2621.         <div id="sidebar-image"><img src="{image:sidebar}"></div>
  2622.     </aside>
  2623. </aside> <!-----------LEFT CONTAINER----------->
  2624.  
  2625. <div class="link-bar"> <!-----------LINKBAR----------->
  2626.     <div class="daynight"><i class='bx bx-moon'></i></div>
  2627.    
  2628.     <nav class="homelinks"> <!-----------TUMBLR LINKS----------->
  2629.         <ul>
  2630.             <li><a href="/">Home</a></li>
  2631.             <li id="content" class="active">Posts</li>
  2632.             <li id="faq-cont">Inbox</li>
  2633.             <li id="about-cont">About</li>
  2634.             <li id="tag-cont">Tags</li>
  2635.         </ul>
  2636.     </nav>
  2637.    
  2638.     <nav class="small-links">
  2639.         <a href="/">home</a>
  2640.         <a href="/ask">inbox</a>
  2641.         <a href="/archive">archive</a>
  2642.         <a href="/submit">submit</a>
  2643.     </nav> <!-----------TUMBLR LINKS----------->
  2644.      
  2645. </div> <!-----------LINKBAR----------->
  2646.  
  2647. <header id="small-header"> <!-----------HEADER RESPONSIVE----------->
  2648.     <div id="small-header-image"><img src="{image:header}"></div>
  2649.     <div class="small-header-content">
  2650.         <div class="small-header-title">{Title}</div>
  2651.         <div class="small-header-description">{Description}</div>
  2652.     </div>
  2653.    
  2654.     <div class="nav-content">
  2655.     <h2>Navigation</h2>
  2656.     <nav class="small-navigation"> <!-----------NAVIGATION LINKS----------->
  2657.         {block:ifLink1}<a href="{text:CustomLink1URL}">{text:CustomLink1Name}</a>{/block:ifLink1}
  2658.         {block:ifLink2}<a href="{text:CustomLink2URL}">{text:CustomLink2Name}</a>{/block:ifLink2}
  2659.         {block:ifLink3}<a href="{text:CustomLink3URL}">{text:CustomLink3Name}</a>{/block:ifLink3}
  2660.         {block:ifLink4}<a href="{text:CustomLink4URL}">{text:CustomLink4Name}</a>{/block:ifLink4}
  2661.         {block:ifLink5}<a href="{text:CustomLink5URL}">{text:CustomLink5Name}</a>{/block:ifLink5}
  2662.         {block:ifLink6}<a href="{text:CustomLink6URL}">{text:CustomLink6Name}</a>{/block:ifLink6}
  2663.         {block:ifLink7}<a href="{text:CustomLink7URL}">{text:CustomLink7Name}</a>{/block:ifLink7}
  2664.         {block:ifLink8}<a href="{text:CustomLink8URL}">{text:CustomLink8Name}</a>{/block:ifLink8}
  2665.         {block:ifLink9}<a href="{text:CustomLink9URL}">{text:CustomLink9Name}</a>{/block:ifLink9}
  2666.     </nav> <!-----------NAVIGATION LINKS----------->
  2667.     </div>
  2668. </header> <!-----------HEADER RESPONSIVE----------->
  2669.  
  2670. <section class="posts-section"> <!-----------RIGHT CONTAINTER----------->
  2671.  
  2672. <section id="content-content-box"  class="hide active"> <!-----------POST WRAPPER----------->
  2673.  
  2674. {block:TagPage}<div class="tag-page"><h2>posts tagged #{URLSafeTag}</h2></div> {/block:TagPage}
  2675.  
  2676. {block:posts inlineMediaWidth="1280"}
  2677.  
  2678. <article class="posts" post-type="{PostType}"> <!-----------POSTS----------->
  2679.  
  2680. {block:ContentSource}
  2681. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  2682. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  2683. {/block:SourceLogo}
  2684. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  2685. {/block:ContentSource}
  2686.  
  2687. <!-- {block:NoRebloggedFrom}
  2688. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  2689. {/block:NoRebloggedFrom} -->
  2690.  
  2691. {block:IndexPage}{block:PinnedPostLabel} <div class="pinned"><a href="{Permalink}" title="{PinnedPostLabel}"><i class="bx bx-pin"></i></a></div> {/block:PinnedPostLabel}{/block:IndexPage}
  2692.  
  2693. {block:IndexPage} <!-----------POST INFO/PERMALINKS----------->
  2694.  
  2695. <div id="perma-tall">
  2696. <div class="date-box">
  2697.     <div class="date">
  2698.     {block:Date}
  2699.         <a href="{Permalink}" title="{TimeAgo}"> {ShortMonth} <span>{DayOfMonth}{DayOfMonthSuffix}</span></a>
  2700.     {/block:Date}
  2701.     </div>
  2702.     <div class="controls">
  2703.         <a href="{ReblogURL}" target="_blank" title="reblog this post" class="reblog"><i class='bx bx-sync'></i></a>
  2704.         <a title="like this post" class="like">{LikeButton size="15"}<i class='bx bx-heart'></i></a>
  2705.     </div>
  2706. </div>
  2707.  
  2708. <div class="note-box">{block:NoteCount}<a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}</div>
  2709.     <div class="date-line"></div>
  2710.  
  2711. {block:RebloggedFrom}<div class="source-box"><a href="{ReblogRootURL}" title="{ReblogRootName}">Src</a>
  2712. </div>{/block:RebloggedFrom}
  2713. </div>
  2714.  
  2715. {/block:IndexPage} <!-----------POST INFO/PERMALINKS----------->
  2716.  
  2717. {block:Text}
  2718. <div class="text">
  2719. {block:Title}<div class="title">{Title}</div>{/block:Title}
  2720. <div class="caption">{block:NotReblog} <figcaption> {Body} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">
  2721.  
  2722. {block:Reblogs}
  2723. <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}">
  2724. <div class="source-head">
  2725. <div class="reblog-header">
  2726.  
  2727. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  2728.  
  2729. {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}
  2730.  
  2731. {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>
  2732. </div>
  2733. {/block:Text}
  2734.  
  2735. {block:Photo}
  2736. <div class="photo">
  2737. {LinkOpenTag}
  2738. <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">
  2739. <center><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"></center>
  2740. </a>
  2741. {LinkCloseTag}
  2742. </div>
  2743. {block:IfShowCaptions}
  2744. {block:Caption} <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">
  2745.  
  2746. {block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  2747.  
  2748. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  2749.  
  2750. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  2751.  
  2752. {block:IsActive} <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  2753.  
  2754. {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}
  2755. {/block:IfShowCaptions}
  2756.  
  2757. {block:IfnotShowCaptions}
  2758. {block:PermalinkPage}
  2759. {block:Caption} <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">
  2760.  
  2761. {block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  2762.  
  2763. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  2764.  
  2765. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  2766.  
  2767. {block:IsActive} <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  2768.  
  2769. {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}
  2770. {/block:PermalinkPage}
  2771. {/block:IfnotShowCaptions}
  2772. {/block:Photo}
  2773.  
  2774. {block:Photoset}
  2775. <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>
  2776. {block:IfShowCaptions}
  2777. {block:Caption}
  2778. <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom}
  2779. <div class="reblog-list">
  2780.  
  2781. {block:Reblogs}
  2782. <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  2783. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  2784.  
  2785. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  2786.  
  2787. {block:IsActive}
  2788. <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  2789.  
  2790. {block:IsDeactivated}
  2791. <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated}
  2792. </div>
  2793. <div class="reblog-content"> {Body}</div></div> {/block:Reblogs} </div>
  2794. {/block:RebloggedFrom} </div>
  2795. {/block:Caption}
  2796. {/block:IfShowCaptions}
  2797.  
  2798. {block:IfnotShowCaptions}
  2799. {block:PermalinkPage}
  2800. {block:Caption}
  2801. <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom}
  2802. <div class="reblog-list">
  2803.  
  2804. {block:Reblogs}
  2805. <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  2806. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  2807.  
  2808. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  2809.  
  2810. {block:IsActive}
  2811. <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  2812.  
  2813. {block:IsDeactivated}
  2814. <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated}
  2815. </div>
  2816. <div class="reblog-content"> {Body}</div></div> {/block:Reblogs} </div>
  2817. {/block:RebloggedFrom} </div>
  2818. {/block:Caption}
  2819. {/block:PermalinkPage}
  2820. {/block:IfnotShowCaptions}
  2821. {/block:Photoset}
  2822.  
  2823. {block:Quote}
  2824. <div class="qt">
  2825. <div class="quote-box"><i class="bx bxs-quote-alt-left"></i></div>
  2826. <div class="quote">
  2827. {Quote}
  2828. </div>
  2829. </div>
  2830. {block:Source}<div class="qtsource"><br><center>~ {Source}</center></div>{/block:Source}
  2831. {/block:Quote}
  2832.  
  2833. {block:Link}
  2834. <div class="link"><a href="{URL}">{Name} »</a></div>
  2835. {block:Description}
  2836. <div class="caption">{block:NotReblog} <figcaption> {Description} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">
  2837.  
  2838. {block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  2839.  
  2840. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  2841.  
  2842. {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}
  2843.  
  2844. {block:IsDeactivated} <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated} </div> <div class="reblog-content"> {Body} </div> </div> {/block:Reblogs} </div> {/block:RebloggedFrom} </div>
  2845. {/block:Description}
  2846. {/block:Link}
  2847.  
  2848. {block:Audio}
  2849. <div class="audiop">
  2850. <div class="audiowrapper">
  2851. <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;"> {AudioPlayerWhite}
  2852. </div>
  2853. <div class="music_menu">
  2854. {block:TrackName}<p><span class="info">{TrackName}</span></p>{/block:TrackName}
  2855. {block:Artist}<p><span class="info">- {Artist}</span></p>{/block:Artist}
  2856. </div>
  2857. </div>
  2858. </div>
  2859.  
  2860. {block:IfShowCaptions}
  2861. {block:Caption} <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">
  2862.  
  2863. {block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  2864.  
  2865. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  2866.  
  2867. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  2868.  
  2869. {block:IsActive} <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  2870.  
  2871. {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}
  2872. {/block:IfShowCaptions}
  2873.  
  2874. {block:IfnotShowCaptions}
  2875. {block:PermalinkPage}
  2876. {block:Caption} <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">
  2877.  
  2878. {block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  2879.  
  2880. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  2881.  
  2882. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  2883.  
  2884. {block:IsActive} <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  2885.  
  2886. {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}
  2887. {/block:PermalinkPage}
  2888. {/block:IfnotShowCaptions}
  2889. {/block:Audio}
  2890.  
  2891. {block:Video}
  2892. <div class="video">{Video-500}</div>
  2893. {block:IfShowCaptions}
  2894. {block:Caption} <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">
  2895.  
  2896. {block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  2897.  
  2898. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  2899.  
  2900. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  2901.  
  2902. {block:IsActive} <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  2903.  
  2904. {block:IsDeactivated} <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated}
  2905.  
  2906. </div> <div class="reblog-content"> {Body} </div> </div> {/block:Reblogs} </div> {/block:RebloggedFrom} </div> {/block:Caption}
  2907. {/block:IfShowCaptions}
  2908.  
  2909. {block:IfnotShowCaptions}
  2910. {block:PermalinkPage}
  2911. {block:Caption} <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">
  2912.  
  2913. {block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  2914.  
  2915. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  2916.  
  2917. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  2918.  
  2919. {block:IsActive} <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  2920.  
  2921. {block:IsDeactivated} <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated}
  2922.  
  2923. </div> <div class="reblog-content"> {Body} </div> </div> {/block:Reblogs} </div> {/block:RebloggedFrom} </div> {/block:Caption}
  2924. {/block:PermalinkPage}
  2925. {/block:IfnotShowCaptions}
  2926. {/block:Video}
  2927.  
  2928. {block:Chat}
  2929. {block:Title}<div class="title">{Title}</div>{/block:Title}
  2930. <div class="chatp">
  2931. <div class="chat">{block:Lines}<div class="line">{block:Label}<span class="label"><b>{Label}</b></span><br><br>{/block:Label}
  2932. {Line}</div>{/block:Lines}</div>
  2933. </div>
  2934. {/block:Chat}
  2935.  
  2936. {block:Answer}
  2937. <div id="askcont">
  2938. <div id="asker">
  2939. <img src="{AskerPortraitURL-128}">
  2940. <div id="asking">
  2941. <div class="asker-link">{Asker}</div>
  2942. <div class="asker-text">asked a question</div>
  2943. </div>
  2944. </div>
  2945. <div class="question">{Question}</div>
  2946. </div>
  2947.  
  2948. {block:Answerer}
  2949. <div id="replycont">
  2950. <div id="replier">
  2951. <div id="replying">
  2952. <div class="replier-link">{Answerer}</div>
  2953. <div class="replier-text">replied to your question</div>
  2954. </div>
  2955. <img src="{AnswererPortraitURL-128}">
  2956. </div>
  2957. <div class="answer">{Answer}</div>
  2958. </div>
  2959. {/block:Answerer}
  2960.  
  2961. {block:NotReblog}  <div class="caption"><figcaption> {Answer} </figcaption> </div> {/block:NotReblog}
  2962. {block:RebloggedFrom} <div class="reblog-list">
  2963. {block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">
  2964.  
  2965. {block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}
  2966.  
  2967. {block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}
  2968.  
  2969. {block:IsActive} <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}
  2970.  
  2971. {block:IsDeactivated} <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated} </div>
  2972.  
  2973. <div class="reblog-content">{Body} </div> </div> {/block:Reblogs} </div> {/block:RebloggedFrom}
  2974. {/block:Answer}
  2975.  
  2976. <!-----------POST TAGS----------->
  2977. {block:IndexPage}
  2978.  {block:HasTags}
  2979. <div class="tag-box">
  2980. <i class='bx bx-purchase-tag'></i>
  2981. <div class="post_tags draggable">
  2982. <div class="post_tags_inner">{block:Tags}
  2983. <a href="{TagURL}">#{Tag}</a>{/block:Tags}</div></div>
  2984. </div>
  2985. {/block:HasTags}
  2986. {/block:IndexPage}
  2987. <!-----------POST TAGS----------->
  2988.  
  2989. </article> <!-----------POSTS----------->
  2990.  
  2991. <!-----------PERMALINK PAGE----------->
  2992. {block:PermalinkPage}
  2993. {block:Date}
  2994. <div id="perma">
  2995. <span>
  2996. Posted {ShortMonth} {DayOfMonthWithZero}, {Year} @ {12Hour} {AmPm}
  2997. {block:NoteCount}with {NoteCountWithLabel}{/block:NoteCount}
  2998. </span>
  2999.  
  3000. {block:RebloggedFrom}
  3001. <div class="rb">
  3002. <a class="via" href="{ReblogParentURL}" title="{ReblogParentName}"><img src="{ReblogParentPortraitURL-16}"></a>
  3003. <a class="root" href="{ReblogRootURL}" title="{ReblogRootName}"><img src="{ReblogRootPortraitURL-16}"></a>
  3004. </div>
  3005. {/block:RebloggedFrom}
  3006.  
  3007. </div>
  3008.  
  3009. {block:HasTags}
  3010. <div id="permatg">
  3011. {block:Tags}<a href="{TagURL}" title="Tagged as">#{Tag}</a> {/block:Tags}
  3012. </div>
  3013. {/block:HasTags}
  3014.  
  3015. {block:PostNotes}
  3016. <div id="notecontainer">{PostNotes}</div>
  3017. {/block:PostNotes}
  3018.  
  3019. {block:PermalinkPagination}
  3020. <div id="permpage">
  3021.     {block:NextPost}
  3022.         <a href="{NextPost}" title="Previous Post"><i class='bx bx-chevron-left-square' ></i></a>
  3023.     {/block:NextPost}
  3024.    
  3025.     {block:PreviousPost}
  3026.         <a href="{PreviousPost}" title="Next Post"><i class='bx bx-chevron-right-square' ></i></a>
  3027.     {/block:PreviousPost}
  3028. </div>
  3029. {/block:PermalinkPagination}
  3030. {/block:Date}
  3031. {/block:PermalinkPage}
  3032. <!-----------PERMALINK PAGE----------->
  3033. {/block:Posts}
  3034.  
  3035. {block:IndexPage}
  3036. <footer id="pagination"> <!-----------PAGINATION----------->
  3037. {block:Pagination}
  3038. {block:PreviousPage}
  3039. <a href="{PreviousPage}">Prev</a>
  3040. {/block:PreviousPage}
  3041. {block:JumpPagination length="3"}
  3042. {block:CurrentPage}
  3043. <span class="current_page">{CurrentPage}</a></span>
  3044. {/block:CurrentPage}
  3045. {block:JumpPage}
  3046. <a class="jump_page" href="{URL}">{PageNumber}</a>
  3047. {/block:JumpPage}
  3048. {/block:JumpPagination}
  3049. {block:NextPage}
  3050. <a href="{NextPage}">Next</a>
  3051. {/block:NextPage}
  3052. {/block:Pagination}
  3053. </footer> <!-----------PAGINATION----------->
  3054. {/block:IndexPage}
  3055.  
  3056. </section><!------------------POSTS WRAPPER----------------------->
  3057.  
  3058. <section id="faq-cont-content-box" class="hide"> <!-----------FAQ CONTAINER----------->
  3059.  
  3060. <!-----------FAQ PAGE----------->
  3061.  
  3062.     <article class="faq-section">
  3063.         <div class="faqp">
  3064.         <h2>FAQ page</h2> <!-----------FAQ TITLE----------->
  3065.             <p> <!-----------FAQ HEADER BELOW----------->
  3066.             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Eu egestas commodo ut libero at consequat. At tincidunt ullamcorper laoreet odio. Dolor nunc nulla et, facilisi quis vitae. Aliquam lobortis proin tempor, amet mattis pellentesque. In amet sit vel consectetur. Sem elit massa massa sagittis, augue mollis tristique.
  3067.             </p> <!-----------FAQ HEADER ABOVE----------->
  3068.            
  3069.            
  3070.             <!-----------FAQ TEMPLATE. USE THIS IF YOU WANT TO ADD MORE RESPONSE
  3071.            
  3072.            
  3073.            
  3074.            <div class="faq-item">
  3075.            
  3076.                <section class="faq-question">
  3077.                    <h3>
  3078.                    
  3079.                    This is where you will ask a question???
  3080.                    
  3081.                    </h3>
  3082.                </section>
  3083.                
  3084.                <p class="faq-answer">
  3085.                    
  3086.                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Eu egestas commodo ut libero at consequat. At tincidunt ullamcorper laoreet odio.
  3087.                </p>
  3088.                
  3089.            </div>
  3090.            
  3091.            
  3092.            
  3093.            ----------->
  3094.            
  3095.             <div class="faq-item">
  3096.                 <section class="faq-question">
  3097.                     <h3>
  3098.                     <!-----------FAQ QUESTION BELOW----------->
  3099.                    
  3100.                     This is where you will ask a question???
  3101.                    
  3102.                     <!-----------FAQ QUESTION ABOVE----------->
  3103.                     </h3>
  3104.                 </section>
  3105.                     <p class="faq-answer">
  3106.                     <!-----------FAQ ANSWER BELOW----------->
  3107.                    
  3108.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Eu egestas commodo ut libero at consequat. At tincidunt ullamcorper laoreet odio.
  3109.                     <!-----------FAQ ANSWER ABOVE----------->
  3110.                     </p>
  3111.             </div>
  3112.            
  3113.             <div class="faq-item">
  3114.                 <section class="faq-question">
  3115.                     <h3>
  3116.                     <!-----------FAQ QUESTION BELOW----------->
  3117.                    
  3118.                     This is where you will ask a question???
  3119.                    
  3120.                     <!-----------FAQ QUESTION ABOVE----------->    
  3121.                     </h3>
  3122.                 </section>
  3123.                     <p class="faq-answer">
  3124.                     <!-----------FAQ ANSWER BELOW----------->
  3125.                    
  3126.                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Eu egestas commodo ut libero at consequat. At tincidunt ullamcorper laoreet odio.
  3127.                        
  3128.                      <!-----------FAQ ANSWER ABOVE----------->  
  3129.                     </p>
  3130.             </div>
  3131.            
  3132.             <div class="faq-item">
  3133.                 <section class="faq-question">
  3134.                     <h3>
  3135.                     <!-----------FAQ QUESTION BELOW----------->
  3136.                    
  3137.                     This is where you will ask a question???
  3138.                        
  3139.                     <!-----------FAQ QUESTION ABOVE----------->
  3140.                     </h3>
  3141.                 </section>
  3142.             <p class="faq-answer">
  3143.                     <!-----------FAQ ANSWER BELOW----------->
  3144.            
  3145.             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Eu egestas commodo ut libero at consequat. At tincidunt ullamcorper laoreet odio.
  3146.                
  3147.                     <!-----------FAQ ANSWER ABOVE----------->
  3148.             </p>
  3149.             </div>
  3150.            
  3151.             <div class="faq-item">
  3152.                 <section class="faq-question">
  3153.                     <h3>
  3154.                     <!-----------FAQ QUESTION BELOW----------->
  3155.                    
  3156.                     This is where you will ask a question???
  3157.                        
  3158.                        
  3159.                     <!-----------FAQ QUESTION ABOVE----------->
  3160.                     </h3>
  3161.             </section>
  3162.             <p class="faq-answer">
  3163.                     <!-----------FAQ ANSWER BELOW----------->
  3164.            
  3165.             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Eu egestas commodo ut libero at consequat. At tincidunt ullamcorper laoreet odio.
  3166.                
  3167.                     <!-----------FAQ ANSWER ABOVE----------->
  3168.             </p>
  3169.             </div>
  3170.            
  3171.             <h3>Ask me anything.</h3>
  3172.            
  3173.             <p><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]--></p>
  3174.            
  3175.         </div>
  3176.     </article>
  3177.    
  3178. <!-----------FAQ PAGE----------->
  3179.  
  3180. </section> <!-----------FAQ CONTAINER----------->
  3181.  
  3182. <section id="about-cont-content-box" class="hide"> <!-----------ABOUT CONTAINER----------->
  3183.  
  3184. <!-----------ABOUT PAGE----------->
  3185.  
  3186.     <article class="about-section">
  3187.         <div class="aboutp">
  3188.                 <div class="about-image">
  3189.                     <img src="{image:about header}">
  3190.                 </div>
  3191.             <div class="about-container">  
  3192.                 <h2>About me</h2>
  3193.                
  3194.                 <div class="about-stats">
  3195.                     <li><b>Name:</b> {text:about name}</li>
  3196.                     <li><b>Pronouns:</b> {text:about pronouns}</li>
  3197.                     <li><b>Age:</b> {text:about age}</li>
  3198.                     <li><b>Location:</b> {text:about location}</li>
  3199.                     <li><b>Occupation:</b> {text:about occupation}</li>
  3200.                     <li><b>Zodiac:</b> {text:about zodiac}</li>
  3201.                 </div>
  3202.                
  3203.                 <div class="biography">
  3204.                     <h2>Biography</h2>
  3205.                     <p>{text:about biography}</p>
  3206.                 </div>
  3207.                
  3208.         <div class="progress-bar">
  3209.             <h2>Skills</h2>
  3210.             <section class="skill-cont">
  3211.                     <p>{text:skills title}</p>
  3212.                     <section class="skill">
  3213.  
  3214.                     <section class="skill-set" style="width:{text:skills percentage};"></section>
  3215.  
  3216.                     </section>
  3217.             </section>
  3218.            
  3219.             <section class="skill-cont">
  3220.                 <p>{text:skills title 2}</p>
  3221.                 <section class="skill">
  3222.                     <section class="skill-set" style="width:{text:skills percentage 2};"></section>
  3223.                 </section>
  3224.             </section>
  3225.            
  3226.             <section class="skill-cont">
  3227.                 <p>{text:skills title 3}</p>
  3228.                 <section class="skill">
  3229.                     <section class="skill-set" style="width:{text:skills percentage 3};"></section>
  3230.                 </section>
  3231.             </section>
  3232.            
  3233.             <section class="skill-cont">
  3234.                 <p>{text:skills title 4}</p>
  3235.                 <section class="skill">
  3236.                     <section class="skill-set" style="width:{text:skills percentage 4};"></section>
  3237.                 </section>
  3238.             </section>
  3239.            
  3240.             </div>
  3241.            
  3242.             </div>
  3243.         </div>
  3244.     </article>
  3245.    
  3246. <!-----------ABOUT PAGE----------->
  3247.  
  3248. </section> <!-----------ABOUT CONTAINER----------->
  3249.  
  3250. <section id="tag-cont-content-box" class="hide"> <!-----------TAG CONTAINER----------->
  3251.  
  3252.     <article class="tag-section"> <!-----------TAG PAGE----------->
  3253.         <div class="tagp">
  3254.             <h2>Tags / Navigation page</h2>
  3255.            
  3256.            
  3257. <!-----------IF YOU NEED A EXTRA TAG/TAG CONTAINER. A TEMPLATE IS LISTED BELOW FOR YOUR USE
  3258.            
  3259.            
  3260.            <div class="tag-container">
  3261.                <h3>Tag category 1</h3>
  3262.                <div class="tag-contents">
  3263.                    <a href="/tagged">tag name</a>
  3264.                    <a href="/tagged">tag name</a>
  3265.                    <a href="/tagged">tag name</a>
  3266.                    <a href="/tagged">tag name</a>
  3267.                    <a href="/tagged">tag name</a>
  3268.                    <a href="/tagged">tag name</a>
  3269.                    <a href="/tagged">tag name</a>
  3270.                    <a href="/tagged">tag name</a>
  3271.                    <a href="/tagged">tag name</a>
  3272.                </div>
  3273.            </div>
  3274.            
  3275.            
  3276. ----------->
  3277.            
  3278.             <div class="tag-container">
  3279.                 <h3>Tag category 1</h3>
  3280.                 <div class="tag-contents">
  3281.                     <a href="/tagged">tag name</a>
  3282.                     <a href="/tagged">tag name</a>
  3283.                     <a href="/tagged">tag name</a>
  3284.                     <a href="/tagged">tag name</a>
  3285.                     <a href="/tagged">tag name</a>
  3286.                     <a href="/tagged">tag name</a>
  3287.                     <a href="/tagged">tag name</a>
  3288.                     <a href="/tagged">tag name</a>
  3289.                     <a href="/tagged">tag name</a>
  3290.                 </div>
  3291.             </div>
  3292.            
  3293.             <div class="tag-container">
  3294.                 <h3>Tag category 2</h3>
  3295.                 <div class="tag-contents">
  3296.                     <a href="/tagged">tag name</a>
  3297.                     <a href="/tagged">tag name</a>
  3298.                     <a href="/tagged">tag name</a>
  3299.                     <a href="/tagged">tag name</a>
  3300.                     <a href="/tagged">tag name</a>
  3301.                     <a href="/tagged">tag name</a>
  3302.                     <a href="/tagged">tag name</a>
  3303.                     <a href="/tagged">tag name</a>
  3304.                     <a href="/tagged">tag name</a>
  3305.                 </div>
  3306.             </div>
  3307.            
  3308.             <div class="tag-container">
  3309.                 <h3>Tag category 2</h3>
  3310.                 <div class="tag-contents">
  3311.                     <a href="/tagged">tag name</a>
  3312.                     <a href="/tagged">tag name</a>
  3313.                     <a href="/tagged">tag name</a>
  3314.                     <a href="/tagged">tag name</a>
  3315.                     <a href="/tagged">tag name</a>
  3316.                     <a href="/tagged">tag name</a>
  3317.                     <a href="/tagged">tag name</a>
  3318.                     <a href="/tagged">tag name</a>
  3319.                     <a href="/tagged">tag name</a>
  3320.                 </div>
  3321.             </div>
  3322.            
  3323.         </div>
  3324.     </article>
  3325.    
  3326. <!-----------TAG PAGE----------->
  3327.  
  3328. </section> <!-----------TAG CONTAINER----------->
  3329.  
  3330. </section><!------------------POSTS WRAPPER----------------------->
  3331.  
  3332. </section> <!-----------RIGHT CONTAINTER----------->
  3333.  
  3334. </div>  <!--------- SIDEBAR / POSTS CONTAINER ----------->
  3335.  
  3336. </div> <!--------- BLOG CONTAINER ----------->
  3337.  
  3338. <!-------------------SCRIPTS/JQUERY (PART TWO)------------------->
  3339.  
  3340. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  3341.  
  3342. <!-----------Pixel Union photosets script----------->
  3343. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  3344. <script src="https://static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></script>
  3345. <!-----------Pixel Union photosets script----------->
  3346.  
  3347. <!---------- Responsive tumblr videos and external iframes script ---------->
  3348. <script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
  3349. <!---------- Responsive tumblr videos and external iframes script ---------->
  3350.  
  3351. <!-----------Tooltips Script----------->
  3352. <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" />
  3353. <!-----------Tooltips Script----------->
  3354.  
  3355. <script>
  3356. $(document).ready(function(){
  3357.     //pxu photosets by @ shythemes & bychloethemes
  3358.    $('.photo-slideshow').pxuPhotoset({
  3359.        lightbox: true,
  3360.        rounded: false,
  3361.        gutter: '{select:photoset gutter}px',
  3362.        photoset: '.photo-slideshow',
  3363.        photoWrap: '.photo-data',
  3364.        photo: '.pxu-photo'
  3365.    });
  3366.     // Fade in tabs by @ w3schools
  3367.     $(".link-bar").on("click", "li", function(){
  3368.         var tabsId = $(this).attr("id");
  3369.         $(this).addClass("active").siblings().removeClass("active");
  3370.         $("#" + tabsId + "-content-box").addClass("active").siblings().removeClass("active");
  3371.         });
  3372.         tippy('a[title]', {
  3373.             theme: 'custom',
  3374.             arrow: tippy.roundArrow,
  3375.             zIndex: 9999999999,
  3376.             placement: 'auto',
  3377.             maxWidth: 300,
  3378.             content(reference) {
  3379.                 const title = reference.getAttribute('title');
  3380.                 reference.removeAttribute('title'); return title; },
  3381.            
  3382.         });
  3383.     //responsive tumblr videos and external iframes by @ nouvae
  3384.     function flexFrame() {
  3385.         $(".caption").each(function() {
  3386.             $(this).find("iframe").wrap("<div class='capframe'></div>"); // wrap iframe
  3387.             flexibleFrames($(".capframe"));
  3388.         });
  3389.         flexibleFrames($(".video"));
  3390.     }
  3391.    
  3392.     $(document).ready(flexFrame);
  3393. });
  3394. </script>
  3395.  
  3396. <!-----------Draggable Tags Script----------->
  3397. <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  3398. <script src="https://static.tumblr.com/pbhn8p5/OSRos9gz8/draggabletags.js"></script>
  3399. <!-----------Draggable Tags Script----------->
  3400.  
  3401. <!-------------------SCRIPTS/JQUERY (PART TWO)------------------->
  3402.  
  3403. </body>
  3404. </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!