API tools faq
paste
View difference between Paste ID: E1ZMjJur and txqtdG67
SHOW: | | - or go back to the newest paste.
1
<!--
2
3
╭━━━┳╮╱╭┳━━━┳━━━┳━━━━┳╮╱╭┳━━━┳━╮╭━┳━━━┳━━━╮
4
┃╭━╮┃┃╱┃┃╭━━┫╭━╮┃╭╮╭╮┃┃╱┃┃╭━━┫┃╰╯┃┃╭━━┫╭━╮┃
5
┃╰━━┫╰━╯┃╰━━┫┃╱┃┣╯┃┃╰┫╰━╯┃╰━━┫╭╮╭╮┃╰━━┫╰━━╮
6
╰━━╮┃╭━╮┃╭━━┫╰━╯┃╱┃┃╱┃╭━╮┃╭━━┫┃┃┃┃┃╭━━┻━━╮┃
7
┃╰━╯┃┃╱┃┃╰━━┫╭━╮┃╱┃┃╱┃┃╱┃┃╰━━┫┃┃┃┃┃╰━━┫╰━╯┃
8
╰━━━┻╯╱╰┻━━━┻╯╱╰╯╱╰╯╱╰╯╱╰┻━━━┻╯╰╯╰┻━━━┻━━━╯
9
10
Theme ⎾LUDIC⏌ by sheathemes @ tumblr
11
12
13
14
- TERMS -

15
 

16
I. Do NOT remove my credit from the index page. Keep it exactly where it is

17
II. Do NOT take any part of my code to use for your personal designs

18
III. Do NOT claim any part of my code as your own

19
IV. NO redistrubuting of any of my code

20
V. Editing is allowed. As long as it's NOT being claimed as your own

21
22
CREDITS

23
 

24
> PixelUnion/Extended-Tumblr-Photoset: https://github.com/PixelUnion/Extended-Tumblr-Photoset | Modified PXU photoset script tutorial by bychloethemes @ tumblr: http://bychloethemes.tumblr.com/post/155956945114/modified-pxu-photoset-script-modified-by

25
 

26
> Video resize script: http://shythemes.tumblr.com/post/134536748863/tutorial-resizing-videos

27
 

28
> Custom Tumblr lightbox: http://shythemes.tumblr.com/post/140444996328/tutorial-lightboxes

29
30
> Tippy.js: https://atomiks.github.io/tippyjs/

31
 

32
> Icons: https://themify.me/themify-icons || https://feathericons.com/

33
 

34
> Smoothscroll script: https://cdnjs.com/libraries/smoothscroll

35
36
> customaudio.js: https://annasthms.tumblr.com/more/js/customaudio/new

37
 

38
> Mini spotify player: https://glenthemes.tumblr.com/post/659842079511461888

39
 

40
> NPF images fix v3.0: https://github.com/npf-images-v3/npf-images-v3.github.io/blob/main/WELCOME.md

41
42
> Search Suggestions Script: https://shythemes.tumblr.com/post/138692201618/tutorial-search-tags 

43
44
> Accessible dark mode: https://rstylr.tumblr.com/plugins/darkmode

45
46
!-->

47
 

48
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

49
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en" data-theme="light">

50
 

51
<head>

52
53
<script>

54
{block:ifdarkmode}

55
const storedTheme = localStorage.getItem("theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");

56
if (storedTheme) document.documentElement.setAttribute("data-theme", storedTheme);  

57
{/block:ifdarkmode}

58
</script>

59
60
<!------------Smooth Scroll Script------------>

61
<script src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>

62
<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.6/SmoothScroll.min.js"></script>

63
<!------------Smooth Scroll Script------------>

64
65
<!--------------Custom Fonts-------------->

66
<link rel="preconnect" href="https://fonts.gstatic.com">

67
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Lato:wght@400;700&family=Noto+Sans+JP:wght@400;700&family=Open+Sans:wght@400;700&family=Playfair+Display&family=Poppins:wght@400;700&family=Roboto:wght@400;700&family=Epilogue:wght@400;700&family=Source+Sans+Pro:wght@400;700&family=Noto+Serif:wght@700&display=swap" rel="stylesheet">

68
<!--------------Custom Fonts-------------->

69
 

70
<!--Homelinks Icons -->

71
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">

72
<!--Homelinks Icons-->

73
74
 

75
    <title>{Title}</title>

76
    <link rel="shortcut icon" href="{Favicon}">

77
    <link rel="altertnate" type="application/rss+xml" href="{RSS}">

78
    <meta charset="utf-8">

79
    {block:Description}

80
    <meta name="description" content="{MetaDescription}" />

81
    {/block:Description}

82
    <meta http-equiv="x-dns-prefetch-control" content="off"/>

83
    <meta name="viewport" content="width=device-width, initial-scale=1">

84
 

85
<!--Custom Options-->

86
<meta name="color:background" content="#f8f8f8" />

87
<meta name="color:accent" content="#eb9575" />

88
<meta name="color:accented text" content="#000000" />

89
<meta name="color:Text" content="#444444" />    

90
<meta name="color:bold" content="#eb9575"/>

91
<meta name="color:italic" content="#444444"/>

92
<meta name="color:Links" content="#000000" />

93
<meta name="color:Link Hover" content="#eb9575" />

94
<meta name="color:text selection" content="#ffffff" />

95
<meta name="color:text selection background" content="#eb9575" />

96
<meta name="color:Blockquote" content="#eb9575" />

97
<meta name="color:scrollbar" content="#eb9575" />

98
<meta name="color:Posts" content="#ffffff" />

99
<meta name="color:Post Title" content="#000000" />

100
<meta name="color:Post Borders" content="#f6f6f6" />

101
<meta name="color:question" content="#000000" />

102
<meta name="color:question background" content="#fafafa" />

103
<meta name="color:chat odd" content="#eb9575"/>

104
<meta name="color:chat even" content="#000000"/>

105
<meta name="color:pagination" content="#000000" />

106
<meta name="color:permalink" content="#ffffff" />

107
<meta name="color:permalink hover" content="#eb9575" />

108
109
<meta name="color:&#x25C6;&#x3A;&#x2A;&#x3A;&#x25C7;&#x3A;&#x2A;&#x3A;&#x25C6;&#x3A;&#x2A;&#x3A;&#x25C7;&#x3A;&#x2A;&#x3A;&#x25C6;">

110
111
<!------- night mode ------>

112
113
<meta name="color:accent night" content="#eea488" />

114
<meta name="color:accented text night" content="#000000" />

115
<meta name="color:background night" content="#313131" />

116
<meta name="color:text night" content="#ffffff" />

117
<meta name="color:bold night" content="#eea488" />

118
<meta name="color:italic night" content="#ffffff" />

119
<meta name="color:links night" content="#ffffff" />

120
<meta name="color:link hover night" content="#eea488" />

121
<meta name="color:text selection night" content="#000000" />

122
<meta name="color:text selection background night" content="#eea488" />

123
<meta name="color:Blockquote night" content="#918d7c" />

124
<meta name="color:scrollbar night" content="#918d7c" />

125
<meta name="color:posts background night" content="#414141" />

126
<meta name="color:posts title night" content="#ffffff" />

127
<meta name="color:post borders night" content="#363636" />

128
<meta name="color:question night" content="#ffffff" />

129
<meta name="color:question background night" content="#525252" />

130
<meta name="color:chat odd night" content="#eea488"/>

131
<meta name="color:chat even night" content="#ffffff"/>

132
<meta name="color:pagination night" content="#ffffff" />

133
<meta name="color:permalink night" content="#ffffff" />

134
<meta name="color:permalink hover night" content="#eea488" />

135
136
 

137
<meta name="select:Background Attachment" content="fixed" title="fixed">

138
<meta name="select:Background Attachment" content="scroll" title="scroll">

139
<meta name="select:Background Repeat" content="repeat" title="repeat">

140
<meta name="select:Background Repeat" content="no-repeat" title="no repeat">

141
142
<meta name="select:Body Font" content="Open Sans" title="Open Sans">

143
<meta name="select:Body Font" content="Lato" title="Lato">

144
<meta name="select:Body Font" content="Titillium Web" title="Titillium Web">

145
<meta name="select:Body Font" content="Noto Sans JP" title="Noto Sans JP">

146
<meta name="select:Body Font" content="Roboto" title="Roboto">

147
<meta name="select:Body Font" content="Inter" title="Inter">

148
<meta name="select:Body Font" content="Poppins" title="Poppins">

149
<meta name="select:Body Font" content="Source Sans Pro" title="Source Sans Pro">

150
 

151
<meta name="select:font size" content="11" title="11px">

152
<meta name="select:font size" content="12" title="12px">

153
<meta name="select:font size" content="13" title="13px">

154
<meta name="select:font size" content="14" title="14px">

155
<meta name="select:font size" content="15" title="15px">

156
 

157
<meta name="select:text align" content="left" title="left">

158
<meta name="select:text align" content="justify" title="justify">

159
<meta name="select:desc text align" content="left" title="left">

160
<meta name="select:desc text align" content="justify" title="justify">

161
162
<meta name="select:sidebar position" content="0" title="left">

163
<meta name="select:sidebar position" content="2" title="right">

164
 

165
<meta name="select:Post Size" content="400" title="400px">

166
<meta name="select:Post Size" content="450" title="450px">

167
<meta name="select:Post Size" content="475" title="475px">

168
<meta name="select:Post Size" content="500" title="500px">

169
<meta name="select:Post Size" content="525" title="525px">

170
<meta name="select:Post Size" content="540" title="540px">

171
 

172
<meta name="select:Post Padding" content="0" title="0px">

173
<meta name="select:Post Padding" content="2" title="2px">

174
<meta name="select:Post Padding" content="5" title="5px">

175
<meta name="select:Post Padding" content="10" title="10px">

176
<meta name="select:Post Padding" content="15" title="15px">

177
<meta name="select:Post Padding" content="20" title="20px">

178
 

179
<meta name="select:Photoset gutter" content="1" title="1px">

180
<meta name="select:Photoset gutter" content="2" title="2px">

181
<meta name="select:Photoset gutter" content="4" title="4px">

182
<meta name="select:Photoset gutter" content="6" title="6px">

183
<meta name="select:Photoset gutter" content="8" title="8px">

184
<meta name="select:Photoset gutter" content="10" title="10px">

185
186
<meta name="text:blog subtitle" content="subtitle here" />

187
<meta name="text:sidebar name" content="sidebar name here" />

188
<meta name="text:sideblog title one" content="sideblog one" />

189
<meta name="text:sideblog subtitle one" content="sideblog subtitle here" />

190
<meta name="text:sideblog title two" content="sideblog two" />

191
<meta name="text:sideblog subtitle two" content="sideblog subtitle here" />

192
<meta name="text:sideblog title three" content="sideblog three" />

193
<meta name="text:sideblog subtitle three" content="sideblog subtitle here" />

194
195
<meta name="if:Link1" content="1" />

196
<meta name="if:Link2" content="1" />

197
<meta name="if:Link3" content="1" />

198
<meta name="if:Link4" content="1" />

199
<meta name="if:Link5" content="1" />

200
<meta name="if:Link6" content="1" />

201
 

202
<meta name="text:Custom Link1 URL" content="Link 1 URL" />

203
<meta name="text:Custom Link1 Name" content="Link 1" />

204
<meta name="text:Custom Link2 URL" content="Link 2 URL" />

205
<meta name="text:Custom Link2 Name" content="Link 2" />

206
<meta name="text:Custom Link3 URL" content="Link 3 URL" />

207
<meta name="text:Custom Link3 Name" content="Link 3" />

208
<meta name="text:Custom Link4 URL" content="Link 4 URL" />

209
<meta name="text:Custom Link4 Name" content="Link 4" />

210
<meta name="text:Custom Link5 URL" content="Link 5 URL" />

211
<meta name="text:Custom Link5 Name" content="Link 5" />

212
<meta name="text:Custom Link6 URL" content="Link 6 URL" />

213
<meta name="text:Custom Link6 Name" content="Link 6" />

214
215
 

216
<meta name="image:background" content=""/>

217
<meta name="image:header" content=""/>

218
<meta name="image:sidebar" content=""/>

219
<meta name="image:sideblog one" content=""/>

220
<meta name="image:sideblog two" content=""/>

221
<meta name="image:sideblog three" content=""/>

222
223
<meta name="if:dark mode" content="1"/>

224
<meta name="if:Small Cursor" content="0" />

225
<meta name="if:Custom Text Selection" content="0"/>

226
<meta name="if:Faded Images" content="0"/>

227
<meta name="if:Grayscale Images" content="0"/>

228
<meta name="if:Show Captions" content="1"/>

229
230
<!--

231
        NPF images fix v3.0 by @glenthemes [2021]

232
        💌 git.io/JRBt7

233
--->

234
<script src="//npf-images-v3.github.io/script.js"></script>

235
<link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">

236
237
<style tmblr-npf>

238
239
:root {

240
    --NPF-Caption-Spacing:1em;

241
    --NPF-Image-Spacing:4px;

242
    

243
    /*----------BLOG OPTIONS----------*/

244
    --text-font: {select:font size}px;

245
    --post-size: {select:post size}px;

246
}

247
248
    /*----------COLOR OPTIONS----------*/

249
250
:root, html[data-theme='light'] {

251
    --LightOn: block; /* displays <span> with moon icon */

252
    --LightOff: none;  /* hides <span> with sun icon */

253
    

254
    --main-background: {color:background};

255
    --accent: {color:accent};

256
    --accented-text: {color:accented text};

257
    --lightbox-background: rgba({RGBcolor:background}, 0.6);

258
    --audio-player-background: rgba({RGBcolor:posts}, 0.8);

259
    --main-text: {color:text};

260
    --bold: {color:bold};

261
    --italic: {color:italic};

262
    --main-links: {color:links};

263
    --main-link-hover: {color:link hover};

264
    --text-selection: {color:text selection};

265
    --text-selection-background: {color:text selection background};

266
    --blockquote: {color:blockquote};

267
    --scrollbar: {color:scrollbar};

268
    --main-posts: {color:posts};

269
    --post-title: {color:post title};

270
    --post-borders: {color:post borders};

271
    --question: {color:question};

272
    --question-background: {color:question background};

273
    --chat-odd: {color:chat odd};

274
    --chat-even: {color:chat even};

275
    --pagination: {color:pagination};

276
    --permalink: {color:permalink};

277
    --tag-cover: {RGBcolor:permalink background};

278
    --permalink-hover: {color:permalink hover};

279
}

280
281
html[data-theme='dark'] {

282
    {block:ifdarkmode}

283
    --LightOn: none; /* hides <span> with moon icon */

284
    --LightOff: block; /* displays <span> with sun icon */

285
    

286
    --accent: {color:accent night};

287
    --accented-text: {color:accented text night};

288
    --main-background: {color:background night};

289
    --lightbox-background: rgba({RGBcolor:background night}, 0.6);

290
    --audio-player-background: rgba({RGBcolor:posts background night}, 0.8);

291
    --main-text: {color:text night};

292
    --bold: {color:bold night};

293
    --italic: {color:italic night};

294
    --main-links: {color:links night};

295
    --main-link-hover: {color:link hover night};

296
    --text-selection: {color:text selection night};

297
    --text-selection-background: {color:text selection background night};

298
    --blockquote: {color:blockquote night};

299
    --scrollbar: {color:scrollbar night};

300
    --main-posts: {color:posts background night};

301
    --post-borders: {color:post borders night};

302
    --post-title: {color:posts title night};

303
    --question: {color:question night};

304
    --question-background: {color:question background night};

305
    --chat-odd: {color:chat odd night};

306
    --chat-even: {color:chat even night};

307
    --pagination: {color:pagination night};

308
    --permalink: {color:permalink night};

309
    --permalink-hover: {color:permalink hover night};

310
}

311
312
html.theme-transition,

313
html.theme-transition *,

314
html.theme-transition *:before,

315
html.theme-transition *:after {

316
    transition: 0s !important;

317
    transition-delay: 0 !important;

318
    {/block:ifdarkmode}

319
}

320
 

321
/*----------TUMBLR CONTROLS----------*/

322
 

323
iframe.tmblr-iframe {

324
    position:fixed!important;

325
    z-index: 300!important;

326
    top: 20px!important;

327
    right: 20px!important;

328
    opacity:0.6!important;

329
    transform:scale(0.7);

330
    transform-origin:100% 0;

331
    -webkit-transform:scale(0.7);

332
    -webkit-transform-origin:100% 0;

333
    -o-transform:scale(0.7);

334
    -o-transform-origin:100% 0;

335
    -moz-transform:scale(0.7);

336
    -moz-transform-origin:100% 0;

337
    -ms-transform:scale(0.7);

338
     filter:invert(1);

339
    -webkit-filter:invert(1);

340
    -o-filter:invert(1);

341
    -moz-filter:invert(1);

342
    -ms-filter:invert(1);

343
    filter:invert(100%) hue-rotate(180deg);

344
    -webkit-filter:invert(100%) hue-rotate(180deg);

345
    -moz-filter:invert(100%) hue-rotate(180deg);

346
    -o-filter:invert(100%) hue-rotate(180deg);

347
    -ms-filter:invert(100%) hue-rotate(180deg);

348
    -webkit-transition: 0.6s ease;

349
    -moz-transition: 0.6s ease;

350
    -o-transition: 0.6s ease;

351
    transition: 0.6s ease;

352
}

353
 

354
iframe.tmblr-iframe:hover {

355
    opacity:1.0!important;

356
    -webkit-transition: 0.6s ease;

357
    -moz-transition: 0.6s ease;

358
    -o-transition: 0.6s ease;

359
    transition: 0.6s ease;

360
}

361
 

362
html[data-theme='dark'] iframe.tmblr-iframe  {

363
    opacity: 1;

364
    filter:invert(0)!important;

365
    -webkit-filter:invert(0)!important;

366
    -o-filter:invert(0)!important;

367
    -moz-filter:invert(0)!important;

368
    -ms-filter:invert(0)!important;

369
    filter:invert(100%) hue-rotate(180deg);

370
    -webkit-filter:invert(100%) hue-rotate(180deg);

371
    -moz-filter:invert(100%) hue-rotate(180deg);

372
    -o-filter:invert(100%) hue-rotate(180deg);

373
    -ms-filter:invert(100%) hue-rotate(180deg);

374
    -webkit-transition: 0.6s ease;

375
    -moz-transition: 0.6s ease;

376
    -o-transition: 0.6s ease;

377
    transition: 0.6s ease;

378
}

379
 

380
/*--------CUSTOM TUMBLR LIGHTBOX--------*/

381
 

382
.vignette, #vignette {

383
    opacity:0;

384
}

385
.lightbox-image, #tumblr_lightbox img {

386
    box-shadow:none !important;

387
    border-radius:0 !important;

388
    max-width:none;

389
}

390
 

391
.tmblr-lightbox, #tumblr_lightbox {

392
    background-color: var(--lightbox-background)!important;

393
}

394
 

395
.lightbox-image, #tumblr_lightbox img {

396
    background-color: var(--main-posts)!important;

397
    padding: 10px !important;

398
    -moz-box-sizing:border-box;

399
    box-sizing:border-box;

400
}

401
 

402
/*----------SCROLLBAR----------*/

403
 

404
::-webkit-scrollbar {

405
    width: 12px;

406
    height: 6px;

407
}

408
409
::-webkit-scrollbar-button {

410
    width: 0px;

411
    height: 0px;

412
}

413
414
::-webkit-scrollbar-thumb {

415
    background-color: var(--scrollbar);

416
    border-radius: 20px;

417
    border: 2px solid var(--main-background);

418
}

419
 

420
::-webkit-scrollbar-track {

421
    background: var(--main-posts);

422
    border: 8px solid var(--main-posts);

423
    border-radius: 20px;

424
}

425
 

426
::-webkit-scrollbar-corner {

427
    background: transparent;

428
}

429
 

430
/*----------TOOLTIPS----------*/

431
 

432
.tippy-tooltip.custom-theme {

433
    background-color: var(--accent);

434
    color: var(--accented-text);

435
    text-align:center;

436
    font-size: 12px;

437
    font-weight: 700;

438
}

439
 

440
.tippy-tooltip.custom-theme .tippy-svg-arrow {

441
  fill: var(--accent);

442
}

443
444
/*----------TEXT SELECTION----------*/

445
 

446
{block:ifCustomTextSelection}

447
::selection {

448
    background: var(--text-selection-background);

449
    color: var(--text-selection);

450
}

451
 

452
::-moz-selection {

453
    background: var(--text-selection-background);

454
    color: var(--text-selection);

455
}

456
 

457
::-webkit-selection {

458
    background: var(--text-selection-background);

459
    color: var(--text-selection);

460
}

461
{/block:ifCustomTextSelection}

462
 

463
/*----------THEME BASICS----------*/

464
465
body {

466
    color: var(--main-text);

467
    font-family: {select:Body Font}, helvetica, sans-serif;

468
    font-weight: 400;

469
    font-size: var(--text-font);

470
    line-height:180%;

471
    margin:0;

472
    padding: 0;

473
    box-sizing: border-box;

474
    text-align:left;

475
    background: var(--main-background) url({image:Background}) center;

476
    background-attachment: {select:Background Attachment};

477
    background-repeat: {select:Background Repeat};

478
    -webkit-font-smoothing: antialiased;

479
    -moz-osx-font-smoothing: grayscale;

480
}

481
482
p:empty {

483
    display: none;

484
}

485
 

486
b,strong {

487
    color:var(--bold);

488
    font-weight: 700;

489
}

490
 

491
i,em {

492
    color:var(--italic);

493
}

494
 

495
small,sub,sup {

496
    font-size: calc(var(--text-font) - 0.5px);

497
}

498
 

499
h1,h2,h3 {

500
    font-weight: 700;

501
    font-size: 1.3em;

502
    color: var(--bold);

503
}

504
 

505
h4,h5,h6 {

506
    font-weight: 700;

507
    font-size: 1.2em;

508
    color: var(--bold);

509
}

510
 

511
pre {

512
    white-space: pre-wrap;

513
    white-space: -moz-pre-wrap;

514
    white-space: -pre-wrap;

515
    white-space: -o-pre-wrap;

516
    word-wrap: break-word;

517
    padding: 5px 10px;

518
    font-family: inherit;

519
    font-weight: 400;

520
    line-height: 150%;

521
    color: var(--question);

522
    background-color: var(--question-background);

523
}

524
 

525
blockquote:not(.tumblr_parent) {

526
    padding-left: 20px;

527
    margin: 10px;

528
    border-left: 3px solid var(--blockquote);

529
}

530
 

531
blockquote img {

532
    max-width: 100%;

533
    height: auto;

534
}

535
536
figure {

537
  margin: 1em 3px;

538
}

539
 

540
a {

541
    color:var(--main-links);

542
    text-decoration:none;

543
    -moz-transition: 0.6s ease;

544
    -o-transition: 0.6s ease;

545
    -webkit-transition: 0.6s ease;

546
    transition: 0.6s ease;

547
}

548
 

549
a:hover {

550
    color:var(--main-link-hover);

551
    -moz-transition: 0.6s ease;

552
    -o-transition: 0.6s ease;

553
    -webkit-transition: 0.6s ease;

554
    transition: 0.6s ease;

555
}

556
 

557
{block:ifSmallCursor}

558
html, body, a { cursor:url("https://i.imgur.com/2qleX.jpg"), auto !important; }

559
a:hover{cursor:url("https://i.imgur.com/IepP2.jpg"), auto !important;}

560
{/block:ifSmallCursor}

561
562
/*----------PAGINATION----------*/ 

563
564
#pagination {

565
    margin: 20px auto 0 auto;

566
    text-align:center;

567
    background-color: var(--main-posts);

568
    padding: 15px 20px;

569
    font-size: 1.1em;

570
}

571
 

572
.current_page {

573
    color:var(--pagination); 

574
    border-bottom: 2px solid var(--accent);

575
    padding: 5px 10px;

576
    font-weight: 700;

577
    transition: 0.6s;

578
}

579
 

580
#pagination a {

581
    margin: 0 10px;

582
    padding: 5px 10px;

583
    color: var(--pagination);

584
    font-weight: 700;

585
    border-bottom: 2px solid transparent;

586
    -moz-transition: 0.6s ease;

587
    -o-transition: 0.6s ease;

588
    -webkit-transition: 0.6s ease;

589
    transition: 0.6s ease;

590
}

591
 

592
#pagination a:hover {

593
    color: var(--main-link-hover);

594
    -moz-transition: 0.6s ease;

595
    -o-transition: 0.6s ease;

596
    -webkit-transition: 0.6s ease;

597
    transition: 0.6s ease;

598
}

599
600
 

601
/*----------POSIS CONTAINER----------*/ 

602
603
.cage {

604
    width: 100%;

605
    height: 100%;

606
    position: relative;

607
}

608
 

609
.wrap {

610
    position: relative;

611
    width: calc(var(--post-size) + 485px);

612
    margin: 400px 0 50px 450px;

613
    padding: 10px 0 50px;

614
    display: flex;

615
    align-items: flex-start;

616
    flex-flow: row wrap;

617
    justify-content: space-between;

618
    {block:PermalinkPage}

619
    margin-top: 100px;

620
    width: calc(540px + 485px);

621
    {/block:PermalinkPage}

622
}

623
 

624
#content {

625
    width: var(--post-size);

626
    position: relative;

627
    {block:PermalinkPage}

628
    width: 540px;

629
    {/block:PermalinkPage}

630
}

631
 

632
.posts {

633
    position: relative;

634
    width: var(--post-size);

635
    background-color: var(--main-posts);

636
    {block:IndexPage}

637
    margin-bottom: 150px;

638
    {/block:IndexPage}

639
    {block:PermalinkPage}

640
    margin-bottom: 50px;

641
    width: 540px;

642
    {/block:PermalinkPage}

643
}

644
645
.tag-page {

646
    color: var(--main-links);

647
    font-weight: 700;

648
    margin-bottom: 10px;

649
}

650
651
.pinned {

652
    color: var(--main-links);

653
    font-weight: 700;

654
    margin-top: -40px;

655
    position: absolute;

656
}

657
658
#pinned {

659
    position: absolute;

660
    right: 6px;

661
    top: 68px;

662
    z-index: 2;

663
}

664
 

665
.ri-pushpin-line {

666
    font-size: 20px;

667
    width: 20px;

668
    height: 20px;

669
    padding: 8px;

670
    color: var(--accented-text);

671
    background-color: var(--accent);

672
    border-radius: 0 0 0 20px;

673
    border-left: 4px solid var(--main-posts);

674
    border-bottom: 4px solid var(--main-posts);

675
}

676
 

677
.posts ul li {

678
    list-style: none;

679
    margin-left: -25px;

680
    padding-left: 10;

681
}

682
 

683
.posts ul li:before {

684
    content: "―";

685
    padding-right: 5px;

686
    color: var(--accent);

687
}

688
 

689
.posts ol {

690
    list-style-type: upper-roman;

691
    text-transform: justify;

692
    margin-left: -10px;

693
}

694
 

695
.posts iframe {

696
    max-width:100%;

697
    display: block;

698
    padding: 0;

699
    margin: 0

700
}

701
 

702
.posts img {

703
    max-width: 100%;

704
    display: block;

705
    border: 0;

706
}

707
 

708
.tumblr_video_container {

709
    width: auto !important;

710
    height: auto !important;

711
}

712
713
.npf_inst > *:last-child {

714
    margin-bottom: 0;

715
}

716
717
.npf_inst, #npf_a0rsv {

718
    margin-bottom: 20px;

719
}

720
721
.npf_inst.photo-origin, #npf_wmw57 {

722
    padding-top: 10px;

723
}

724
 

725
.posts .photo img {

726
    {block:ifFadedImages}

727
    {block:IndexPage}

728
    opacity: 0.6;

729
    -moz-transition: 0.6s ease;

730
    -o-transition: 0.6s ease;

731
    -webkit-transition: 0.6s ease;

732
    transition: 0.6s ease;

733
}

734
 

735
.posts:hover .photo img {

736
    opacity: 1.0;

737
    -moz-transition: 0.6s ease;

738
    -o-transition: 0.6s ease;

739
    -webkit-transition: 0.6s ease;

740
    transition: 0.6s ease;

741
    {/block:IndexPage}

742
    {/block:ifFadedImages}

743
}

744
 

745
{block:ifGrayscaleImages}

746
{block:IndexPage}

747
.posts .photo img {

748
    z-index: -9999999999999999999999999px;

749
    -webkit-filter: grayscale(100%);

750
    filter: grayscale(100%);

751
    filter: gray;

752
    /* IE 6-9 */

753
    -moz-transition: 0.6s ease;

754
    -o-transition: 0.6s ease;

755
    -webkit-transition: 0.6s ease;

756
    transition: 0.6s ease;

757
}

758
 

759
.posts:hover .photo img {

760
    -webkit-filter: none;

761
    filter: none;

762
    -moz-transition: 0.6s ease;

763
    -o-transition: 0.6s ease;

764
    -webkit-transition: 0.6s ease;

765
    transition: 0.6s ease;

766
}

767
{/block:IndexPage}

768
{/block:ifGrayscaleImages}

769
 

770
/*----------TEXT/CAPTION CONTAINER----------*/

771
 

772
.photo, .video, .photo-slideshow {

773
    padding: {select:Post Padding}px;

774
}

775
 

776
.caption {

777
    text-align: {select:text align};

778
}

779
 

780
.caption figcaption {

781
    padding: 15px;

782
}

783
 

784
figcaption p {

785
    margin: 5px 0 0;

786
}

787
 

788
.caption img {

789
    max-width: 100%;

790
}

791
 

792
.reblog-list {

793
    padding: 0 10px;

794
}

795
 

796
.reblog-header {

797
    padding: 20px 15px 0 15px;

798
}

799
 

800
.reblog-header img {

801
    width: 25px;

802
    height: 25px;

803
    display: inline-block;

804
    vertical-align: middle;

805
    margin-right: 10px;

806
    border-radius: 50%;

807
}

808
 

809
.inactive, .user, .deactivated {

810
    font-weight: 700;

811
    color: var(--main-links);

812
    text-align: center;

813
}

814
 

815
.user:hover {

816
    color: var(--main-link-hover);

817
}

818
 

819
.reblog-content {

820
    padding: 5px 15px;

821
}

822
 

823
.read_more {

824
    position: relative;

825
    width: 100%;

826
    padding: 3px 10px;

827
    font-weight: 700;

828
    color: var(--accented-text);

829
    background-color: var(--accent);

830
    border-radius: 15px;

831
    -moz-transition: 0.6s ease;

832
    -o-transition: 0.6s ease;

833
    -webkit-transition: 0.6s ease;

834
    transition: 0.6s ease;

835
}

836
837
 

838
.read_more:hover {

839
    background-color: transparent;

840
    color: var(--main-links);

841
    -moz-transition: 0.6s ease;

842
    -o-transition: 0.6s ease;

843
    -webkit-transition: 0.6s ease;

844
    transition: 0.6s ease;

845
}

846
847
/*----------POST INFO & PERMALINKS----------*/

848
849
.time {

850
    display: flex;

851
    justify-content: center;

852
    align-items: center;

853
    flex-direction: column;

854
}

855
856
.date {

857
    display: flex;

858
    position: absolute;

859
    bottom: -60px;

860
}

861
862
.date a {

863
    margin: 0 10px;

864
}

865
866
.date i {

867
    border-radius: 50%;

868
    background-color: var(--main-posts);

869
    color: var(--permalink);

870
    padding: 7px;

871
    font-size: 20px;

872
    height: 20px;

873
    -moz-transition: 0.6s ease;

874
    -o-transition: 0.6s ease;

875
    -webkit-transition: 0.6s ease;

876
    transition: 0.6s ease;

877
}

878
879
.date i:hover {

880
    color: var(--permalink-hover);

881
     -moz-transition: 0.6s ease;

882
    -o-transition: 0.6s ease;

883
    -webkit-transition: 0.6s ease;

884
    transition: 0.6s ease;

885
}

886
887
/*----------LIKE/REBLOG----------*/

888
889
.likereblog {

890
    z-index: 1;

891
}

892
893
.controls {

894
    display: flex;

895
}

896
 

897
.controls a {

898
    position:relative;

899
    cursor: pointer;

900
}

901
902
.controls .like .liked + .ri-heart-line {

903
   opacity: 1;

904
}

905
 

906
.controls .like .liked + .ri-heart-line {

907
     color: #ff492f;

908
}

909
 

910
.controls .like .like_button iframe {

911
   position:absolute;

912
   top: -1px;

913
   left:0;

914
   bottom:0;

915
   right:0;

916
   width:100%;

917
   height:100%;

918
   z-index:2;

919
   opacity:0.000001;

920
}

921
922
/*--------POST TAGS--------*/

923
924
.tag-button {

925
    cursor: pointer;

926
}

927
928
.post_tags {

929
    padding: 10px 20px;

930
    display: none;

931
    text-align: right;

932
    margin-bottom: 5px;

933
}

934
 

935
.post_tags a {

936
    display: inline-block;

937
    margin-left: 3px;

938
    color: var(--permalink);

939
    font-size: 11px;

940
    font-weight: 700;

941
    border: 1px solid var(--post-borders);

942
    padding: 0px 10px;

943
    border-radius: 5px;

944
    -moz-transition: 0.6s ease;

945
    -o-transition: 0.6s ease;

946
    -webkit-transition: 0.6s ease;

947
    transition: 0.6s ease;

948
}

949
 

950
.post_tags a:hover {color:var(--permalink-hover);

951
    -moz-transition: 0.6s ease;

952
    -o-transition: 0.6s ease;

953
    -webkit-transition: 0.6s ease;

954
    transition: 0.6s ease;

955
}

956
957
.ri-hashtag{

958
    margin-right: 10px; 

959
    color:var(--accent); 

960
    font-size:18px; 

961
    vertical-align:middle; 

962
}

963
964
/*----------PERMALINK PAGE----------*/

965
 

966
#perma {

967
    width: 540px;

968
    padding: 10px 5px;

969
    margin: 0 auto;

970
    background-color: var(--main-posts);

971
    text-align: center;

972
    text-transform: lowercase;

973
    box-sizing: border-box;

974
    position: relative;

975
}

976
977
#perma span {

978
    font-weight: 700;

979
    text-transform: uppercase;

980
}

981
982
#permatg {

983
    width: 540px;

984
    padding: 10px;

985
    margin: 10px auto 10px;

986
    background-color: var(--main-posts);

987
    text-align: center;

988
    text-transform: lowercase;

989
    box-sizing: border-box;

990
    position: relative;

991
}

992
 

993
#permatg a {

994
    display: inline-block;

995
    margin: 0 5px;

996
    color: var(--main-links);

997
} 

998
999
#permatg a:hover {

1000
    color: var(--main-link-hover);

1001
} 

1002
1003
.rb {

1004
    position: absolute;

1005
    left: 46%;

1006
    margin-top: 27px;

1007
    display: inline-block;

1008
    z-index: 1;

1009
}

1010
 

1011
.root img, .via img {

1012
    border-radius: 100%;

1013
    padding: 3px;

1014
    margin-right: 2px;

1015
    background-color: var(--accent);

1016
}

1017
 

1018
#notecontainer {

1019
    margin: 10px auto;

1020
    width: 540px;

1021
    background-color: var(--main-posts);

1022
    color: var(--main-text);

1023
    position: relative;

1024
    padding: 10px;

1025
    box-sizing: border-box;

1026
}

1027
 

1028
#notecontainer ol.notes {

1029
    list-style-type: none;

1030
    margin: 0;

1031
    padding: 0;

1032
    font-size: {text:body font}px;

1033
}

1034
 

1035
#notecontainer ol.notes li.note {

1036
    padding: 15px;

1037
}

1038
 

1039
#notecontainer img.avatar {

1040
    margin-right: 10px;

1041
    vertical-align: middle;

1042
    width: 25px;

1043
    height: 25px;

1044
    border-radius: 50%;

1045
}

1046
1047
#notecontainer a {

1048
    font-weight: 700;

1049
}

1050
1051
#permpage {

1052
    text-align: center;

1053
    margin-top: 120px;

1054
    justify-content: center;

1055
    align-items: center;

1056
}

1057
 

1058
.ri-arrow-drop-left-line, .ri-arrow-drop-right-line {

1059
    padding: 5px;

1060
    font-size: 30px;

1061
    height: 30px;

1062
    border-radius: 50%;

1063
    margin: 0 10px;

1064
    background-color: var(--accent);

1065
    color: var(--accented-text);

1066
    -webkit-transition: all 0.6s ease;

1067
    -moz-transition: all 0.6s ease;

1068
    -o-transition: all 0.6s ease;

1069
    transition: all 0.6s ease;

1070
}

1071
 

1072
/*----------TUMBLR TEXT/LINKS----------*/  

1073
 

1074
.posts .title, .posts .link {

1075
    color: var(--post-title);

1076
    text-transform: uppercase;

1077
    padding: 20px;

1078
    font-size: 1.4em;

1079
    font-weight: 700;

1080
    line-height: 200%;

1081
    position: relative;

1082
    line-height: 120%;

1083
    -moz-transition: 0.6s ease;

1084
    -o-transition: 0.6s ease;

1085
    -webkit-transition: 0.6s ease;

1086
    transition: 0.6s ease;

1087
}

1088
1089
.posts .title:before, .posts .link:before {

1090
    content: '';

1091
    position: absolute;

1092
    top: 100%;

1093
    left: 20px;

1094
    width: 10%;

1095
    height: 3px;

1096
    background-color: var(--accent);

1097
}

1098
 

1099
.posts .link a {

1100
    color: var(--post-title);

1101
}

1102
 

1103
.posts .link a:hover {

1104
    color: var(--main-link-hover);

1105
    -moz-transition: 0.6s ease;

1106
    -o-transition: 0.6s ease;

1107
    -webkit-transition: 0.6s ease;

1108
    transition: 0.6s ease;

1109
}

1110
1111
.thumbnail img {

1112
    width: 100%;

1113
    height: auto;

1114
    display: block;

1115
}

1116
 

1117
/*----------TUMBLR QUOTES----------*/  

1118
 

1119
.qt {

1120
    padding: 20px 20px 0;

1121
    display: flex;

1122
    flex-direction: row;

1123
    justify-content: space-between;

1124
}

1125
 

1126
.quote {

1127
    font-family: 'Playfair Display', serif;

1128
    line-height: 150%;

1129
    font-size: 1.6em;

1130
    padding: 20px;

1131
    color: var(--question);

1132
    padding-left: 20px;

1133
    border-left: 1px solid var(--post-borders);

1134
}

1135
 

1136
.ri-chat-quote-line {

1137
    color: var(--main-links);

1138
    padding: 5px;

1139
    font-size: 32px;

1140
    align-self: center;

1141
    border-radius: 5px;

1142
}

1143
 

1144
.quote-box {

1145
    font-size: 20px;

1146
    align-self: center;

1147
    color: var(--main-text);

1148
    margin-right: 20px;

1149
}

1150
1151
.qtsource {

1152
    font-weight: 700;

1153
    padding: 0 20px 20px;

1154
}

1155
1156
/*----------TUMBLR AUDIO----------*/

1157
 

1158
.audiowrapper {

1159
    background-color: var(--question-background); 

1160
    display:flex;

1161
} 

1162
1163
.audio-content .audio_player {

1164
    background-color: var(--audio-player-background);

1165
}

1166
 

1167
.audio-content { 

1168
    width:30%;

1169
    padding:10%; 

1170
    position:relative; 

1171
    display: flex;

1172
    justify-content: center;

1173
    align-items: center;

1174
} 

1175
1176
.audio_player {

1177
    position: absolute;

1178
    z-index: 2;

1179
    width: 70px;

1180
    height: 70px;

1181
    border-radius: 50%;

1182
}

1183
1184
.audio_player > div {

1185
	display: inline-block;

1186
	margin: 0 0.5em 0 0;

1187
	vertical-align: middle;

1188
}

1189
1190
.custom_audio_buttons {

1191
	height: 1.25em;

1192
}

1193
1194
.custom_audio_buttons svg {

1195
	width : 1.70em;

1196
	height: 1.70em;

1197
	margin-left: 24px;

1198
	margin-top: 22px;

1199
	stroke: var(--main-text);

1200
}

1201
1202
.custom_audio_error_icon svg {

1203
	stroke: red;

1204
}

1205
1206
.custom_audio_duration {

1207
	display: inline;

1208
}

1209
1210
.custom_audio_seekbar {

1211
	height: 0.5em;

1212
	border: 1px solid var(--main-text);

1213
	margin-top: 20px;

1214
}

1215
1216
.custom_audio_seekbar_progress {

1217
	width: 0;

1218
	height: 100%;

1219
	background: var(--main-links);

1220
}

1221
1222
.custom_audio_current_time, .custom_audio_time_left {

1223
    font-size: 12px;

1224
}

1225
1226
.custom_audio_time_left {

1227
    float: right;

1228
}

1229
1230
.audio_info p {

1231
	margin: 0.25em 0;

1232
}

1233
 

1234
.music_menu { 

1235
    margin:0px; 

1236
    padding:0px; 

1237
    list-style:none; 

1238
    padding: 5%;

1239
    width: 70%; 

1240
    align-self: center;

1241
    font-size:18px; 

1242
    font-weight: 700;

1243
    color: var(--main-links);

1244
} 

1245
 

1246
.music_menu  p { 

1247
    margin: 5px 0;

1248
}

1249
 

1250
.music_menu  p:nth-child(2) { 

1251
    font-weight: 400;

1252
    font-size: 15px;

1253
}

1254
 

1255
/*----------TUMBLR QUESTION/ANSWER----------*/

1256
 

1257
#askcont, #replycont {

1258
    padding: 30px;

1259
}

1260
1261
.asker-cont, .replier-cont {

1262
    display: flex;

1263
}

1264
1265
#asker-image, #replier-image {

1266
    width: 70px;

1267
    height: 70px;

1268
    align-self: center;

1269
}

1270
1271
#asker-image {

1272
    margin-right: 25px;

1273
}

1274
1275
#replier-image {

1276
    order: 2;

1277
    margin-left: 25px;

1278
}

1279
1280
#asker-image img, #replier-image img {

1281
    border-radius: 50%;

1282
    padding: 5px;

1283
    border: 5px solid var(--accent);

1284
    box-sizing: border-box;

1285
}

1286
1287
.asker-link, .replier-link {

1288
    font-weight: 700;

1289
}

1290
1291
#asker, #replier {

1292
    background-color: var(--question-background);

1293
    padding: 20px;

1294
    box-sizing: border-box;

1295
    display: block;

1296
    width: 100%;

1297
    border-radius: 10px;

1298
    position: relative;

1299
}

1300
1301
#asker:after {

1302
	right: 100%;

1303
	top: 50%;

1304
	margin-top: -17px;

1305
	border: solid transparent;

1306
	content: " ";

1307
	height: 0;

1308
	width: 0;

1309
	position: absolute;

1310
	pointer-events: none;

1311
	border-right-color: var(--question-background);

1312
	border-width: 13px;

1313
}

1314
1315
#replier:after {

1316
    left: 100%;

1317
	top: 50%;

1318
	margin-top: -17px;

1319
	border: solid transparent;

1320
	content: " ";

1321
	height: 0;

1322
	width: 0;

1323
	position: absolute;

1324
	pointer-events: none;

1325
	border-left-color: var(--question-background);

1326
	border-width: 13px;

1327
}

1328
1329
.question, .answer {

1330
    margin-top: 10px;

1331
}

1332
1333
.answer p {

1334
    margin: 0;

1335
}

1336
 

1337
/*----------TUMBLR CHAT----------*/

1338
1339
.chatp {

1340
    padding: 20px;

1341
}

1342
 

1343
.chat .line {

1344
    margin-top: 0px;

1345
    padding: 20px;

1346
    border-bottom: 1px solid var(--post-borders);

1347
}

1348
 

1349
.chat .line:last-of-type {

1350
    margin-bottom: 0px;

1351
    border-bottom: none;

1352
}

1353
1354
p.npf_chat {

1355
    margin-top: 0px;

1356
    padding: 20px;

1357
    border-bottom: 1px solid var(--post-borders);

1358
}

1359
1360
p.npf_chat:last-of-type {

1361
    margin-bottom: 0px;

1362
    border-bottom: none;

1363
}

1364
 

1365
.line:nth-child(odd) .label b {

1366
    color: var(--chat-odd);

1367
    font-weight: 700;

1368
    font-size: 1.1em;

1369
    display: block;

1370
    margin-bottom: 10px;

1371
}

1372
 

1373
.line:nth-child(even) .label b {

1374
    color: var(--chat-even);

1375
    font-weight: 700;

1376
    font-size: 1.1em;

1377
    display: block;

1378
    margin-bottom: 10px;

1379
}

1380
1381
p.npf_chat:nth-child(odd) b {

1382
    color: var(--chat-odd);

1383
    font-weight: 700;

1384
    font-size: 1.1em;

1385
    display: block;

1386
    margin-bottom: 10px;

1387
}

1388
 

1389
p.npf_chat:nth-child(even) b {

1390
    color: var(--chat-even);

1391
    font-weight: 700;

1392
    font-size: 1.1em;

1393
    display: block;

1394
    margin-bottom: 10px;

1395
}

1396
1397
/*----------HEADER----------*/

1398
1399
#header {

1400
    width: calc(var(--post-size) + 485px);

1401
    height: 350px;

1402
    position: absolute;

1403
    top: 0;

1404
    left: calc(380px + 70px);

1405
    background: var(--accent) url({image:header}) center;

1406
    {block:PermalinkPage}

1407
    display: none;

1408
    width: calc(540px + 485px);

1409
    {/block:PermalinkPage}

1410
}

1411
1412
/*----------TALL SIDEBAR----------*/

1413
1414
#tall-sidebar {

1415
    width: 390px;

1416
    height: 100%;

1417
    position: fixed;

1418
    top: 0;

1419
    left: 0;

1420
    background-color: var(--main-posts);

1421
    padding: 10px 30px;

1422
    display: flex;

1423
    flex-direction: column;

1424
    justify-content: space-between;

1425
    box-sizing: border-box;

1426
}

1427
1428
.navigation h1, .sideblog-cont h1, .search-cont h1 {

1429
    color: var(--main-links);

1430
}

1431
1432
/*----------NAVIGATION LINKS----------*/

1433
1434
.morelinks a {

1435
    display: flex;

1436
    margin: 30px 0;

1437
    color: var(--main-links);

1438
    -moz-transition: 0.6s ease;

1439
    -o-transition: 0.6s ease;

1440
    -webkit-transition: 0.6s ease;

1441
    transition: 0.6s ease;

1442
}

1443
1444
.morelinks a:hover {

1445
    color: var(--main-link-hover);

1446
    -moz-transition: 0.6s ease;

1447
    -o-transition: 0.6s ease;

1448
    -webkit-transition: 0.6s ease;

1449
    transition: 0.6s ease;

1450
}

1451
1452
.morelinks i {

1453
    font-weight: 400;

1454
    font-size: 22px;

1455
    height: 25px;

1456
    margin-right: 20px;

1457
    color: var(--main-links);

1458
}

1459
1460
/*----------SIDEBLOGS----------*/

1461
1462
.side-blog {

1463
    position: relative;

1464
    display: flex;

1465
    align-items: center;

1466
    padding: 10px 0;

1467
    margin: 10px 0;

1468
}

1469
1470
.side-blog .sideblog-image {

1471
    position: relative;

1472
    width: 60px;

1473
    height: 60px;

1474
    margin-right: 20px;

1475
}

1476
1477
.side-blog .sideblog-image img {

1478
    position: absolute;

1479
    top: 0;

1480
    left: 0;

1481
    width: 100%;

1482
    height: 100%;

1483
    object-fit: cover;

1484
    border-radius: 50%;

1485
    background-color: var(--accent);

1486
}

1487
1488
.side-blog .sideblog-content {

1489
    position: relative;   

1490
    display: flex;

1491
    flex-direction: column;

1492
    justify-content: center;

1493
    width: 220px;

1494
}

1495
1496
.side-blog .sideblog-content .visit {

1497
    position: absolute;

1498
    right: 0;

1499
}

1500
1501
.visit i {

1502
    color: var(--accent);

1503
    font-size: 22px;

1504
}

1505
1506
.sideblog-title {

1507
    font-weight: 700;

1508
    color: var(--main-links);

1509
}

1510
1511
/*----------SEARCH BAR----------*/

1512
1513
.search-area {

1514
    width: auto;

1515
    padding: 10px 0px;

1516
    box-sizing: border-box;

1517
}

1518
 

1519
.query {

1520
    border: 0;

1521
    outline: 0;

1522
    font-family: inherit;

1523
    font-size: var(--text-font);

1524
    color: inherit;

1525
    background-color: var(--question-background);

1526
    width: 290px;

1527
    padding: 10px 15px;

1528
    border-radius: 20px;

1529
    border: 1px solid var(--post-borders);

1530
}

1531
 

1532
html[data-theme='light'] .query {

1533
    background-color: var(--question-background);

1534
}

1535
 

1536
::-webkit-input-placeholder {color: var(--main-text);}

1537
:-moz-placeholder {color: inherit; opacity:1;}

1538
::-moz-placeholder {color: inherit; opacity:1;}

1539
:-ms-input-placeholder {color: inherit;}

1540
input:focus::-webkit-input-placeholder {color: transparent;}

1541
input:focus:-moz-placeholder {color: transparent;}

1542
input:focus::-moz-placeholder {color: transparent;}

1543
input:focus:-ms-input-placeholder { color: transparent;}

1544
1545
/*----------SMALL SIDEBAR----------*/

1546
1547
#sidebar {

1548
    position: sticky;

1549
    top: 100px;

1550
    width: 380px;

1551
    order: {select:sidebar position};

1552
    {block:PermalinkPage}

1553
    top: 110px;

1554
    {/block:PermalinkPage}

1555
}

1556
1557
.sidebar-content {

1558
    background-color: var(--main-posts);

1559
}

1560
1561
.sidebar-image {

1562
    width: 380px;

1563
    height: 180px;

1564
    overflow: hidden;

1565
}

1566
1567
.sidebar-image img {

1568
    width: 100%;

1569
    height: auto;

1570
    background-color: var(--accent);

1571
}

1572
1573
#sidebar-header {

1574
    position: relative;

1575
    padding: 20px;

1576
}

1577
 

1578
.sidebar-portrait {

1579
    min-width: 80px;

1580
    display: flex;

1581
    align-items: center;

1582
}

1583
 

1584
.image-cont {

1585
    display: flex;

1586
    align-items: center;

1587
    overflow: hidden;

1588
}

1589
 

1590
.image-cont .side-header-text {

1591
    display: flex;

1592
    flex-direction: column;

1593
}

1594
 

1595
.image-cont img {

1596
    width: 60px;

1597
    height: 60px;

1598
    border-radius: 50%;

1599
    box-sizing: border-box;

1600
    padding: 5px;

1601
}

1602
 

1603
.blog-name {

1604
    color: var(--main-links);

1605
    font-weight: 700;

1606
    font-size: 1.2em;

1607
}

1608
 

1609
.blog-subtitle {

1610
    margin-top: -2px;

1611
}

1612
1613
.description {

1614
    padding: 0 30px 20px;

1615
    text-align: {select:desc text align};

1616
}

1617
1618
/*----------TUMBLR LINKS----------*/

1619
1620
.nav-bar {

1621
    display: flex;

1622
    justify-content: center;

1623
    align-items: center;

1624
    padding: 5px 0 10px;

1625
}

1626
1627
.homelinks {

1628
    margin-top: 5px;

1629
}

1630
1631
.homelinks i {

1632
    color: var(--main-links);

1633
    font-size: 22px;

1634
    margin: 0 20px;

1635
    height: 25px;

1636
    -moz-transition: 0.6s ease;

1637
    -o-transition: 0.6s ease;

1638
    -webkit-transition: 0.6s ease;

1639
    transition: 0.6s ease;

1640
}

1641
1642
.homelinks i:hover {

1643
    color: var(--main-link-hover);

1644
    -moz-transition: 0.6s ease;

1645
    -o-transition: 0.6s ease;

1646
    -webkit-transition: 0.6s ease;

1647
    transition: 0.6s ease;

1648
}

1649
1650
/*----------TOGGLE DARK/LIGHT MODE----------*/

1651
1652
button#theme-toggle {

1653
    outline: none;

1654
    border: 0;

1655
    background: var(--posts);

1656
    padding: 0;

1657
    cursor: pointer;

1658
}

1659
1660
button#theme-toggle svg {

1661
    width: 24px;

1662
    height: 24px;

1663
    color: var(--main-links);

1664
}

1665
1666
.light-on{

1667
    display: var(--LightOn);

1668
}

1669
.light-off{

1670
    display: var(--LightOff); 

1671
}

1672
1673
1674
/*----------THEME CREDIT/DO NOT REMOVE!!!---------*/

1675
 

1676
#bottom {

1677
    bottom: 20px;

1678
    position: fixed;

1679
    right: 30px;

1680
    z-index: 99;

1681
    display: flex;

1682
}

1683
1684
#bottom a:hover {

1685
    color: var(--accented-text);

1686
}

1687
 

1688
.ri-arrow-up-circle-line, .ri-copyright-line {

1689
    padding: 3px;

1690
    font-size: 22px;

1691
    width: 22px;

1692
    height: 22px;

1693
    background-color: var(--accent);

1694
    color: var(--accented-text);

1695
    border-radius: 5px;

1696
    margin: 0 2px;

1697
    font-weight: 400;

1698
}

1699
 

1700
/*----------SCROLL TO TOP---------*/

1701
 

1702
#scrollToTop:link,

1703
#scrollToTop:visited {

1704
    display: none;

1705
    font-size: 12px;

1706
    color: var(--accented-text);

1707
    padding: 0px 5px;

1708
    width: auto;

1709
    z-index: 900;

1710
    font-weight: 700;

1711
}

1712
1713
{CustomCSS}

1714
</style>

1715
1716
<script>

1717
$(document).ready(function(){

1718
    //click to show/hide tags 

1719
    $('.post_tags').hide();

1720
    $('.tag-button').click(function() {

1721
        $(this).closest('.posts').find('.post_tags').slideToggle(600);

1722
        return false;

1723
    });

1724
    

1725
    //search suggestions script     

1726
    $('.search').submit(function(event){

1727
       var value = $('input:first').val();

1728
       location.replace('https://{Name}.tumblr.com/tagged/' + value);

1729
   });

1730
});

1731
</script>

1732
1733
<!-----------Scroll To Top Script----------->

1734
<script type="text/javascript" src="https://static.tumblr.com/ikeq9mi/DfYl6o46t/scrolltotop.min.js"></script>

1735
<!-----------Scroll To Top Script----------->

1736
 

1737
</head>

1738
1739
<body>

1740
1741
<footer id="bottom">

1742
1743
<!-----------SCROLL TO TOP ----------->

1744
<a href="javascript:;" id="scrollToTop" rel="nofollow" title="scroll to top"><i class="ri-arrow-up-circle-line"></i></a>

1745
<!-----------SCROLL TO TOP ----------->

1746
1747
<!-------------------DO NOT REMOVE THEME CREDIT!!!------------------->

1748
 <a href="https://sheathemes.tumblr.com" target="_blank" title="theme by sheathemes"><i class="ri-copyright-line"></i></a>  

1749
<!-------------------DO NOT REMOVE THEME CREDIT!!!------------------->

1750
</footer>

1751
1752
<header id="header"> <!-----------HEADER----------->

1753
    <img src="{image:header}">

1754
</header> <!-----------HEADER----------->

1755
1756
<div class="cage"> <!-----------BLOG CONTAINER----------->

1757
1758
<aside id="tall-sidebar"> <!-----------TALL SIDEBAR----------->

1759
    <section class="navigation"> 

1760
        <h1>Navigation</h1>

1761
        <nav class="morelinks"> <!-----------NAVIGATION LINKS----------->

1762
    {block:ifLink1}<a href="{text:Custom Link1 URL}"><i class="ri-contrast-drop-line"></i>{text:Custom Link1 Name}</a>{/block:ifLink1}

1763
    {block:ifLink2}<a href="{text:Custom Link2 URL}"><i class="ri-star-line"></i>{text:Custom Link2 Name}</a>{/block:ifLink2}

1764
    {block:ifLink3}<a href="{text:Custom Link3 URL}"><i class="ri-plant-line"></i>{text:Custom Link3 Name}</a>{/block:ifLink3}

1765
    {block:ifLink4}<a href="{text:Custom Link4 URL}"><i class="ri-cake-3-line"></i>{text:Custom Link4 Name}</a>{/block:ifLink4}

1766
    {block:ifLink5}<a href="{text:Custom Link5 URL}"><i class="ri-settings-3-line"></i>{text:Custom Link5 Name}</a>{/block:ifLink5}

1767
    {block:ifLink6}<a href="{text:Custom Link6 URL}"><i class="ri-camera-2-line"></i>{text:Custom Link6 Name}</a>{/block:ifLink6}

1768
    </nav> <!-----------NAVIGATION LINKS----------->

1769
    </section>

1770
    

1771
    <section class="sideblog-cont"> <!-----------SIDEBLOGS----------->

1772
        <h1>Sideblogs</h1>

1773
        <section class="side-blog"> <!-----------SIDEBLOG ONE----------->

1774
            <div class="sideblog-image">

1775
                <img src="{image:sideblog one}">

1776
            </div>

1777
            <div class="sideblog-content">

1778
                <div class="visit">

1779
                    <a href="/" title="visit blog"><i class="ri-external-link-line"></i></a>

1780
                </div>

1781
                <span class="sideblog-title">{text:sideblog title one}</span>

1782
                <span class="sideblog-subtitle">{text:sideblog subtitle one}</span>

1783
            </div>

1784
        </section> <!-----------SIDEBLOG ONE----------->

1785
        

1786
        <section class="side-blog"> <!-----------SIDEBLOG TWO----------->

1787
            <div class="sideblog-image">

1788
                <img src="{image:sideblog two}">

1789
            </div>

1790
            <div class="sideblog-content">

1791
                <div class="visit">

1792
                    <a href="/" title="visit blog"><i class="ri-external-link-line"></i></a>

1793
                </div>

1794
                <span class="sideblog-title">{text:sideblog title two}</span>

1795
                <span class="sideblog-subtitle">{text:sideblog subtitle two}</span>

1796
            </div>

1797
        </section> <!-----------SIDEBLOG TWO----------->

1798
        

1799
        <section class="side-blog"> <!-----------SIDEBLOG THREE----------->

1800
            <div class="sideblog-image">

1801
                <img src="{image:sideblog three}">

1802
            </div>

1803
            <div class="sideblog-content">

1804
                <div class="visit">

1805
                    <a href="/" title="visit blog"><i class="ri-external-link-line"></i></a>

1806
                </div>

1807
                <span class="sideblog-title">{text:sideblog title three}</span>

1808
                <span class="sideblog-subtitle">{text:sideblog subtitle three}</span>

1809
            </div>

1810
        </section> <!-----------SIDEBLOG THREE----------->

1811
    </section> <!-----------SIDEBLOGS----------->

1812
    

1813
    <section class="search-cont"> <!-----------SEARCH BAR----------->

1814
        <h1>Search</h1>

1815
        <div class="search-area">

1816
            <form action="/search" method="get" class="search">

1817
            <input type="text" name="q" value="{SearchQuery}" class="query" placeholder="search...">

1818
        </form>

1819
        </div>

1820
    </section> <!-----------SEARCH BAR----------->

1821
</aside>

1822
1823
<section class="wrap"> <!-----------POST CONTAINER----------->

1824
1825
<aside id="sidebar"> <!-----------SMALL SIDEBAR----------->

1826
    <div class="sidebar-content">

1827
    <div class="sidebar-image"><img src="{image:sidebar}"></div>

1828
    <section id="sidebar-header">

1829
        <div class="image-cont">

1830
            <span class="sidebar-portrait">

1831
                <img src="{PortraitURL-96}" alt="portrait">

1832
            </span>

1833
 

1834
            <div class="side-header-text">

1835
                <span class="blog-name">{Title}</span>

1836
                <span class="blog-subtitle">{text:blog subtitle}</span>

1837
            </div>

1838
        </div>

1839
    </section>

1840
    <div class="description">{Description}</div>

1841
    

1842
    <div class="nav-bar"> 

1843
        <nav class="homelinks"> <!-----------TUMBLR LINKS----------->

1844
            <a href="/" title="home"><i class="ri-home-line"></i></a>

1845
            <a href="/ask" title="ask"><i class="ri-question-line"></i></a>

1846
            <a href="/archive" title="archive"><i class="ri-file-list-line"></i></a>

1847
            <a href="/submit" title="submit"><i class="ri-mail-line"></i></a>

1848
            {block:ifdarkmode}

1849
            <!-----------TOGGLE LIGHT/DARK MODE----------->

1850
            <button id="theme-toggle" aria-label="toggle dark or light mode" type="button">

1851
<span class="light-on"><a href="javascript:;" title="toggle dark mode"><i class="ri-moon-line"></i></a></span>

1852
<span class="light-off"><a href="javascript:;" title="toggle light mode"><i class="ri-sun-line"></i></a></span>

1853
</button>

1854
            <!-----------TOGGLE LIGHT/DARK MODE----------->

1855
            {/block:ifdarkmode}

1856
        </nav> <!-----------TUMBLR LINKS----------->

1857
    </div>

1858
    </div>

1859
</aside> <!-----------SMALL SIDEBAR----------->

1860
1861
<section id="content"> <!-----------POST WRAPPER----------->

1862
1863
{block:posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}

1864
1865
<article class="posts" id="{PostID}" post-type="{PostType}"> <!-----------POSTS----------->

1866
 

1867
{block:ContentSource}

1868
<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"

1869
width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />

1870
{/block:SourceLogo}

1871
{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->

1872
{/block:ContentSource}

1873
 

1874
<!-- {block:NoRebloggedFrom}

1875
{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}

1876
{/block:NoRebloggedFrom} -->

1877
1878
{block:IndexPage} 

1879
{block:PinnedPostLabel} <!-----------PINNED POST----------->

1880
<section id="pinned">

1881
<a href="{Permalink}" title="{PinnedPostLabel}"><i class="ph-push-pin"></i></a>

1882
</section>

1883
{/block:PinnedPostLabel} <!-----------PINNED POST----------->

1884
{/block:IndexPage} 

1885
 

1886
{block:Text}

1887
<div class="text">

1888
{block:Title}<div class="title">{Title}</div>{/block:Title}

1889
<div class="caption">{block:NotReblog} <figcaption> {Body} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">

1890
 

1891
{block:Reblogs} 

1892
<div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}">

1893
<div class="source-head">

1894
<div class="reblog-header">

1895
 

1896
{block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}

1897
 

1898
{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}

1899
 

1900
{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>

1901
</div>

1902
{/block:Text}

1903
 

1904
{block:Photo}

1905
<div class="photo">

1906
{LinkOpenTag}

1907
<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">

1908
<center><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"></center>

1909
</a>

1910
{LinkCloseTag}

1911
</div>

1912
{block:IfShowCaptions}

1913
{block:Caption} <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">

1914
 

1915
{block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">

1916
 

1917
{block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}

1918
 

1919
{block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}

1920
 

1921
{block:IsActive} <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}

1922
 

1923
{block:IsDeactivated} <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated} </div> <div class="reblog-content"> {Body} </div> </div> {/block:Reblogs} </div> {/block:RebloggedFrom} </div> {/block:Caption}

1924
{/block:IfShowCaptions}

1925
 

1926
{block:IfnotShowCaptions}

1927
{block:PermalinkPage}

1928
{block:Caption} <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">

1929
 

1930
{block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">

1931
 

1932
{block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}

1933
 

1934
{block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}

1935
 

1936
{block:IsActive} <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}

1937
 

1938
{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}

1939
{/block:PermalinkPage}

1940
{/block:IfnotShowCaptions}

1941
{/block:Photo}

1942
 

1943
{block:Photoset}

1944
<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>

1945
{block:IfShowCaptions}

1946
{block:Caption}

1947
<div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom}

1948
<div class="reblog-list">

1949
 

1950
{block:Reblogs}

1951
<div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">

1952
{block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}

1953
 

1954
{block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}

1955
 

1956
{block:IsActive}

1957
<a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}

1958
 

1959
{block:IsDeactivated}

1960
<span class="inactive deactivated">{Username} </span> {/block:IsDeactivated}

1961
</div>

1962
<div class="reblog-content"> {Body}</div></div> {/block:Reblogs} </div>

1963
{/block:RebloggedFrom} </div>

1964
{/block:Caption}

1965
{/block:IfShowCaptions}

1966
 

1967
{block:IfnotShowCaptions}

1968
{block:PermalinkPage}

1969
{block:Caption}

1970
<div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom}

1971
<div class="reblog-list">

1972
 

1973
{block:Reblogs}

1974
<div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">

1975
{block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}

1976
 

1977
{block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}

1978
 

1979
{block:IsActive}

1980
<a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}

1981
 

1982
{block:IsDeactivated}

1983
<span class="inactive deactivated">{Username} </span> {/block:IsDeactivated}

1984
</div>

1985
<div class="reblog-content"> {Body}</div></div> {/block:Reblogs} </div>

1986
{/block:RebloggedFrom} </div>

1987
{/block:Caption}

1988
{/block:PermalinkPage}

1989
{/block:IfnotShowCaptions}

1990
{/block:Photoset}

1991
 

1992
{block:Quote}

1993
<div class="qt">

1994
<div class="quote-box"><i class="ri-chat-quote-line"></i></div>

1995
<div class="quote">

1996
{Quote}

1997
</div>

1998
</div>

1999
{block:Source}<div class="qtsource"><br><center>- {Source}</center></div>{/block:Source}

2000
{/block:Quote}

2001
 

2002
{block:Link}

2003
{block:Thumbnail}

2004
<div class="thumbnail"><img src="{Thumbnail-HighRes}" alt="{Name}"></div>

2005
{/block:Thumbnail}

2006
2007
<div class="link"><a href="{URL}">{Name} <i class="ph-caret-double-right" style="vertical-align: middle;"></i></a> </div>

2008
{block:Description}

2009
<div class="caption">{block:NotReblog} <figcaption> {Description} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">

2010
 

2011
{block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">

2012
 

2013
{block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}

2014
 

2015
{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}

2016
 

2017
{block:IsDeactivated} <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated} </div> <div class="reblog-content"> {Body} </div> </div> {/block:Reblogs} </div> {/block:RebloggedFrom} </div>

2018
{/block:Description}

2019
{/block:Link}

2020
 

2021
{block:Audio}

2022
<div class="audiop">

2023
<div class="audiowrapper">

2024
{block:AudioPlayer}

2025
{AudioPlayer}

2026
<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;">

2027
   <div class="audio_player">

2028
	<span class="custom_audio_buttons"></span>

2029
</div> 

2030
</div>

2031
<div class="music_menu">

2032
{block:TrackName}<p><span class="info">{TrackName}</span></p>{/block:TrackName}

2033
{block:Artist}<p><span class="info">{Artist}</span></p>{/block:Artist}

2034
	<div class="custom_audio_seekbar"></div>

2035
	<span class="custom_audio_current_time"></span>

2036
	<span class="custom_audio_time_left"></span>

2037
</div>

2038
{/block:AudioPlayer}

2039
</div>

2040
</div>

2041
2042
{block:IfShowCaptions}

2043
{block:Caption} <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">

2044
 

2045
{block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">

2046
 

2047
{block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}

2048
 

2049
{block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}

2050
 

2051
{block:IsActive} <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}

2052
 

2053
{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}

2054
{/block:IfShowCaptions}

2055
 

2056
{block:IfnotShowCaptions}

2057
{block:PermalinkPage}

2058
{block:Caption} <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">

2059
 

2060
{block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">

2061
 

2062
{block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}

2063
 

2064
{block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}

2065
 

2066
{block:IsActive} <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}

2067
 

2068
{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}

2069
{/block:PermalinkPage}

2070
{/block:IfnotShowCaptions}

2071
{/block:Audio}

2072
 

2073
{block:Video}

2074
<div class="video">{Video-500}</div>

2075
{block:IfShowCaptions}

2076
{block:Caption} <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">

2077
 

2078
{block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">

2079
 

2080
{block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}

2081
 

2082
{block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}

2083
 

2084
{block:IsActive} <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}

2085
 

2086
{block:IsDeactivated} <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated}

2087
 

2088
</div> <div class="reblog-content"> {Body} </div> </div> {/block:Reblogs} </div> {/block:RebloggedFrom} </div> {/block:Caption}

2089
{/block:IfShowCaptions}

2090
 

2091
{block:IfnotShowCaptions}

2092
{block:PermalinkPage}

2093
{block:Caption} <div class="caption"> {block:NotReblog} <figcaption> {Caption} </figcaption> {/block:NotReblog} {block:RebloggedFrom} <div class="reblog-list">

2094
 

2095
{block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">

2096
 

2097
{block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}

2098
 

2099
{block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}

2100
 

2101
{block:IsActive} <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}

2102
 

2103
{block:IsDeactivated} <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated}

2104
 

2105
</div> <div class="reblog-content"> {Body} </div> </div> {/block:Reblogs} </div> {/block:RebloggedFrom} </div> {/block:Caption}

2106
{/block:PermalinkPage}

2107
{/block:IfnotShowCaptions}

2108
{/block:Video}

2109
 

2110
{block:Chat}

2111
{block:Title}<div class="title">{Title}</div>{/block:Title}

2112
<div class="chatp">

2113
<div class="chat">{block:Lines}<div class="line">{block:Label}<span class="label"><b>{Label}</b></span>{/block:Label}

2114
{Line}</div>{/block:Lines}</div>

2115
</div>

2116
{/block:Chat}

2117
 

2118
{block:Answer}

2119
<div id="askcont">

2120
<div class="asker-cont">

2121
<div id="asker-image"><img src="{AskerPortraitURL-128}"></div>

2122
<div id="asker">

2123
<div class="asker-link">{Asker} asked</div>

2124
<div class="question">{Question}</div>

2125
</div>

2126
</div>

2127
</div>

2128
 

2129
{block:Answerer}

2130
<div id="replycont">

2131
<div class="replier-cont">

2132
<div id="replier-image"><img src="{AnswererPortraitURL-128}"></div>

2133
<div id="replier">

2134
<div class="replier-link">{Answerer} replied</div>

2135
<div class="answer">{Answer}</div> 

2136
</div>

2137
</div>

2138
</div>

2139
{/block:Answerer}

2140
 

2141
{block:NotReblog}  <div class="caption"><figcaption> {Answer} </figcaption> </div> {/block:NotReblog}

2142
{block:RebloggedFrom} <div class="reblog-list">

2143
{block:Reblogs} <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}"> <div class="reblog-header">

2144
 

2145
{block:IsActive} <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank"> <img src="{PortraitURL-64}"> </a> {/block:IsActive}

2146
 

2147
{block:IsDeactivated} <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}"> <img src="{PortraitURL-64}"> </span> {/block:IsDeactivated}

2148
 

2149
{block:IsActive} <a target="_blank" href="{Permalink}" class="user">{Username} </a> {/block:IsActive}

2150
 

2151
{block:IsDeactivated} <span class="inactive deactivated">{Username} </span> {/block:IsDeactivated} </div>

2152
 

2153
<div class="reblog-content">{Body} </div> </div> {/block:Reblogs} </div> {/block:RebloggedFrom}

2154
{/block:Answer}

2155
2156
{block:IndexPage}

2157
{block:HasTags} <!-----------POST TAGS----------->

2158
<div class="post_tags">

2159
{block:Tags}

2160
<a href="{TagURL}"><i class="ri-hashtag"></i>{Tag}</a>{/block:Tags}</div>

2161
{/block:HasTags} <!-----------POST TAGS----------->

2162
2163
<!-----------POST INFO/PERMALINKS----------->

2164
<div class="time"> 

2165
{block:Date}

2166
<div class="date">

2167
    <a href="{Permalink}" title="{TimeAgo}"><i class="ri-time-line"></i></a>

2168
    <a href="{Permalink}" title="{NoteCountWithLabel}"><i class="ri-bar-chart-2-line"></i></a>

2169
    <div class="likereblog">

2170
        <div class="controls">

2171
            <a href="{ReblogURL}" target="_blank" title="reblog this post" class="reblog"><i class="ri-refresh-line"></i></a>

2172
            <a title="like this post" class="like">{LikeButton size="15"}

2173
<i class="ri-heart-line"></i></a>

2174
<div class="tag-button"><a href="javascript:;" title="click for tags"><i class="ri-hashtag"></i></a></div>

2175
</div>

2176
</div>

2177
</div>

2178
{/block:Date}

2179
</div>

2180
<!-----------POST INFO/PERMALINKS----------->

2181
2182
{/block:IndexPage}

2183
 

2184
</article> <!-----------POSTS----------->

2185
2186
<!-----------PERMALINK PAGE----------->

2187
{block:PermalinkPage} 

2188
{block:Date}

2189
<div id="perma">

2190
<span>

2191
Posted {ShortMonth} {DayOfMonthWithZero}, {Year} @ {12Hour} {AmPm}

2192
{block:NoteCount}with {NoteCountWithLabel}{/block:NoteCount}

2193
</span>

2194
2195
{block:RebloggedFrom}

2196
<div class="rb">

2197
<a class="via" href="{ReblogParentURL}" title="{ReblogParentName}"><img src="{ReblogParentPortraitURL-16}"></a>

2198
<a class="root" href="{ReblogRootURL}" title="{ReblogRootName}"><img src="{ReblogRootPortraitURL-16}"></a>

2199
</div>

2200
{/block:RebloggedFrom}

2201
2202
</div>

2203
2204
{block:HasTags}

2205
<div id="permatg">

2206
{block:Tags}<a href="{TagURL}" title="Tagged as">#{Tag}</a> {/block:Tags}

2207
</div>

2208
{/block:HasTags}

2209
2210
{block:PostNotes}

2211
<div id="notecontainer">{PostNotes}</div>

2212
{/block:PostNotes}

2213
2214
{block:PermalinkPagination} 

2215
<div id="permpage">

2216
    {block:NextPost}

2217
        <a href="{NextPost}" title="Previous Post"><i class="ri-arrow-drop-left-line"></i></a>

2218
    {/block:NextPost}

2219
    

2220
    {block:PreviousPost}

2221
        <a href="{PreviousPost}" title="Next Post"><i class="ri-arrow-drop-right-line"></i></a>

2222
    {/block:PreviousPost}

2223
</div>

2224
{/block:PermalinkPagination}

2225
{/block:Date}

2226
{/block:PermalinkPage} 

2227
<!-----------PERMALINK PAGE----------->

2228
{/block:Posts}

2229
2230
{block:IndexPage}

2231
<footer id="pagination"> <!-----------PAGINATION----------->

2232
{block:Pagination}

2233
{block:PreviousPage}

2234
<a href="{PreviousPage}">Prev</a>

2235
{/block:PreviousPage}

2236
{block:JumpPagination length="3"}

2237
{block:CurrentPage}

2238
<span class="current_page">{CurrentPage}</a></span>

2239
{/block:CurrentPage}

2240
{block:JumpPage}

2241
<a class="jump_page" href="{URL}">{PageNumber}</a>

2242
{/block:JumpPage}

2243
{/block:JumpPagination}

2244
{block:NextPage}

2245
<a href="{NextPage}">Next</a>

2246
{/block:NextPage}

2247
{/block:Pagination}

2248
</footer> <!-----------PAGINATION----------->

2249
{/block:IndexPage}

2250
2251
</section><!------------------POSTS WRAPPER----------------------->

2252
2253
</section>  <!--------- POSTS CONTAINER ----------->

2254
2255
</div> <!--------- BLOG CONTAINER ----------->

2256
2257
<!-------------------SCRIPTS/JQUERY (PART TWO)------------------->

2258
 

2259
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

2260
2261
<!-----------Pixel Union photosets script----------->

2262
<link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>

2263
<script src="https://static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></script>

2264
<!-----------Pixel Union photosets script----------->

2265
2266
<!-----------Video resizing script shythemes @ tumblr----------->

2267
<script src="https://static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>

2268
<!-----------Video resizing script shythemes @ tumblr----------->

2269
2270
<!-----------Tooltips Script----------->

2271
<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" />

2272
<!-----------Tooltips Script----------->

2273
2274
<!-----------customaudio.js script by annasthms @ tumblr----------->

2275
<script src="https://cdn.jsdelivr.net/gh/annasthms/customaudio@latest/customaudio.min.js"></script>

2276
<!-----------customaudio.js script by annasthms @ tumblr----------->

2277
2278
<script src="https://unpkg.com/feather-icons"></script>

2279
 

2280
<script>

2281
$(document).ready(function(){

2282
    //pxu photosets by @ shythemes & bychloethemes

2283
    $('.photo-slideshow').pxuPhotoset({

2284
        lightbox: true,

2285
        rounded: false,

2286
        gutter: '{select:photoset gutter}px',

2287
        photoset: '.photo-slideshow',

2288
        photoWrap: '.photo-data',

2289
        photo: '.pxu-photo'

2290
    });

2291
    // tippy tooltips script

2292
    tippy('a[title]', { 

2293
        theme: 'custom', 

2294
        arrow: tippy.roundArrow, 

2295
        zIndex: 9999999999, 

2296
        placement: 'auto',

2297
        maxWidth: 300, 

2298
        content(reference) { 

2299
            const title = reference.getAttribute('title'); 

2300
            reference.removeAttribute('title'); return title; }, 

2301
    });

2302
    //mini spotify player by glenthemes @ tumblr    

2303
    var spotsongs = document.querySelectorAll("iframe[src*='open.spotify.com'][src*='track'], figure[data-npf*='open.spotify.com'][data-npf*='track']");

2304
    Array.prototype.forEach.call(spotsongs,function(minitrack){

2305
   minitrack.setAttribute("height","80");

2306
    });

2307
    //customaudio.js script by annasthms @ tumblr

2308
    customAudio({

2309
	post: ".posts",

2310
	wrappers: {

2311
		audio: ".custom_audio_wrapper",

2312
		buttons: ".custom_audio_buttons",

2313
		duration: ".custom_audio_duration",

2314
		timeCurrent: ".custom_audio_current_time",

2315
		timeLeft: ".custom_audio_time_left",

2316
		seekbar: ".custom_audio_seekbar"

2317
	},

2318
	    default: false,

2319
	    pauseAll: true,

2320
	    playButton: "<i data-feather='play'></i>",

2321
	    pauseButton: "<i data-feather='pause'></i>",

2322
	    errorIcon: "<i data-feather='x'></i>",

2323
	    hideInfoIfError: true,

2324
	    callAfterLoad: () => {

2325
		    feather.replace();

2326
	    }

2327
    });

2328
});

2329
2330
    {block:ifdarkmode}

2331
  // toggle dark/light

2332
const toggle = document.getElementById("theme-toggle");

2333
2334
toggle.onclick = function () {

2335
    document.documentElement.classList.add("theme-transition");

2336
2337
    let currentTheme = document.documentElement.getAttribute("data-theme");

2338
    let targetTheme = "light";

2339
2340
    if (currentTheme === "light") {

2341
        targetTheme = "dark";

2342
    }

2343
2344
    window.setTimeout(function () {

2345
        document.documentElement.classList.remove("theme-transition");

2346
    }, 50);

2347
2348
    document.documentElement.setAttribute("data-theme", targetTheme);

2349
    localStorage.setItem("theme", targetTheme);

2350
    };{/block:ifdarkmode}

2351
</script>

2352
 

2353
<!-------------------SCRIPTS/JQUERY (PART TWO)------------------->

2354
 

2355
</body>

2356
</html> <!---------------------------END--------------------------->
        

    


            


                                


        

            



                
    

        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!