API tools faq
paste
raingurl

theseulgistarrymoonthemetakemeanywhere

raingurl
Dec 7th, 2022
45
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 61.03 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!--
  4. COSMiC !!!
  5.  
  6. . . . by gordonramsei ,
  7.  
  8.  
  9.  
  10. * USER NOTES / STYLING TIPS !
  11.  
  12. - the seriff font in ALL the titles can be
  13. utilized with the <b>bold</b> tags .
  14.  
  15. i styled the main title like :
  16.  
  17. <b>* /</b> local cosmic <b>demigod</b>!
  18.  
  19. u may find and edit the size of the title
  20. be cntrl + f ' .title ' !
  21.  
  22.  
  23. - u can locate the color palette i used for
  24. ur theme here :
  25.  
  26. https://coolors.co/palette/f72585-b5179e-7209b7-560bad-480ca8-3a0ca3-3f37c9-4361ee-4895ef-4cc9f0
  27.  
  28. - to change ur song + song title cntrl + f
  29. 'SONG NAME HERE'
  30.  
  31.  
  32. ' IMG SIZES :
  33.  
  34. SB IMG : 250 x 250
  35.  
  36. NOTE : images WILL auto resize
  37. but if they aren't the exact
  38. size it WILL look v UGLEE !! 😩
  39.  
  40.  
  41. ' FULL RULES & REGULATIONS . . .
  42.  
  43. 001 . this theme was designed for RAE , meaning unless
  44. they gives u direct permission to use this theme ,
  45. don't do it . it wasn't coded for u .
  46.  
  47. 002 . u MAY edit this theme to ur heart's content but
  48. u may NOT remove the credit . go ahead and make
  49. it fit ur aesthetic if u please but if i see that
  50. u have removed it entirely , imma pray that u
  51. stub ur toe so hard . for real . don't combine
  52. my codes with anyone else's , either .
  53.  
  54. 003 . this is NOT a base code . don't treat it as one .
  55.  
  56. 004 . taking my fonts that i have uploaded myself is
  57. stealing and i will call u out on that shit .
  58.  
  59. 005 . my preview graphics aren't for u to steal !
  60. don't be that person .
  61.  
  62. ' FULL CREDITS . . .
  63.  
  64. 001 . TABS SCRIPT / FILTER : coded by gordonramsei
  65. 002 . ICONS : cappuccicons icons by suiomi , fontawesome
  66. 003 . ANIMATIONS : by animista ( see full credit below )
  67. 004 . IMESSAGE CHAT STYLE BASE : by animalites
  68. 005 . PINNED POST INSPIRED BY : valcntines
  69. 006 . MP3 PLAYER : glenthemes
  70.  
  71.  
  72. ' FONTS USED . . .
  73.  
  74. 001 . BODY FONT : poppins
  75. 002 . TITLE FONT / ACCENT FONTS : shrikhand
  76.  
  77.  
  78.  
  79.  
  80.  
  81. /* ----------------------------------------------
  82. * Generated by Animista on 2021-3-4 16:41:54
  83. * Licensed under FreeBSD License.
  84. * See http://animista.net/license for more info.
  85. * w: http://animista.net, t: @cssanimista
  86. * ---------------------------------------------- */
  87. -->
  88. <html>
  89.  
  90. <head>
  91.  
  92.  
  93. <title>{Title}</title> <link rel="shortcut icon" href="{Favicon}"> <link rel="alternate" type="application/rss+xml" href="{RSS}"> {block:Description} <meta name="description" content="{MetaDescription}" /> {/block:Description}
  94.  
  95. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  96.  
  97.  
  98.  
  99. <!-- colors -->
  100.  
  101. <meta name="color:background" content="#0a0a0a"/>
  102.  
  103. <meta name="color:text" content="#ffffff"/>
  104.  
  105. <meta name="color:title gradient 1" content="#9f9be4"/>
  106.  
  107. <meta name="color:title gradient 2" content="#a2b1f6"/>
  108.  
  109. <meta name="color:title gradient 3" content="#be68f8"/>
  110.  
  111. <meta name="color:title gradient 4" content="#fb93c2"/>
  112.  
  113. <meta name="color:links" content="#ffffff"/>
  114.  
  115. <meta name="color:links hover" content="#8e62f3"/>
  116.  
  117. <meta name="color:posts" content="#070707"/>
  118.  
  119. <meta name="color:accent" content="#ed78dc"/>
  120.  
  121. <meta name="color:bold" content="#fb93c2"/>
  122.  
  123. <meta name="color:gradient 1" content="#ed78dc"/>
  124.  
  125. <meta name="color:gradient 2" content="#a966f5"/>
  126.  
  127. <meta name="color:gradient 3" content="#8e62f3"/>
  128.  
  129. <meta name="color:italic gradient 1" content="#ed78dc"/>
  130.  
  131. <meta name="color:italic gradient 2" content="#a966f5"/>
  132.  
  133. <meta name="color:italic gradient 3" content="#a966f5"/>
  134.  
  135. <meta name="color:italic gradient 4" content="#ed78dc"/>
  136.  
  137.  
  138.  
  139. <!-- images -->
  140.  
  141. <meta name="image:background" content="https://static.tumblr.com/ovepbbv/Lzjrahmmy/h.gif"/>
  142.  
  143. <meta name="image:sb img 1" content="https://via.placeholder.com/250x250"/>
  144.  
  145.  
  146. <!-- text -->
  147.  
  148. <meta name="text:title" content="ur title">
  149.  
  150.  
  151. <meta name="text:desc" content="make this as long as possible; it will cut u off when u've written enough . this has unique font styles so have some fun with the bold , italic and big styles .">
  152.  
  153.  
  154. <meta name="select:grayscale imgs" content="100%" title="yes" />
  155. <meta name="select:grayscale imgs" content="0%" title="no" />
  156.  
  157.  
  158.  
  159. <!-- links -->
  160.  
  161. <meta name="text:free link 1 title" content="title">
  162. <meta name="text:free link 1 url" content="/">
  163.  
  164.  
  165.  
  166.  
  167.  
  168. <!-- various scripts : ie , icons and tooltip u will also place ur links to any google fonts here -->
  169.  
  170. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"> </script>
  171.  
  172. <script src="https://kit.fontawesome.com/12b100d5e1.js" crossorigin="anonymous"></script>
  173.  
  174. <link rel="preconnect" href="https://fonts.googleapis.com">
  175. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  176. <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap" rel="stylesheet">
  177.  
  178. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  179. <link href="https://fonts.googleapis.com/css2?family=Shrikhand&display=swap" rel="stylesheet">
  180.  
  181. <script src="//pull.cappuccicons.com/cpf.js"></script>
  182.  
  183. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  184.  
  185.  
  186.  
  187. <!-- tooltip script , keep here -->
  188.  
  189. <script>
  190. (function($){
  191. $(document).ready(function() {
  192. $("a[title]").style_my_tooltips({
  193. tip_follows_cursor:false,
  194. tip_delay_time:90,
  195. tip_fade_speed:600,
  196. attribute:"title"
  197. });
  198. });
  199. })(jQuery);
  200. </script>
  201.  
  202.  
  203.  
  204.  
  205.  
  206. <style type="text/css">
  207.  
  208. /* custom fonts */
  209.  
  210.  
  211.  
  212. @-ms-viewport{
  213. width: device-width;
  214.  
  215. }
  216.  
  217.  
  218. /* tooltip styling + scroll bar */
  219.  
  220. #s-m-t-tooltip {
  221. max-width:250px;
  222. z-index:9999999999999999999999999999999999999;
  223. height:auto;
  224. padding:5px;
  225. margin-left:15px;
  226. margin-bottom:22px;
  227. font-size:9.5px;
  228. font-style:italic;
  229. letter-spacing:3px;
  230. background-color:{color:posts};
  231. border:2px solid {color:title gradient 1};
  232. color:{color:text};
  233. text-transform:lowercase;
  234.  
  235. }
  236.  
  237.  
  238. /* width */
  239. ::-webkit-scrollbar {
  240. width: 10px;
  241. border-radius:5px;
  242. }
  243.  
  244. /* Track */
  245. ::-webkit-scrollbar-track {
  246. background: {color:title gradient 1};
  247. border-radius:5px;
  248. }
  249.  
  250. /* Handle */
  251. ::-webkit-scrollbar-thumb {
  252. background:{color:accent};
  253. border-radius:5px;
  254. }
  255.  
  256. /* Handle on hover */
  257. ::-webkit-scrollbar-thumb:hover {
  258. background:{color:title gradient 3};
  259. }
  260.  
  261.  
  262. ::selection {
  263. background-color: {color:accent};
  264. color: {color:text};
  265. }
  266.  
  267.  
  268.  
  269. /* body + font styles */
  270.  
  271.  
  272. body {
  273. background:{color:background};
  274. color:{color:text};
  275. font-family: 'Poppins', sans-serif;
  276. font-size:16px;
  277. line-height:16px;
  278. position:relative;
  279. letter-spacing:1px;
  280. overflow:hidden;
  281. text-align:justify;
  282. margin:0;
  283. padding:0;
  284. background-image:url('{image:background}');
  285. background-size:repeat; /* change repeat to cover if you have a full img for ur background */
  286.  
  287.  
  288. }
  289.  
  290.  
  291. p {
  292. padding-left:10px;
  293. padding-right:10px;
  294. }
  295.  
  296.  
  297. a {
  298. text-decoration:none;
  299. text-shadow:0px 0px 3px {color:links};
  300. color:{color:links};
  301. -webkit-transition: all 0.8s ease-in-out;
  302. -moz-transition: all 0.8s ease-in-out;
  303. -o-transition: all 0.8s ease-in-out;
  304. -ms-transition: all 0.8s ease-in-out;
  305. transition: all 0.8s ease-in-out;
  306.  
  307. }
  308.  
  309.  
  310. a:hover {
  311. color:{color:links hover};
  312. text-shadow:0px 0px 3px {color:links hover};
  313. -webkit-transition: all 0.8s ease-in-out;
  314. -moz-transition: all 0.8s ease-in-out;
  315. -o-transition: all 0.8s ease-in-out;
  316. -ms-transition: all 0.8s ease-in-out;
  317. transition: all 0.8s ease-in-out;
  318. }
  319.  
  320.  
  321. blockquote {
  322. border-left:1px solid {color:accent};
  323. margin-left:2px;
  324. padding:0px 5px 0px;
  325. text-align:justify;
  326. width:96%;
  327.  
  328. }
  329.  
  330.  
  331. small {
  332. font-size:15px;
  333.  
  334. }
  335.  
  336.  
  337. sub, sup {
  338. font-size:15px;
  339.  
  340. }
  341.  
  342.  
  343. span strong, em {
  344. color:{color:bold};
  345. }
  346.  
  347.  
  348. em strong {
  349. color:{color:bold};
  350. }
  351.  
  352.  
  353. p strong {
  354. color:{color:bold};
  355. }
  356.  
  357.  
  358. b, strong {
  359. letter-spacing:2px;
  360. padding:3px;
  361. font-weight:500;
  362. font-size:16px;
  363. color:{color:bold};
  364. text-transform:lowercase;
  365. vertical-align:middle;
  366. font-family: 'Shrikhand', cursive;
  367. text-shadow:0px 0px 3px {color:bold};
  368. }
  369.  
  370.  
  371.  
  372. i, em {
  373. background: {color:italic gradient 1};
  374. background: -webkit-linear-gradient(to right, {color:italic gradient 1} 6%, {color:italic gradient 2} 45%, {color:italic gradient 3} 60%, {color:italic gradient 4} 97%);
  375. background: -moz-linear-gradient(to right, {color:italic gradient 1} 6%, {color:italic gradient 2} 45%, {color:italic gradient 3} 60%, {color:italic gradient 4} 97%);
  376. background: linear-gradient(to right, {color:italic gradient 1} 6%, {color:italic gradient 2} 45%, {color:italic gradient 3} 60%, {color:italic gradient 4} 97%);
  377. background: -moz-linear-gradient(to right, {color:italic gradient 1} 6%, {color:italic gradient 2} 45%, {color:italic gradient 3} 60%, {color:italic gradient 4} 97%);
  378. background: -moz-linear-gradient(to right, {color:italic gradient 1} 6%, {color:italic gradient 2} 45%, {color:italic gradient 3} 60%, {color:italic gradient 4} 97%);
  379. -webkit-background-clip: text;
  380. -webkit-text-fill-color: transparent;
  381. text-shadow:0px 0px 3px {color:italic gradient 1};
  382. color:{color:italic gradient 1};
  383. font-size:16.5px;
  384. padding:5px;
  385. letter-spacing:2px;
  386. font-weight:400;
  387. text-transform:lowercase;
  388.  
  389. }
  390.  
  391.  
  392.  
  393. h3 {
  394. font-size:35px;
  395. text-align:center;
  396. line-height:30px;
  397. font-weight:400;
  398. letter-spacing:3px;
  399. padding:5px;
  400. text-transform:lowercase;
  401. font-family: 'Shrikhand', cursive;
  402. vertical-align: middle;
  403. color:{color:bold};
  404. -webkit-text-fill-color: transparent;
  405. -webkit-text-stroke: 1px {color:text};
  406. text-shadow:1px 1px 20px {color:bold};
  407.  
  408. }
  409.  
  410. h3 a {
  411. font-size:45px;
  412. text-align:center;
  413. line-height:30px;
  414. font-weight:400;
  415. letter-spacing:3px;
  416. padding:5px;
  417. text-transform:lowercase;
  418. font-family: 'Shrikhand', cursive;
  419. vertical-align: middle;
  420. color:{color:bold};
  421. -webkit-text-fill-color: transparent;
  422. -webkit-text-stroke: 1px {color:text};
  423. text-shadow:1px 1px 20px {color:bold};
  424.  
  425. }
  426.  
  427. h3 a:hover {
  428. font-size:45px;
  429. text-align:center;
  430. line-height:25px;
  431. font-weight:400;
  432. letter-spacing:3px;
  433. padding:5px;
  434. text-transform:lowercase;
  435. font-family: 'Shrikhand', cursive;
  436. vertical-align: middle;
  437. color:{color:bold};
  438. -webkit-text-fill-color: transparent;
  439. -webkit-text-stroke: 1px {color:bold};
  440. text-shadow:0px 0px 20px {color:bold};
  441.  
  442. }
  443.  
  444.  
  445. h1, h2 {
  446. text-align:justify;
  447. font-size:30px;
  448. text-transform:lowercase;
  449. margin-left:-7px;
  450. vertical-align: middle;
  451. padding:10px;
  452. letter-spacing:2px;
  453. color:{color:title gradient 1};
  454. background: {color:title gradient 1};
  455. background: -webkit-linear-gradient(to bottom, {color:title gradient 1} 0%, {color:title gradient 4} 100%);
  456. background: -moz-linear-gradient(to bottom, {color:title gradient 1} 0%, {color:title gradient 4} 100%);
  457. background: linear-gradient(to bottom, {color:title gradient 1} 0%, {color:title gradient 4} 100%);
  458. -webkit-background-clip: text;
  459. -webkit-text-fill-color: transparent;
  460. text-shadow:0px 0px 10px {color:title gradient 1};
  461. line-height:33px;
  462. font-weight:400;
  463. }
  464.  
  465.  
  466. big, big strong {
  467. font-size:13.5px;
  468. color:{color:text};
  469. text-shadow: 0px 0px 3px {color:text};
  470. background-color:{color:title gradient 1};
  471. padding:3px;
  472.  
  473. }
  474.  
  475.  
  476.  
  477.  
  478. /* container + extras */
  479.  
  480. #container {
  481. position:fixed;
  482. width:650px;
  483. height:650px;
  484. background-color:transparent;
  485. top:50%;
  486. left:50%;
  487. transform: translate(-50%, -50%);
  488. z-index:999;
  489. overflow:visible;
  490. z-index:-9999999999999999999999999999999999;
  491.  
  492. }
  493.  
  494.  
  495.  
  496.  
  497. /* posts styling */
  498.  
  499. .postholder {
  500. position:fixed;
  501. top:50%;
  502. left:30%;
  503. transform: translate(-50%, -50%);
  504. z-index:-9999999999999999999999999999999999999;
  505. border:15px solid transparent;
  506. overflow-x:hidden;
  507. background-color:transparent;
  508. width:430px;
  509. height:650px;
  510. }
  511.  
  512.  
  513.  
  514.  
  515.  
  516. .posts {
  517. position:relative;
  518. z-index:9999999999999999999999999999999999999999999999;
  519. background-color:{color:posts};
  520. -webkit-box-shadow: 0px 0px 20px 0px {color:accent};
  521. box-shadow: 0px 0px 20px 0px {color:accent};
  522. width:300px;
  523. padding-left:10px;
  524. margin-left:50px;
  525. top:50px;
  526. background-color:{color:posts};
  527. overflow-x:none;
  528. overflow-y:none;
  529. overflow-wrap: break-word;
  530. border-radius:5px;
  531. -webkit-animation: slide-in-blurred-left 1s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
  532. animation: slide-in-blurred-left 1s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
  533. }
  534.  
  535. @-webkit-keyframes slide-in-blurred-left {
  536. 0% {
  537. -webkit-transform: translateX(-10px) scaleX(2.5) scaleY(0.2);
  538. transform: translateX(-10px) scaleX(2.5) scaleY(0.2);
  539. -webkit-transform-origin: 100% 50%;
  540. transform-origin: 100% 50%;
  541. -webkit-filter: blur(40px);
  542. filter: blur(40px);
  543. opacity: 0;
  544. }
  545. 100% {
  546. -webkit-transform: translateX(0) scaleY(1) scaleX(1);
  547. transform: translateX(0) scaleY(1) scaleX(1);
  548. -webkit-transform-origin: 50% 50%;
  549. transform-origin: 50% 50%;
  550. -webkit-filter: blur(0);
  551. filter: blur(0);
  552. opacity: 1;
  553. }
  554. }
  555. @keyframes slide-in-blurred-left {
  556. 0% {
  557. -webkit-transform: translateX(-10px) scaleX(2.5) scaleY(0.2);
  558. transform: translateX(-10px) scaleX(2.5) scaleY(0.2);
  559. -webkit-transform-origin: 100% 50%;
  560. transform-origin: 100% 50%;
  561. -webkit-filter: blur(40px);
  562. filter: blur(40px);
  563. opacity: 0;
  564. }
  565. 100% {
  566. -webkit-transform: translateX(0) scaleY(1) scaleX(1);
  567. transform: translateX(0) scaleY(1) scaleX(1);
  568. -webkit-transform-origin: 50% 50%;
  569. transform-origin: 50% 50%;
  570. -webkit-filter: blur(0);
  571. filter: blur(0);
  572. opacity: 1;
  573. }
  574. }
  575.  
  576.  
  577. .tags {
  578. text-align:justify;
  579. font-size:13.5px;
  580. vertical-align: middle;
  581. text-transform:lowercase;
  582. color:{color:text};
  583. margin-top:10px;
  584. margin-left:50px;
  585. width:309px;
  586. -webkit-animation: slide-in-blurred-left 1s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
  587. animation: slide-in-blurred-left 1s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
  588. }
  589.  
  590. @-webkit-keyframes slide-in-blurred-left {
  591. 0% {
  592. -webkit-transform: translateX(-10px) scaleX(2.5) scaleY(0.2);
  593. transform: translateX(-10px) scaleX(2.5) scaleY(0.2);
  594. -webkit-transform-origin: 100% 50%;
  595. transform-origin: 100% 50%;
  596. -webkit-filter: blur(40px);
  597. filter: blur(40px);
  598. opacity: 0;
  599. }
  600. 100% {
  601. -webkit-transform: translateX(0) scaleY(1) scaleX(1);
  602. transform: translateX(0) scaleY(1) scaleX(1);
  603. -webkit-transform-origin: 50% 50%;
  604. transform-origin: 50% 50%;
  605. -webkit-filter: blur(0);
  606. filter: blur(0);
  607. opacity: 1;
  608. }
  609. }
  610. @keyframes slide-in-blurred-left {
  611. 0% {
  612. -webkit-transform: translateX(-10px) scaleX(2.5) scaleY(0.2);
  613. transform: translateX(-10px) scaleX(2.5) scaleY(0.2);
  614. -webkit-transform-origin: 100% 50%;
  615. transform-origin: 100% 50%;
  616. -webkit-filter: blur(40px);
  617. filter: blur(40px);
  618. opacity: 0;
  619. }
  620. 100% {
  621. -webkit-transform: translateX(0) scaleY(1) scaleX(1);
  622. transform: translateX(0) scaleY(1) scaleX(1);
  623. -webkit-transform-origin: 50% 50%;
  624. transform-origin: 50% 50%;
  625. -webkit-filter: blur(0);
  626. filter: blur(0);
  627. opacity: 1;
  628. }
  629. }
  630.  
  631.  
  632.  
  633. .tags a {
  634. background: {color:gradient 1};
  635. background: -webkit-radial-gradient(circle farthest-corner at center center, {color:gradient 1} 6%,{color:gradient 2} 49%,{color:gradient 3} 97%);
  636. background: -moz-radial-gradient(circle farthest-corner at center center, {color:gradient 1} 6%, {color:gradient 2} 49%, {color:gradient 3} 97%);
  637. background: radial-gradient(circle farthest-corner at center center, {color:gradient 1} 6%, {color:gradient 2} 49%, {color:gradient 3} 97%);
  638. -webkit-background-clip: text;
  639. -webkit-text-fill-color: transparent;
  640. text-shadow:0px 0px 3px {color:gradient 1};
  641. }
  642.  
  643.  
  644. .tags a:hover {
  645. -webkit-transition: all 0.8s ease-in-out;
  646. -moz-transition: all 0.8s ease-in-out;
  647. -o-transition: all 0.8s ease-in-out;
  648. -ms-transition: all 0.8s ease-in-out;
  649. transition: all 0.8s ease-in-out;
  650. text-shadow:0px 0px 3px {color:gradient 2};
  651.  
  652.  
  653. }
  654.  
  655.  
  656.  
  657. .tags b {
  658. font-size:14px;
  659. letter-spacing:2px;
  660. font-style:bold;
  661. text-transform:lowercase;
  662. color:{color:bold};
  663. font-family: 'Poppins', sans-serif;
  664.  
  665.  
  666. }
  667.  
  668.  
  669. .notes {
  670.  
  671. }
  672.  
  673.  
  674. .permalink {
  675. text-transform:lowercase;
  676. z-index:999999999999999999999999999999999999999999999999;
  677. font-size:16px;
  678. text-align:center;
  679. margin-left:-10px;
  680. position:relative;
  681. width:280px;
  682. background-color:{color:accent};
  683. margin-top:0px;
  684. padding:15px;
  685. border-bottom-left-radius:5px;
  686. border-bottom-right-radius:5px;
  687.  
  688.  
  689. }
  690.  
  691.  
  692. .permalink a {
  693. color:{color:links};
  694. text-align:center;
  695. font-size:16px;
  696. padding:3px;
  697. -webkit-transition: all 0.8s ease-in-out;
  698. -moz-transition: all 0.8s ease-in-out;
  699. -o-transition: all 0.8s ease-in-out;
  700. -ms-transition: all 0.8s ease-in-out;
  701. transition: all 0.8s ease-in-out;
  702.  
  703. }
  704.  
  705.  
  706. .permalink a:hover {
  707.  
  708. text-shadow:0px 0px 2px {color:links hover};
  709. -webkit-transition: all 0.8s ease-in-out;
  710. -moz-transition: all 0.8s ease-in-out;
  711. -o-transition: all 0.8s ease-in-out;
  712. -ms-transition: all 0.8s ease-in-out;
  713. transition: all 0.8s ease-in-out;
  714. color:{color:links hover};
  715.  
  716. }
  717.  
  718.  
  719. .pinnedposts {
  720. position:absolute;
  721. right:5px;
  722. top:2px;
  723. font-style:normal;
  724. font-size:9.5px;
  725. letter-spacing:1px;
  726. z-index:99999999999999999999999999999999999999999999999;
  727. padding:6px;
  728.  
  729. }
  730.  
  731.  
  732. .pinnedposts b {
  733. color:{color:bold};
  734. font-size:12.5px;
  735. font-style:normal;
  736. }
  737.  
  738.  
  739.  
  740. #pagination a {
  741. position:relative;
  742. z-index:999999999999999999999999999999999999999999;
  743. text-align:center;
  744. top:570px;
  745. left:-137px;
  746. padding:5px;
  747. font-size:17px;
  748. text-shadow:none;
  749. color:{color:title gradient 1};
  750. font-style:bold;
  751. text-transform:lowercase;
  752.  
  753. }
  754.  
  755.  
  756. #pagination a:hover {
  757. color:{color:bold};
  758. font-style:bold;
  759. -webkit-transition: all 0.8s ease-in-out;
  760. -moz-transition: all 0.8s ease-in-out;
  761. -o-transition: all 0.8s ease-in-out;
  762. -ms-transition: all 0.8s ease-in-out;
  763. transition: all 0.8s ease-in-out;
  764.  
  765. }
  766.  
  767.  
  768. .photoset {
  769. display:block;
  770. padding:none;
  771. filter: grayscale({select:grayscale imgs});
  772. margin-left:-5px;
  773. border-top-left-radius:5px;
  774. border-top-right-radius:5px;
  775. width:103.5%;
  776. }
  777.  
  778.  
  779.  
  780. iframe {
  781. max-width:100%;
  782. z-index:9999999999999999999999999999999999999999;
  783. -webkit-transition: all 0.8s ease-in-out;
  784. -moz-transition: all 0.8s ease-in-out;
  785. -o-transition: all 0.8s ease-in-out;
  786. -ms-transition: all 0.8s ease-in-out;
  787. transition: all 0.8s ease-in-out;
  788.  
  789. }
  790.  
  791.  
  792. iframe:hover {
  793. max-width:100%x;
  794. z-index:9999999999999999999999999999999999999999;
  795. -webkit-transition: all 0.8s ease-in-out;
  796. -moz-transition: all 0.8s ease-in-out;
  797. -o-transition: all 0.8s ease-in-out;
  798. -ms-transition: all 0.8s ease-in-out;
  799. transition: all 0.8s ease-in-out;
  800.  
  801. }
  802.  
  803.  
  804. .iframe-controls--desktop {
  805. transition: none;
  806. }
  807.  
  808.  
  809. .posts img {
  810. max-width:300px;
  811. border-top-left-radius:5px;
  812. border-top-right-radius:5px;
  813. padding-left:3px;
  814. height:100%;
  815. filter: grayscale({select:grayscale imgs});
  816. margin-left:-10px;
  817. display: block;
  818. -webkit-transition: all 0.8s ease-in-out;
  819. -moz-transition: all 0.8s ease-in-out;
  820. -o-transition: all 0.8s ease-in-out;
  821. -ms-transition: all 0.8s ease-in-out;
  822. transition: all 0.8s ease-in-out;
  823.  
  824. }
  825.  
  826. .posts img:hover {
  827. filter: grayscale({select:grayscale imgs});
  828. height:100%;
  829. max-width:300px;
  830. -webkit-transition: all 0.8s ease-in-out;
  831. -moz-transition: all 0.8s ease-in-out;
  832. -o-transition: all 0.8s ease-in-out;
  833. -ms-transition: all 0.8s ease-in-out;
  834. transition: all 0.8s ease-in-out;
  835.  
  836. }
  837.  
  838.  
  839. li{
  840. list-style-type: none;
  841. margin-left:-25px;
  842. line-height:11.5px;
  843. padding:5px;
  844. width:99%;
  845.  
  846. }
  847.  
  848.  
  849. li:before {
  850. content:'\eb97';
  851. font-family:'cappuccicons';
  852. margin-right:10px;
  853. font-size:15px;
  854. color:{color:title gradient 1};
  855. text-shadow: 0px 0px 3px {color:title gradient 1};
  856. }
  857.  
  858.  
  859.  
  860. ul {
  861. list-style-type: none;
  862.  
  863. }
  864.  
  865.  
  866. .readmore {
  867. position:absolute;
  868. vertical-align: middle;
  869. color:{color:italic gradient 1};
  870. text-shadow:1px 1px 0px {color:italic gradient 1};
  871. left:38%;
  872. text-transform:lowercase;
  873. font-size:12px;
  874. letter-spacing:2px;
  875. margin-top:-7px;
  876.  
  877. }
  878.  
  879.  
  880. .readmore a {
  881. color:{color:text};
  882. -webkit-transition: all 0.8s ease-in-out;
  883. -moz-transition: all 0.8s ease-in-out;
  884. -o-transition: all 0.8s ease-in-out;
  885. -ms-transition: all 0.8s ease-in-out;
  886. transition: all 0.8s ease-in-out;
  887. }
  888.  
  889.  
  890.  
  891. .readmore a:hover {
  892. -webkit-transition: all 0.8s ease-in-out;
  893. -moz-transition: all 0.8s ease-in-out;
  894. -o-transition: all 0.8s ease-in-out;
  895. -ms-transition: all 0.8s ease-in-out;
  896. transition: all 0.8s ease-in-out;
  897.  
  898. }
  899.  
  900.  
  901.  
  902. /* title + description styling */
  903.  
  904.  
  905.  
  906. .title {
  907. width:350px;
  908. top:5px;
  909. left:450px;
  910. font-family: 'Shrikhand', cursive;
  911. position:absolute;
  912. vertical-align:middle;
  913. font-weight:400;
  914. padding:20px;
  915. line-height:40px;
  916. letter-spacing:2px;
  917. text-align:center;
  918. z-index:99999999999999999999999999999999999999999999999999999;
  919. background: {color:title gradient 1};
  920. background: -webkit-radial-gradient(ellipse farthest-corner at center center, {color:title gradient 1} 29%, {color:title gradient 2} 33%, {color:title gradient 3} 56%, {color:title gradient 4} 100%);
  921. background: -moz-radial-gradient(ellipse farthest-corner at center center, {color:title gradient 1} 29%, {color:title gradient 2} 33%, {color:title gradient 3} 56%, {color:title gradient 4} 100%);
  922. background: radial-gradient(ellipse farthest-corner at center center, {color:title gradient 1} 29%, {color:title gradient 2} 33%, {color:title gradient 3} 56%, {color:title gradient 4} 100%);
  923. -webkit-background-clip: text;
  924. -webkit-text-fill-color: transparent;
  925. text-shadow:2px 1px 20px {color:title gradient 1};
  926. font-size: 60px;
  927. -webkit-animation: fadeInOut ease 1s;
  928. -moz-animation: fadeInOut ease 1s;
  929. -o-animation: fadeInOut ease 1s;
  930. -ms-animation: fadeInOut ease 1s;
  931. animation: bounce 3.5s;
  932. animation-direction: alternate;
  933. animation-iteration-count: infinite;
  934. }
  935.  
  936. @keyframes bounce {
  937. 0% { transform: translateY(0); }
  938. 100% { transform: translateY(-50px); }
  939. }
  940.  
  941.  
  942.  
  943. .title b {
  944. font-size:60px;
  945. font-style:italic;
  946. letter-spacing:5px;
  947. vertical-align:middle;
  948. padding:8px;
  949. text-transform:lowercase;
  950. -webkit-text-fill-color: transparent;
  951. -webkit-text-stroke: 1px {color:text};
  952. text-shadow:1px 1px 20px {color:bold};
  953.  
  954.  
  955. }
  956.  
  957. .description {
  958. position:absolute;
  959. top:545px;
  960. left:585px;
  961. font-size:16px;
  962. width:280px;
  963. text-align:Center;
  964. height:50px;
  965. line-height:25px;
  966. overflow:none;
  967. font-style:italic;
  968. -webkit-animation: slide-in-fwd-center 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  969. animation: slide-in-fwd-center 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  970. }
  971.  
  972. @-webkit-keyframes slide-in-fwd-center {
  973. 0% {
  974. -webkit-transform: translateZ(-30px);
  975. transform: translateZ(-30px);
  976. opacity: 0;
  977. }
  978. 100% {
  979. -webkit-transform: translateZ(0);
  980. transform: translateZ(0);
  981. opacity: 1;
  982. }
  983. }
  984. @keyframes slide-in-fwd-center {
  985. 0% {
  986. -webkit-transform: translateZ(-30px);
  987. transform: translateZ(-30px);
  988. opacity: 0;
  989. }
  990. 100% {
  991. -webkit-transform: translateZ(0);
  992. transform: translateZ(0);
  993. opacity: 1;
  994. }
  995. }
  996.  
  997.  
  998.  
  999.  
  1000. .description b {
  1001. font-size:17px;
  1002. padding:4px;
  1003. text-shadow:0px 0px 4px {color:bold};
  1004.  
  1005. }
  1006.  
  1007. .description i {
  1008. font-family: 'Shrikhand', cursive;
  1009. font-size:17px;
  1010. padding:3px;
  1011. }
  1012.  
  1013.  
  1014. .description big {
  1015. font-size:18px;
  1016. color:{color:text};
  1017. padding:4px;
  1018. line-height:30px;
  1019. border-bottom:none;
  1020. font-family: 'Shrikhand', cursive;
  1021.  
  1022. }
  1023.  
  1024.  
  1025. .sidebarimg {
  1026. position:absolute;
  1027. text-align:center;
  1028. top:180px;
  1029. left:560px;
  1030. z-index:99999999999999999999;
  1031. -webkit-animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  1032. animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  1033. }
  1034.  
  1035. @-webkit-keyframes slide-in-right {
  1036. 0% {
  1037. -webkit-transform: translateX(1000px);
  1038. transform: translateX(1000px);
  1039. opacity: 0;
  1040. }
  1041. 100% {
  1042. -webkit-transform: translateX(0);
  1043. transform: translateX(0);
  1044. opacity: 1;
  1045. }
  1046. }
  1047. @keyframes slide-in-right {
  1048. 0% {
  1049. -webkit-transform: translateX(1000px);
  1050. transform: translateX(1000px);
  1051. opacity: 0;
  1052. }
  1053. 100% {
  1054. -webkit-transform: translateX(0);
  1055. transform: translateX(0);
  1056. opacity: 1;
  1057. }
  1058. }
  1059.  
  1060.  
  1061.  
  1062. .sidebarimg img {
  1063. width:250px;
  1064. height:250px;
  1065. }
  1066.  
  1067.  
  1068. #s1 {
  1069. position:absolute;
  1070.  
  1071. }
  1072.  
  1073. .moon {
  1074. position:absolute;
  1075. z-index:999999999999999999999999;
  1076. top:450px;
  1077. opacity:.8;
  1078. left:450px;
  1079. -webkit-transition: all 0.8s ease-in-out;
  1080. -moz-transition: all 0.8s ease-in-out;
  1081. -o-transition: all 0.8s ease-in-out;
  1082. -ms-transition: all 0.8s ease-in-out;
  1083. transition: all 0.8s ease-in-out;
  1084. }
  1085.  
  1086. .moon:hover {
  1087. -webkit-transition: all 0.8s ease-in-out;
  1088. -moz-transition: all 0.8s ease-in-out;
  1089. -o-transition: all 0.8s ease-in-out;
  1090. -ms-transition: all 0.8s ease-in-out;
  1091. transition: all 0.8s ease-in-out;
  1092. -webkit-animation: jello-vertical 0.9s both;
  1093. animation: jello-vertical 0.9s both;
  1094. }
  1095.  
  1096. @-webkit-keyframes jello-vertical {
  1097. 0% {
  1098. -webkit-transform: scale3d(1, 1, 1);
  1099. transform: scale3d(1, 1, 1);
  1100. }
  1101. 30% {
  1102. -webkit-transform: scale3d(0.75, 1.25, 1);
  1103. transform: scale3d(0.75, 1.25, 1);
  1104. }
  1105. 40% {
  1106. -webkit-transform: scale3d(1.25, 0.75, 1);
  1107. transform: scale3d(1.25, 0.75, 1);
  1108. }
  1109. 50% {
  1110. -webkit-transform: scale3d(0.85, 1.15, 1);
  1111. transform: scale3d(0.85, 1.15, 1);
  1112. }
  1113. 65% {
  1114. -webkit-transform: scale3d(1.05, 0.95, 1);
  1115. transform: scale3d(1.05, 0.95, 1);
  1116. }
  1117. 75% {
  1118. -webkit-transform: scale3d(0.95, 1.05, 1);
  1119. transform: scale3d(0.95, 1.05, 1);
  1120. }
  1121. 100% {
  1122. -webkit-transform: scale3d(1, 1, 1);
  1123. transform: scale3d(1, 1, 1);
  1124. }
  1125. }
  1126. @keyframes jello-vertical {
  1127. 0% {
  1128. -webkit-transform: scale3d(1, 1, 1);
  1129. transform: scale3d(1, 1, 1);
  1130. }
  1131. 30% {
  1132. -webkit-transform: scale3d(0.75, 1.25, 1);
  1133. transform: scale3d(0.75, 1.25, 1);
  1134. }
  1135. 40% {
  1136. -webkit-transform: scale3d(1.25, 0.75, 1);
  1137. transform: scale3d(1.25, 0.75, 1);
  1138. }
  1139. 50% {
  1140. -webkit-transform: scale3d(0.85, 1.15, 1);
  1141. transform: scale3d(0.85, 1.15, 1);
  1142. }
  1143. 65% {
  1144. -webkit-transform: scale3d(1.05, 0.95, 1);
  1145. transform: scale3d(1.05, 0.95, 1);
  1146. }
  1147. 75% {
  1148. -webkit-transform: scale3d(0.95, 1.05, 1);
  1149. transform: scale3d(0.95, 1.05, 1);
  1150. }
  1151. 100% {
  1152. -webkit-transform: scale3d(1, 1, 1);
  1153. transform: scale3d(1, 1, 1);
  1154. }
  1155. }
  1156.  
  1157.  
  1158. .rectangle {
  1159. position:absolute;
  1160. z-index:99999999999999999999;
  1161. left:660px;
  1162. top:140px;
  1163. opacity:.8;
  1164.  
  1165. }
  1166.  
  1167. .square {
  1168. position:absolute;
  1169. z-index:99999999999999999999;
  1170. left:500px;
  1171. top:150px;
  1172. opacity:.8;
  1173.  
  1174. }
  1175.  
  1176. .boxes {
  1177. position:absolute;
  1178. z-index:999999999999999999999999;
  1179. left:600px;
  1180. top:250px;
  1181. opacity:.8;
  1182. }
  1183.  
  1184. .squiggles {
  1185. position:absolute;
  1186. z-index:99999999999999999999999;
  1187. left:500px;
  1188. top:270px;
  1189. opacity:.8;
  1190.  
  1191. }
  1192.  
  1193. .sbaccent {
  1194. position:absolute;
  1195. z-index:99999999999999999999999;
  1196. top:81px;
  1197. left:660px;
  1198. opacity:.8;
  1199. }
  1200.  
  1201. /* tabs styling by emily , keep this credit intact ! */
  1202.  
  1203.  
  1204. /* tabs styling */
  1205.  
  1206.  
  1207. .tab {
  1208. overflow: hidden;
  1209. background-color: transparent;
  1210. z-index:999999999999999999999999999999999999999999;
  1211. position:absolute;
  1212. padding:10px;
  1213. height:auto;
  1214. margin-top:5px;
  1215. left:-120px;
  1216. top:240px;
  1217. -webkit-animation: bounce-in-top 1.5s both;
  1218. animation: bounce-in-top 1.5s both;
  1219. }
  1220.  
  1221. @-webkit-keyframes bounce-in-top {
  1222. 0% {
  1223. -webkit-transform: translateY(-500px);
  1224. transform: translateY(-500px);
  1225. -webkit-animation-timing-function: ease-in;
  1226. animation-timing-function: ease-in;
  1227. opacity: 0;
  1228. }
  1229. 38% {
  1230. -webkit-transform: translateY(0);
  1231. transform: translateY(0);
  1232. -webkit-animation-timing-function: ease-out;
  1233. animation-timing-function: ease-out;
  1234. opacity: 1;
  1235. }
  1236. 55% {
  1237. -webkit-transform: translateY(-65px);
  1238. transform: translateY(-65px);
  1239. -webkit-animation-timing-function: ease-in;
  1240. animation-timing-function: ease-in;
  1241. }
  1242. 72% {
  1243. -webkit-transform: translateY(0);
  1244. transform: translateY(0);
  1245. -webkit-animation-timing-function: ease-out;
  1246. animation-timing-function: ease-out;
  1247. }
  1248. 81% {
  1249. -webkit-transform: translateY(-28px);
  1250. transform: translateY(-28px);
  1251. -webkit-animation-timing-function: ease-in;
  1252. animation-timing-function: ease-in;
  1253. }
  1254. 90% {
  1255. -webkit-transform: translateY(0);
  1256. transform: translateY(0);
  1257. -webkit-animation-timing-function: ease-out;
  1258. animation-timing-function: ease-out;
  1259. }
  1260. 95% {
  1261. -webkit-transform: translateY(-8px);
  1262. transform: translateY(-8px);
  1263. -webkit-animation-timing-function: ease-in;
  1264. animation-timing-function: ease-in;
  1265. }
  1266. 100% {
  1267. -webkit-transform: translateY(0);
  1268. transform: translateY(0);
  1269. -webkit-animation-timing-function: ease-out;
  1270. animation-timing-function: ease-out;
  1271. }
  1272. }
  1273. @keyframes bounce-in-top {
  1274. 0% {
  1275. -webkit-transform: translateY(-500px);
  1276. transform: translateY(-500px);
  1277. -webkit-animation-timing-function: ease-in;
  1278. animation-timing-function: ease-in;
  1279. opacity: 0;
  1280. }
  1281. 38% {
  1282. -webkit-transform: translateY(0);
  1283. transform: translateY(0);
  1284. -webkit-animation-timing-function: ease-out;
  1285. animation-timing-function: ease-out;
  1286. opacity: 1;
  1287. }
  1288. 55% {
  1289. -webkit-transform: translateY(-65px);
  1290. transform: translateY(-65px);
  1291. -webkit-animation-timing-function: ease-in;
  1292. animation-timing-function: ease-in;
  1293. }
  1294. 72% {
  1295. -webkit-transform: translateY(0);
  1296. transform: translateY(0);
  1297. -webkit-animation-timing-function: ease-out;
  1298. animation-timing-function: ease-out;
  1299. }
  1300. 81% {
  1301. -webkit-transform: translateY(-28px);
  1302. transform: translateY(-28px);
  1303. -webkit-animation-timing-function: ease-in;
  1304. animation-timing-function: ease-in;
  1305. }
  1306. 90% {
  1307. -webkit-transform: translateY(0);
  1308. transform: translateY(0);
  1309. -webkit-animation-timing-function: ease-out;
  1310. animation-timing-function: ease-out;
  1311. }
  1312. 95% {
  1313. -webkit-transform: translateY(-8px);
  1314. transform: translateY(-8px);
  1315. -webkit-animation-timing-function: ease-in;
  1316. animation-timing-function: ease-in;
  1317. }
  1318. 100% {
  1319. -webkit-transform: translateY(0);
  1320. transform: translateY(0);
  1321. -webkit-animation-timing-function: ease-out;
  1322. animation-timing-function: ease-out;
  1323. }
  1324. }
  1325.  
  1326.  
  1327.  
  1328. .tablink {
  1329. font-size:17px;
  1330. font-weight:bold;
  1331. cursor: pointer;
  1332. width:50px;
  1333. height:45px;
  1334. font-weight:500;
  1335. border-radius:5px;
  1336. font-family: 'Shrikhand', cursive;
  1337. padding:10px;
  1338. padding-top:15px;
  1339. margin-top:15px;
  1340. text-align:center;
  1341. text-transform:lowercase;
  1342. display:block;
  1343. text-shadow:none;
  1344. line-height:20px;
  1345. z-index:9999999999999999999999999999999999999;
  1346. transition: all 0.8s ease-in-out;
  1347. color:{color:text};
  1348.  
  1349. }
  1350.  
  1351. .tablink:hover {
  1352. text-shadow:none;
  1353. color:{color:accent};
  1354. -webkit-transition: all 0.8s ease-in-out;
  1355. -moz-transition: all 0.8s ease-in-out;
  1356. -o-transition: all 0.8s ease-in-out;
  1357. -ms-transition: all 0.8s ease-in-out;
  1358. transition: all 0.8s ease-in-out;
  1359. }
  1360.  
  1361.  
  1362.  
  1363.  
  1364.  
  1365.  
  1366.  
  1367.  
  1368.  
  1369.  
  1370.  
  1371. /* ask styling */
  1372.  
  1373.  
  1374. .asker, .asker a {
  1375. letter-spacing: 2px;
  1376. z-index:999999999;
  1377. line-height:5px;
  1378. text-align:center;
  1379. margin-top:15px;
  1380. font-size:20px;
  1381. color:{color:title gradient 1};
  1382. text-shadow:0px 0px 5px {color:title gradient 2};
  1383. font-style:italic;
  1384. vertical-align: middle;
  1385. text-transform:uppercase;
  1386.  
  1387. }
  1388.  
  1389. .asker b a {
  1390. font-family: 'Shrikhand', cursive;
  1391. text-transform:lowercase;
  1392. font-size:30px;
  1393. color:{color:bold};
  1394. -webkit-text-fill-color: transparent;
  1395. -webkit-text-stroke: 1px {color:bold};
  1396. text-shadow:0px 0px 10px {color:bold};
  1397. }
  1398.  
  1399. .qanswer {
  1400. margin-top:75px;
  1401. }
  1402.  
  1403.  
  1404. .question {
  1405. position: relative;
  1406. background-color:{color:container};
  1407. margin-left:15px;
  1408. padding-top:10px;
  1409. padding-bottom:10px;
  1410. margin-top:15px;
  1411. width:85%;
  1412. text-transform:lowercase;
  1413.  
  1414.  
  1415. }
  1416.  
  1417.  
  1418.  
  1419.  
  1420.  
  1421.  
  1422.  
  1423.  
  1424. /* quote styling */
  1425.  
  1426.  
  1427. #quote {
  1428. color:{color:text};
  1429. padding-top:30px;
  1430. margin-left:23%;
  1431. width:50%;
  1432. font-size:16px;
  1433. line-height:13px;
  1434. text-align:justify;
  1435. letter-spacing:1px;
  1436. text-transform:lowercase;
  1437.  
  1438. }
  1439.  
  1440. .source {
  1441. color:{color:bold};
  1442. text-shadow:0px 0px 10px {color:bold};
  1443. margin-top:30px;
  1444. font-size:25px;
  1445. line-height:25px;
  1446. font-weight:500;
  1447. text-align:center;
  1448. letter-spacing:1px;
  1449. text-transform:lowercase;
  1450. padding-bottom:30px;
  1451. font-family: 'Shrikhand', cursive;
  1452.  
  1453. }
  1454.  
  1455.  
  1456.  
  1457. /* chat styling */
  1458.  
  1459.  
  1460. .answer span,.convo li {
  1461. margin:0 5px 5px 5px;
  1462. border-radius:1em;
  1463. padding:5px;
  1464. max-width:70%;
  1465. clear:both;
  1466. font-size:15px;
  1467. position:relative;
  1468. margin-top:20px;
  1469.  
  1470. }
  1471.  
  1472.  
  1473. .convo li:before {
  1474. content:"";
  1475. }
  1476.  
  1477.  
  1478. .answer .them,.user_1,.user_3,.user_5,.user_7,.user_9,.user_11 {
  1479. float:left;
  1480. background:{color:accent};
  1481. text-transform:lowercase;
  1482. width:auto;
  1483. color:{color:text};
  1484. left:3px;
  1485.  
  1486. }
  1487.  
  1488.  
  1489. .me::after,.user_1::after,.user_3::after,.user_5::after,.user_7::after,.user_9::after,.user_11::after {
  1490. content:"";
  1491. position:absolute;
  1492. left:-.5em;
  1493. bottom:0;
  1494. width:.5em;
  1495. height:1em;
  1496. border-right:.5em solid {color:accent};
  1497. border-bottom-right-radius:1em .5em;
  1498.  
  1499. }
  1500.  
  1501.  
  1502. .answer .me,.user_2,.user_4,.user_6,.user_8,.user_10,.user_12 {
  1503. right:3px;
  1504. float:right;
  1505. text-align:right;
  1506. background-color:{color:accent};
  1507. text-transform:lowercase;
  1508. width:auto;
  1509. color:{color:text};
  1510.  
  1511. }
  1512.  
  1513.  
  1514. .them::after,.user_2::after,.user_4::after,.user_6::after,.user_8::after,.user_10::after,.user_12::after {
  1515. content:"";
  1516. position:absolute;
  1517. right:-.5em;
  1518. bottom:0;
  1519. width:.5em;
  1520. height:1em;
  1521. border-left:.5em solid {color:accent};
  1522. border-bottom-left-radius:1em .5em;
  1523.  
  1524. }
  1525.  
  1526.  
  1527. .me p,.answer,.asked span {
  1528. padding:0;
  1529. margin:0;
  1530.  
  1531. }
  1532.  
  1533.  
  1534. .answer {
  1535. overflow:hidden;
  1536.  
  1537. }
  1538.  
  1539.  
  1540. .asked p {
  1541. text-align: left;
  1542. margin: 0 0px 10px 0px;
  1543. padding: 0;
  1544. color: {color:text};
  1545. font-size:15px;
  1546. line-height: 0px;
  1547. }
  1548.  
  1549.  
  1550. .footerright .viasrc {
  1551. float: left;
  1552.  
  1553. }
  1554.  
  1555.  
  1556.  
  1557. .asked a {
  1558. margin:0;
  1559. padding:0;
  1560.  
  1561. }
  1562.  
  1563.  
  1564. .user_4 {
  1565. background-color:{color:accent};
  1566. color:{color:text};
  1567.  
  1568. }
  1569.  
  1570.  
  1571. .user_4::after {
  1572. border-color:{color:accent};
  1573.  
  1574. }
  1575.  
  1576.  
  1577. .user_6 {
  1578. background-color:{color:accent};
  1579. color:{color:text};
  1580.  
  1581. }
  1582.  
  1583.  
  1584. .user_6::after {
  1585. border-color:{color:accent};
  1586. }
  1587.  
  1588.  
  1589. .user_5 {
  1590. background-color:{color:accent};
  1591. color:{color:text};
  1592.  
  1593. }
  1594.  
  1595.  
  1596. .user_5::after {
  1597. border-color:{color:accent};
  1598.  
  1599. }
  1600.  
  1601.  
  1602. .user_3 {
  1603. background-color:{color:accent};
  1604. color:{color:text};
  1605.  
  1606. }
  1607.  
  1608.  
  1609. .user_3::after {
  1610. border-color:{color:accent};
  1611.  
  1612. }
  1613.  
  1614.  
  1615. .user_7 {
  1616. background-color:{color:accent};
  1617. color:{color:text};
  1618.  
  1619. }
  1620.  
  1621.  
  1622. .user_7::after {
  1623. border-color:{color:accent};
  1624.  
  1625. }
  1626.  
  1627.  
  1628. .user_8 {
  1629. background-color:{color:accent};
  1630. color:{color:text};
  1631.  
  1632. }
  1633.  
  1634.  
  1635. .user_8::after {
  1636. border-color:{color:accent};
  1637.  
  1638. }
  1639.  
  1640.  
  1641. .user_9 {
  1642. background-color:{color:accent};
  1643. color:{color:text};
  1644.  
  1645. }
  1646.  
  1647.  
  1648. .user_9::after {
  1649. border-color:{color:accent};
  1650.  
  1651. }
  1652.  
  1653.  
  1654. .convo {
  1655. overflow: hidden;
  1656. list-style-type: none;
  1657. padding: 0;
  1658. margin: 0;
  1659. }
  1660.  
  1661.  
  1662. .convo b, strong {
  1663. color:{color:text};
  1664. font-size:16px;
  1665. }
  1666.  
  1667.  
  1668. /* audio styling */
  1669.  
  1670. .play {
  1671. position:relative;
  1672. margin-top:30px;
  1673. margin-left:40px;
  1674. z-index:9999999999999;
  1675. width:32px;
  1676. height:25px;
  1677. overflow:hidden;
  1678. opacity:1;
  1679.  
  1680. }
  1681.  
  1682.  
  1683.  
  1684. .info {
  1685. color:{color:text};
  1686. position:relative;
  1687. height:auto;
  1688. display:block;
  1689. margin-top:50px;
  1690. width:101%;
  1691. margin-left:-5px;
  1692.  
  1693. }
  1694.  
  1695.  
  1696. .details {
  1697. font-size:20px;
  1698. text-transform:lowercase;
  1699. margin-left:40px;
  1700. letter-spacing:3px;
  1701. color:{color:italic gradient 2};
  1702. text-shadow: 0px 0 2px {color:italic gradient 2};
  1703.  
  1704. }
  1705.  
  1706.  
  1707.  
  1708. .artist {
  1709. font-family: 'Shrikhand', cursive;
  1710. font-size:25px;
  1711. margin-top:6px;
  1712. text-transform:lowercase;
  1713. color:{color:italic gradient 1};
  1714. -webkit-text-fill-color: transparent;
  1715. -webkit-text-stroke: 1px {color:italic gradient 1};
  1716. text-shadow:0px 0px 10px {color:italic gradient 1};
  1717. padding-bottom:10px;
  1718. }
  1719.  
  1720.  
  1721.  
  1722.  
  1723. /* credits ; DO NOT EDIT / REMOVE */
  1724.  
  1725. #credit a {
  1726. right:20px;
  1727. bottom:20px;
  1728. position:fixed;
  1729. color:{color:title gradient 1};
  1730. background-color:transparent;
  1731. text-shadow: 0px 0px 6px {color:title gradient 1};
  1732. padding:8px;
  1733. border-radius:10px;
  1734. font-size:16px;
  1735. -webkit-transition: all 1s ease-in-out;
  1736. -moz-transition: all 1s ease-in-out;
  1737. -o-transition: all 1s ease-in-out;
  1738. -ms-transition: all 1s ease-in-out;
  1739. transition: all 1s ease-in-out;
  1740.  
  1741.  
  1742. }
  1743.  
  1744. #credit a:hover {
  1745. text-shadow: 0px 0px 10px {color:title gradient 1};
  1746. color:{color:title gradient 1};
  1747. -webkit-transition: all 1s ease-in-out;
  1748. -moz-transition: all 1s ease-in-out;
  1749. -o-transition: all 1s ease-in-out;
  1750. -ms-transition: all 1s ease-in-out;
  1751. transition: all 1s ease-in-out;
  1752.  
  1753. }
  1754.  
  1755. </style>
  1756.  
  1757.  
  1758.  
  1759.  
  1760.  
  1761.  
  1762. </head>
  1763.  
  1764.  
  1765. <body>
  1766.  
  1767.  
  1768.  
  1769.  
  1770. <div id="container">
  1771.  
  1772.  
  1773.  
  1774. <!-- title , desc + sb imgs -->
  1775. <div class="rectangle">
  1776.  
  1777. <svg width="250" height="350" xmlns="http://www.w3.org/2000/svg">
  1778. <g id="Layer_1">
  1779. <rect rx="2" id="svg_10" height="316" width="99" y="18.5" x="72" stroke="{color:title gradient 2}" fill="{color:title gradient 2}"/>
  1780. </g>
  1781.  
  1782. </svg>
  1783. </div>
  1784.  
  1785. <div class="square">
  1786.  
  1787. <svg width="350" height="350" xmlns="http://www.w3.org/2000/svg">
  1788. <g id="Layer_1">
  1789. <rect id="svg_1" height="209" width="209" y="88.5" x="40" stroke="{color:accent}" fill="{color:accent}"/>
  1790. </g>
  1791.  
  1792. </svg>
  1793. </div>
  1794.  
  1795. <div class="sidebarimg">
  1796. <img id="s1" src="{image:sb img 1}" draggable="false">
  1797.  
  1798. </div>
  1799.  
  1800.  
  1801. <div class="sbaccent">
  1802.  
  1803. <svg width="350" height="450" xmlns="http://www.w3.org/2000/svg">
  1804. <g id="Layer_1">
  1805. <title>Layer 1</title>
  1806. <polyline fill="none" stroke="#000" points="500,175.5 500,175.5 " id="svg_10" stroke-linecap="round"/>
  1807. <path d="m54,98.5c1,0 4.06649,-0.87221 8,-3c12.21923,-6.60987 29.52358,-18.2049 51,-26c19.62772,-7.12409 30.97504,-7.49972 46,-8c9.99446,-0.33278 18,0 25,0c5,0 8.15927,-0.38935 11,1c3.23892,1.58411 5.04083,6.18635 4,9c-3.19868,8.64687 -19.95648,18.05926 -39,32c-21.95004,16.06846 -42.99857,30.8212 -55,42c-8.81132,8.20735 -16.37641,15.08031 -18,19c-0.38268,0.92387 0.04814,1.53528 3,1c8.40691,-1.52446 24.82544,-9.44148 37,-14c14.80743,-5.54434 26.8981,-9.39902 34,-11c5.93385,-1.33768 11,-1 15,-1c2,0 3.1731,-0.14726 4,1c1.30745,1.814 0.84467,5.87389 -4,12c-9.30444,11.76552 -17.95055,22.04065 -27,33c-9.94585,12.04492 -14.54901,17.60641 -18,23c-2.41028,3.76704 -2.70711,4.29289 -2,5c0.70711,0.70711 9.05707,-1.83394 18,-5c8.05415,-2.85141 13.07179,-5.69124 18,-7c3.05634,-0.81166 4.29289,-1.70711 5,-1c0.70711,0.70711 0.72093,6.19112 -2,15c-3.1786,10.2906 -6.8484,18.0451 -9,25c-0.93459,3.02101 -1,5 -1,5c0,0 3.93414,-0.14429 6,-1c2.92157,-1.21014 4,-1 4,-1c0,0 -0.34315,2.87605 -2,8c-1.26855,3.92311 -2.48625,7.82376 -3,10c-0.22975,0.97324 0,1 1,1c2,0 3,0 4,0c0,0 0.24744,1.01022 0,4c-0.50171,6.06204 -3.1169,12.96765 -5,20c-1.0665,3.98279 -1,7 -1,7c0,1 -0.30656,1.4588 1,2c0.92387,0.38269 1.29289,0.29291 2,1c0.70711,0.70709 1.29289,0.29291 2,1c0.70711,0.70709 0,1 0,1l0,-1" id="svg_3" stroke="{color:title gradient 3}" fill="none"/>
  1808. </g>
  1809.  
  1810. </svg>
  1811. </div>
  1812.  
  1813.  
  1814. <div class="squiggles">
  1815.  
  1816. <svg width="350" height="350" xmlns="http://www.w3.org/2000/svg">
  1817. <g id="Layer_1">
  1818. <title>Layer 1</title>
  1819. <polyline stroke-linecap="round" id="svg_10" points="500,175.5 500,175.5 " stroke="{color:title gradient 4}" fill="none"/>
  1820. <g transform="rotate(27.3455 188.497 154)" stroke="null" id="svg_14">
  1821. <path stroke="{color:title gradient 4}" d="m71,290.5c0,-1 0,-1 0,-6c0,-5 0,-11 0,-16c0,-5 -0.14805,-11.22836 1,-14c2.16478,-5.22626 6.87856,-5.49345 10,-6c3.94835,-0.64073 8,-1 12,-1c6,0 11,0 16,0c4,0 9.03044,0.19383 16,-1c5.02582,-0.86089 10.17572,-1.60703 15,-4c5.22364,-2.59106 10,-6 14,-10c4,-4 8.25195,-8.88051 11,-15c2.20606,-4.91257 5.28472,-11.92485 7,-19c1.20139,-4.95547 4.54863,-13.76993 6,-18c1.65482,-4.82303 2.84796,-9.0797 5,-13c2.80591,-5.11144 5.3851,-9.37202 8,-13c2.48071,-3.44181 7,-6 11,-8c4,-2 7.71201,-3.98163 13,-5c6.87369,-1.32375 11,-1 14,-1c7,0 12,0 16,0c6,0 13,0 19,0c6,0 12,0 16,0c8,0 12.08743,0.20606 17,-2c4.07967,-1.83204 9.29361,-5.72651 13,-10c3.276,-3.77727 4.16797,-7.92034 6,-12c2.20605,-4.91256 3,-9 5,-13c2,-4 4,-7 6,-10c2,-3 4,-6 7,-9c2,-2 3.82376,-3.48626 6,-4c0.97324,-0.22975 3.02676,-0.77025 4,-1c2.17624,-0.51374 4,-1 4,-1c2,0 3,0 5,0c1,0 3,0 5,0c1,0 2,-1 3,-1c2,0 3,0 3,0l1,0l0,0" id="svg_8" fill="none"/>
  1822. <path stroke="{color:title gradient 4}" d="m11,230.5c0,-1 0,-1 0,-6c0,-5 0,-11 0,-16c0,-5 -0.14805,-11.22836 1,-14c2.16478,-5.22626 6.87856,-5.49345 10,-6c3.94835,-0.64073 8,-1 12,-1c6,0 11,0 16,0c4,0 9.03044,0.19383 16,-1c5.02582,-0.86089 10.17572,-1.60703 15,-4c5.22364,-2.59106 10,-6 14,-10c4,-4 8.25195,-8.88051 11,-15c2.20606,-4.91257 5.28472,-11.92485 7,-19c1.20139,-4.95547 4.54863,-13.76993 6,-18c1.65482,-4.82303 2.84796,-9.0797 5,-13c2.80591,-5.11144 5.3851,-9.37202 8,-13c2.48071,-3.44181 7,-6 11,-8c4,-2 7.71201,-3.98163 13,-5c6.87369,-1.32375 11,-1 14,-1c7,0 12,0 16,0c6,0 13,0 19,0c6,0 12,0 16,0c8,0 12.08743,0.20606 17,-2c4.07967,-1.83204 9.29361,-5.72651 13,-10c3.276,-3.77727 4.16797,-7.92034 6,-12c2.20605,-4.91256 3,-9 5,-13c2,-4 4,-7 6,-10c2,-3 4,-6 7,-9c2,-2 3.82376,-3.48626 6,-4c0.97324,-0.22975 3.02676,-0.77025 4,-1c2.17624,-0.51374 4,-1 4,-1c2,0 3,0 5,0c1,0 3,0 5,0c1,0 2,-1 3,-1c2,0 3,0 3,0l1,0l0,0" id="svg_9" fill="none"/>
  1823. <path stroke="{color:title gradient 4}" d="m31,250.5c0,-1 0,-1 0,-6c0,-5 0,-11 0,-16c0,-5 -0.14805,-11.22836 1,-14c2.16478,-5.22626 6.87856,-5.49345 10,-6c3.94835,-0.64073 8,-1 12,-1c6,0 11,0 16,0c4,0 9.03044,0.19383 16,-1c5.02582,-0.86089 10.17572,-1.60703 15,-4c5.22364,-2.59106 10,-6 14,-10c4,-4 8.25195,-8.88051 11,-15c2.20606,-4.91257 5.28472,-11.92485 7,-19c1.20139,-4.95547 4.54863,-13.76993 6,-18c1.65482,-4.82303 2.84796,-9.0797 5,-13c2.80591,-5.11144 5.3851,-9.37202 8,-13c2.48071,-3.44181 7,-6 11,-8c4,-2 7.71201,-3.98163 13,-5c6.87369,-1.32375 11,-1 14,-1c7,0 12,0 16,0c6,0 13,0 19,0c6,0 12,0 16,0c8,0 12.08743,0.20606 17,-2c4.07967,-1.83204 9.29361,-5.72651 13,-10c3.276,-3.77727 4.16797,-7.92034 6,-12c2.20605,-4.91256 3,-9 5,-13c2,-4 4,-7 6,-10c2,-3 4,-6 7,-9c2,-2 3.82376,-3.48626 6,-4c0.97324,-0.22975 3.02676,-0.77025 4,-1c2.17624,-0.51374 4,-1 4,-1c2,0 3,0 5,0c1,0 3,0 5,0c1,0 2,-1 3,-1c2,0 3,0 3,0l1,0l0,0" id="svg_12" fill="none"/>
  1824. <path stroke="{color:title gradient 4}" d="m51,270.5c0,-1 0,-1 0,-6c0,-5 0,-11 0,-16c0,-5 -0.14805,-11.22836 1,-14c2.16478,-5.22626 6.87856,-5.49345 10,-6c3.94835,-0.64073 8,-1 12,-1c6,0 11,0 16,0c4,0 9.03044,0.19383 16,-1c5.02582,-0.86089 10.17572,-1.60703 15,-4c5.22364,-2.59106 10,-6 14,-10c4,-4 8.25195,-8.88051 11,-15c2.20606,-4.91257 5.28472,-11.92485 7,-19c1.20139,-4.95547 4.54863,-13.76993 6,-18c1.65482,-4.82303 2.84796,-9.0797 5,-13c2.80591,-5.11144 5.3851,-9.37202 8,-13c2.48071,-3.44181 7,-6 11,-8c4,-2 7.71201,-3.98163 13,-5c6.87369,-1.32375 11,-1 14,-1c7,0 12,0 16,0c6,0 13,0 19,0c6,0 12,0 16,0c8,0 12.08743,0.20606 17,-2c4.07967,-1.83204 9.29361,-5.72651 13,-10c3.276,-3.77727 4.16797,-7.92034 6,-12c2.20605,-4.91256 3,-9 5,-13c2,-4 4,-7 6,-10c2,-3 4,-6 7,-9c2,-2 3.82376,-3.48626 6,-4c0.97324,-0.22975 3.02676,-0.77025 4,-1c2.17624,-0.51374 4,-1 4,-1c2,0 3,0 5,0c1,0 3,0 5,0c1,0 2,-1 3,-1c2,0 3,0 3,0l1,0l0,0" id="svg_13" fill="none"/>
  1825. </g>
  1826. </g>
  1827.  
  1828. </svg>
  1829. </div>
  1830.  
  1831. <div class="boxes">
  1832. <svg width="350" height="350" xmlns="http://www.w3.org/2000/svg">
  1833. <g id="Layer_1">
  1834. <g id="svg_76">
  1835. <g id="svg_48">
  1836. <g id="svg_34">
  1837. <rect id="svg_22" height="12" width="11" y="130" x="128" stroke="{color:text}" fill="{color:text}"/>
  1838. <rect id="svg_23" height="12" width="11" y="211" x="169" stroke="{color:text}" fill="{color:text}"/>
  1839. <rect id="svg_24" height="12" width="11" y="115" x="150" stroke="{color:text}" fill="{color:text}"/>
  1840. <rect id="svg_25" height="12" width="11" y="151" x="149" stroke="{color:text}" fill="{color:text}"/>
  1841. <rect id="svg_26" height="12" width="11" y="173" x="169" stroke="{color:text}" fill="{color:text}"/>
  1842. <rect id="svg_27" height="12" width="11" y="191" x="189" stroke="{color:text}" fill="{color:text}"/>
  1843. <rect id="svg_28" height="12" width="11" y="111" x="109" stroke="{color:text}" fill="{color:text}"/>
  1844. <rect id="svg_29" height="12" width="11" y="191" x="189" stroke="{color:text}" fill="{color:text}"/>
  1845. <rect id="svg_30" height="12" width="11" y="111" x="109" stroke="{color:text}" fill="{color:text}"/>
  1846. <rect id="svg_31" height="12" width="11" y="144" x="108" stroke="{color:text}" fill="{color:text}"/>
  1847. <rect id="svg_32" height="12" width="11" y="151" x="149" stroke="{color:text}" fill="{color:text}"/>
  1848. <rect id="svg_33" height="12" width="11" y="188" x="147" stroke="{color:text}" fill="{color:text}"/>
  1849. </g>
  1850. <g id="svg_47">
  1851. <rect id="svg_35" height="12" width="11" y="126" x="195" stroke="{color:text}" fill="{color:text}"/>
  1852. <rect id="svg_36" height="12" width="11" y="207" x="236" stroke="{color:text}" fill="{color:text}"/>
  1853. <rect id="svg_37" height="12" width="11" y="111" x="217" stroke="{color:text}" fill="{color:text}"/>
  1854. <rect id="svg_38" height="12" width="11" y="147" x="216" stroke="{color:text}" fill="{color:text}"/>
  1855. <rect id="svg_39" height="12" width="11" y="169" x="236" stroke="{color:text}" fill="{color:text}"/>
  1856. <rect id="svg_40" height="12" width="11" y="187" x="256" stroke="{color:text}" fill="{color:text}"/>
  1857. <rect id="svg_41" height="12" width="11" y="107" x="176" stroke="{color:text}" fill="{color:text}"/>
  1858. <rect id="svg_42" height="12" width="11" y="187" x="256" stroke="{color:text}" fill="{color:text}"/>
  1859. <rect id="svg_43" height="12" width="11" y="107" x="176" stroke="{color:text}" fill="{color:text}"/>
  1860. <rect id="svg_44" height="12" width="11" y="140" x="175" stroke="{color:text}" fill="{color:text}"/>
  1861. <rect id="svg_45" height="12" width="11" y="147" x="216" stroke="{color:text}" fill="{color:text}"/>
  1862. <rect id="svg_46" height="12" width="11" y="184" x="214" stroke="{color:text}" fill="{color:text}"/>
  1863. </g>
  1864. </g>
  1865. <g id="svg_75">
  1866. <g id="svg_61">
  1867. <rect id="svg_49" height="12" width="11" y="188" x="41" stroke="{color:text}" fill="{color:text}"/>
  1868. <rect id="svg_50" height="12" width="11" y="269" x="82" stroke="{color:text}" fill="{color:text}"/>
  1869. <rect id="svg_51" height="12" width="11" y="173" x="63" stroke="{color:text}" fill="{color:text}"/>
  1870. <rect id="svg_52" height="12" width="11" y="209" x="62" stroke="{color:text}" fill="{color:text}"/>
  1871. <rect id="svg_53" height="12" width="11" y="231" x="82" stroke="{color:text}" fill="{color:text}"/>
  1872. <rect id="svg_54" height="12" width="11" y="249" x="102" stroke="{color:text}" fill="{color:text}"/>
  1873. <rect id="svg_55" height="12" width="11" y="169" x="22" stroke="{color:text}" fill="{color:text}"/>
  1874. <rect id="svg_56" height="12" width="11" y="249" x="102" stroke="{color:text}" fill="{color:text}"/>
  1875. <rect id="svg_57" height="12" width="11" y="169" x="22" stroke="{color:text}" fill="{color:text}"/>
  1876. <rect id="svg_58" height="12" width="11" y="202" x="21" stroke="{color:text}" fill="{color:text}"/>
  1877. <rect id="svg_59" height="12" width="11" y="209" x="62" stroke="{color:text}" fill="{color:text}"/>
  1878. <rect id="svg_60" height="12" width="11" y="246" x="60" stroke="{color:text}" fill="{color:text}"/>
  1879. </g>
  1880. <g id="svg_74">
  1881. <rect id="svg_62" height="12" width="11" y="184" x="108" stroke="{color:text}" fill="{color:text}"/>
  1882. <rect id="svg_63" height="12" width="11" y="265" x="149" stroke="{color:text}" fill="{color:text}"/>
  1883. <rect id="svg_64" height="12" width="11" y="169" x="130" stroke="{color:text}" fill="{color:text}"/>
  1884. <rect id="svg_65" height="12" width="11" y="205" x="129" stroke="{color:text}" fill="{color:text}"/>
  1885. <rect id="svg_66" height="12" width="11" y="227" x="149" stroke="{color:text}" fill="{color:text}"/>
  1886. <rect id="svg_67" height="12" width="11" y="245" x="169" stroke="{color:text}" fill="{color:text}"/>
  1887. <rect id="svg_68" height="12" width="11" y="165" x="89" stroke="{color:text}" fill="{color:text}"/>
  1888. <rect id="svg_69" height="12" width="11" y="245" x="169" stroke="{color:text}" fill="{color:text}"/>
  1889. <rect id="svg_70" height="12" width="11" y="165" x="89" stroke="{color:text}" fill="{color:text}"/>
  1890. <rect id="svg_71" height="12" width="11" y="198" x="88" stroke="{color:text}" fill="{color:text}"/>
  1891. <rect id="svg_72" height="12" width="11" y="205" x="129" stroke="{color:text}" fill="{color:text}"/>
  1892. <rect id="svg_73" height="12" width="11" y="242" x="127" stroke="{color:text}" fill="{color:text}"/>
  1893. </g>
  1894. </g>
  1895. </g>
  1896. </g>
  1897.  
  1898. </svg>
  1899. </div>
  1900.  
  1901.  
  1902. <div class="moon">
  1903.  
  1904. <svg width="250" height="250" xmlns="http://www.w3.org/2000/svg">
  1905. <g id="Layer_1">
  1906. <path transform="rotate(-31.594 119.486 128.3)" id="svg_1" d="m164.30043,215.29993l0,0c-49.49618,0 -89.62872,-38.94438 -89.62872,-87c0,-48.04946 40.13254,-87 89.62872,-87l0,0c-28.2079,20.53722 -44.81128,52.7713 -44.81128,87s16.60338,66.45663 44.81128,87z" stroke="{color:title gradient 3}" fill="{color:title gradient 3}"/>
  1907.  
  1908. </g>
  1909.  
  1910. </svg>
  1911. </div>
  1912.  
  1913. <div class="description">{text:desc}</div>
  1914.  
  1915. <div class="title">{text:title}</div>
  1916.  
  1917. <!-- tabs code by emily !! do not replicate and / or steal KEEP THIS CREDIT INTACT -->
  1918.  
  1919.  
  1920.  
  1921. <div class="tab">
  1922.  
  1923.  
  1924. <a href="/" class="tablink"><span style="padding:0px;color:{color:title gradient 1};">&nbsp;<span class="cp cp-stars"></span></span>&nbsp;<br>home.</a>
  1925. <br>
  1926. <a href="/ask" class="tablink"><span style="padding:0px;color:{color:title gradient 2};">&nbsp;<span class="cp cp-star"></span></span>&nbsp;<br>mssg.</a>
  1927. <br>
  1928. <a href="{text:free link 1 url}" class="tablink"><span style="padding:0px;color:{color:title gradient 3};">&nbsp;<span class="cp cp-spaceship"></span></span>&nbsp;<br>{text:free link 1 title}.</a>
  1929. <br>
  1930.  
  1931. </div>
  1932.  
  1933.  
  1934.  
  1935. <div id="pagination">{block:Pagination}
  1936. {block:PreviousPage}<a href="{PreviousPage}">back</a>&nbsp;{/block:PreviousPage} {block:NextPage}<a href="{NextPage}">next</a>
  1937. {/block:NextPage}
  1938. {/block:Pagination}</div>
  1939. <div class="postholder">
  1940.  
  1941.  
  1942.  
  1943.  
  1944. {block:Posts}
  1945.  
  1946.  
  1947. <div class="posts">
  1948.  
  1949.  
  1950. <!-- pinned -->
  1951.  
  1952.  
  1953. {block:PinnedPostLabel}<div class="pinnedposts"><b>&nbsp;&nbsp;pinned !</b></div><br> {/block:PinnedPostLabel}
  1954.  
  1955.  
  1956. {block:Text}{block:Title}<h3>{Title}</h3>{/block:Title}<p>{Body}</p>{/block:Text}
  1957.  
  1958. <!-- pictures , videos , photoset -->
  1959.  
  1960.  
  1961. {block:Photo}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  1962.  
  1963. {block:Panorama}{LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>{LinkCloseTag}{block:Caption}{Caption}<br>{/block:Caption}{/block:Panorama}
  1964.  
  1965. {block:Photoset}<div class="photoset">{Photoset-500}</div>{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  1966.  
  1967. {block:Video}{Video-400}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  1968.  
  1969. <!-- quotes -->
  1970.  
  1971.  
  1972. {block:Quote}<div id="quote">{Quote} </div> {/block:Quote} {block:Source}
  1973. <div class="source">x , {Source}</div><br>
  1974. {/block:Source}
  1975.  
  1976.  
  1977. <!-- links -->
  1978.  
  1979.  
  1980. {block:Link}<br><h3><a href="{URL}" {Target}>{Name}</a></h3>{block:Description}{Description}{/block:Description}<br>{/block:Link}
  1981.  
  1982. <!-- chat -->
  1983.  
  1984. {block:Chat}
  1985. {block:Title}
  1986. <h1>{Title}</h1>{/block:Title}
  1987. <ul class="convo">{block:Lines}<li class="line_{Alt} user_{UserNumber}">{block:Label}<span class="label" style="color:{color:text};font-size:16px;">{Label}</span>{/block:Label}
  1988. {Line}&nbsp;</li>{/block:Lines}</ul>
  1989. <br> {/block:Chat}
  1990.  
  1991.  
  1992. <!-- audio -->
  1993.  
  1994.  
  1995. {block:Audio}<br>
  1996. {block:AudioPlayer}
  1997. <div class="info">
  1998. <div class="play">{AudioPlayer}</div><br>
  1999. <div class="details">{block:TrackName}{TrackName}{/block:TrackName}
  2000.  
  2001. <div class="artist">{block:Artist}{Artist}{/block:Artist}</div><br>
  2002. </div></div><br><br>
  2003. {block:Caption}{Caption}{/block:Caption}
  2004. {/block:AudioPlayer}
  2005. {/block:Audio}
  2006.  
  2007. <!-- ask -->
  2008.  
  2009.  
  2010. {block:Answer}
  2011. <br>
  2012. <div class="question">{Question} </div>
  2013. <div class="asker"> <B>{Asker}</b> <br><br><br><br>COSMIC POWER—MAKEUP! </div>
  2014.  
  2015.  
  2016. <div class="qanswer">{Answer}</div><br>
  2017. {/block:Answer}
  2018.  
  2019. <!-- readmore -->
  2020.  
  2021.  
  2022. {block:More}<p>
  2023. <br><div class="readmore"><a href="{Permalink}"> read more .</a> </div><br></p><br>
  2024. {/block:More}
  2025.  
  2026. <!-- permalink
  2027. reblog , source , date & notes-->
  2028. <div class="permalink">
  2029. <a href="{Permalink}">{DayOfMonthWithZero} {ShortMonth}.</a>&nbsp;
  2030.  
  2031. <a href="{Permalink}">{NoteCountWithLabel}.</a>&nbsp;
  2032.  
  2033. {block:RebloggedFrom}{/block:RebloggedFrom}
  2034. <a href="{ReblogURL}">reblog.</a>&nbsp;
  2035.  
  2036. {block:ContentSource}
  2037. <a href="{SourceURL}">source.</a>
  2038. {/block:ContentSource}
  2039. </div>
  2040.  
  2041.  
  2042. </div> <!-- end of posts --><br><br><br>
  2043.  
  2044. <!-- tags -->
  2045. <div class="tags">{block:HasTags}<B><span class="cp cp-stars-o"></span>
  2046. {PostAuthorName} says:</B>&nbsp;{block:Tags}<span style="font-size:12px; color:{color:gradient 1}">#</span><a href="{TagUrl}">{Tag}</a>&nbsp;&nbsp;{/block:Tags}{/block:HasTags}</div>
  2047.  
  2048. {block:PostNotes}
  2049. <div class="notes">{PostNotes}</div>
  2050. {/block:PostNotes}
  2051.  
  2052. <br>
  2053. <br>
  2054. <br>
  2055. <br>
  2056. <br>
  2057. {/block:Posts}
  2058.  
  2059.  
  2060. </div> <!-- end of postholder -->
  2061.  
  2062. </div> <!-- end of container -->
  2063.  
  2064. <!-- credits -->
  2065.  
  2066.  
  2067. <div id="credit" data="credit"><a href="https://gordonramsei.tumblr.com/" title="theme by emily"><i class="fa-solid fa-barcode"></i>
  2068.  
  2069. </a></div>
  2070.  
  2071. </body>
  2072.  
  2073.  
  2074. <!-- begin tabs script -->
  2075.  
  2076. <script>
  2077.  
  2078. function openPage(pageName, elmnt, color) {
  2079. var i, tabcontent, tablink;
  2080. tabcontent = document.getElementsByClassName("tabcontent");
  2081. for (i = 0; i < tabcontent.length; i++) {
  2082. tabcontent[i].style.display = "none";}
  2083.  
  2084. tablinks = document.getElementsByClassName("tablink");
  2085. for (i = 0; i < tablinks.length; i++) {
  2086. tablinks[i].style.backgroundColor = "";
  2087. }
  2088.  
  2089. document.getElementById(pageName).style.display = "block";
  2090.  
  2091. elmnt.style.backgroundColor = color;
  2092. }
  2093. document.getElementById("defaultOpen").click();
  2094.  
  2095. </script>
  2096.  
  2097. <!-- end tabs script -->
  2098.  
  2099.  
  2100. <!-- begin tabs filter script -->
  2101.  
  2102. <!-- this filter script will dictate the parts of ur theme that will be visible when ur on ur tabs . for example , if u don't want ur posts to be visible bc ur tab content will be there , u will hide the posts with :
  2103.  
  2104. $(".posts").hide();
  2105.  
  2106. and u also need to specify that u want ur posts to REAPPEAR once ur no longer on an active tab :
  2107.  
  2108. $(".posts").show();
  2109.  
  2110. -->
  2111.  
  2112. <script>
  2113.  
  2114. function myFunction() {
  2115. var desc = document.getElementById("myDescription");
  2116. desc.classList.toggle("show");
  2117.  
  2118.  
  2119. }
  2120. </script>
  2121.  
  2122. <script>
  2123. $(document).ready(function(){
  2124. $(".tablink").click(function(){
  2125. $(".posts").hide();
  2126. $(".permalink").hide();
  2127. $(".permalink").hide();
  2128. $(".notes").hide();
  2129. $(".tags").hide();
  2130. $("#pagination").hide();
  2131.  
  2132. });
  2133. $(".tabsclose").click(function(){
  2134. $(".posts").show();
  2135. $(".permalink").show();
  2136. $(".notes").show();
  2137. $(".tags").show();
  2138. $("#pagination").show();
  2139.  
  2140. });
  2141. });
  2142. </script>
  2143.  
  2144. <!-- end tabs filter script -->
  2145.  
  2146. <!--
  2147. MUSIC PLAYER #02 by glenthemes
  2148. ♬ glenthpvs.tumblr.com/player02
  2149. --->
  2150. <script src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
  2151. <link href="//fonts.googleapis.com/css?family=Readex+Pro" rel="stylesheet">
  2152. <link href="//glenthemes.github.io/-music-/glenplayer02.css" rel="stylesheet">
  2153. <script src="//glenthemes.github.io/-music-/glenplayer02.js"></script>
  2154. <style element="glenplayer02">
  2155. :root {
  2156. --MusicPlayer-Position:top left;
  2157. --MusicPlayer-Edge-Offset:18px;
  2158.  
  2159. --MusicPlayer-Buttons-Size:24px;
  2160. --MusicPlayer-Buttons-Color:{color:title gradient 3};
  2161. --MusicPlayer-Buttons-Fill:no;
  2162.  
  2163.  
  2164. --MusicPlayer-Spacing-1:7px;
  2165. --MusicPlayer-Spacing-2:9px;
  2166.  
  2167. --MusicPlayer-Text-Size:16px;
  2168. --MusicPlayer-Text-Color:{color:text};
  2169. }
  2170. </style>
  2171.  
  2172. <div glenplayer02>
  2173. <div controls></div>
  2174.  
  2175. <i class="aa-line-icons" icon-name="music-2"></i>
  2176.  
  2177. <!-- SONG NAME HERE -->
  2178. <span style="text-transform:lowercase;padding:5px;font-family:'Shrikhand', cursive; background: {color:italic gradient 1};
  2179. background: -webkit-linear-gradient(to right, {color:italic gradient 1} 6%, {color:italic gradient 2} 45%, {color:italic gradient 3} 60%, {color:italic gradient 4} 97%);
  2180. background: -moz-linear-gradient(to right, {color:italic gradient 1} 6%, {color:italic gradient 2} 45%, {color:italic gradient 3} 60%, {color:italic gradient 4} 97%);
  2181. background: linear-gradient(to right, {color:italic gradient 1} 6%, {color:italic gradient 2} 45%, {color:italic gradient 3} 60%, {color:italic gradient 4} 97%);
  2182. background: -moz-linear-gradient(to right, {color:italic gradient 1} 6%, {color:italic gradient 2} 45%, {color:italic gradient 3} 60%, {color:italic gradient 4} 97%);
  2183. background: -moz-linear-gradient(to right, {color:italic gradient 1} 6%, {color:italic gradient 2} 45%, {color:italic gradient 3} 60%, {color:italic gradient 4} 97%);
  2184. -webkit-background-clip: text;
  2185. -webkit-text-fill-color: transparent;
  2186. text-shadow:0px 0px 3px {color:italic gradient 1};
  2187. color:{color:italic gradient 1};" >pretty soldier radio! </span>
  2188.  
  2189. <!-- HOW TO CHANGE THE MUSIC -->
  2190. <!-- linktr.ee/direct_file_links -->
  2191. <audio src="https://archive.org/download/anywhere-but-home/Anywhere%20But%20Home.mp3" volume="100%"></audio>
  2192.  
  2193. </div><!--don't delete this line-->
  2194. <!--end music player-->
  2195.  
  2196.  
  2197. </body>
  2198.  
  2199. </html>
  2200.  
  2201.  
  2202.  
  2203.  
  2204.  
  2205.  
  2206.  
  2207.  
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!