GHOST PRINCESS THEME

<!DOCTYPE html>

<head>

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

<!--FONTS-->

<style>

    @import url('https://fonts.googleapis.com/css2?family=Caveat&family=DynaPuff&family=Silkscreen&display=swap');

    @import url('https://fonts.googleapis.com/css2?family=Caveat&family=DynaPuff&family=Silkscreen&display=swap');

    @import url('https://fonts.googleapis.com/css2?family=Caveat&family=DynaPuff&family=Silkscreen&display=swap');

    @import url('https://fonts.googleapis.com/css2?family=Caveat&family=DynaPuff&family=Fredoka+One&family=Silkscreen&display=swap');

</style>

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<script>

$( function() {
$( "#dragme" ).draggable();
} );

</script>

<meta name="select:font" content="arial" />
<meta name="select:font" content="comic sans ms" />
<meta name="select:font" content="times" />
<meta name="select:font" content="ms gothic" />
<meta name="select:font" content="Caveat" />
<meta name="select:font" content="DynaPuff" />
<meta name="select:font" content="Silkscreen" />
<meta name="select:font" content="Fredoka One" />

<meta name="image:background" contents="" />
<meta name="color:background" contents="" />

<meta name="color:links" contents="" />
<meta name="color:links hover" contents="" />

<meta name="color:tags" contents="" />

<meta name="color:pagination" contents="" />

<meta name="image:left container background" contents="" />
<meta name="select:left container border" content="solid" />
<meta name="select:left container border" content="dashed" />
<meta name="select:left container border" content="dotted" />
<meta name="select:left container border" content="double" />
<meta name="select:left container border" content="groove" />
<meta name="select:left container border" content="ridge" />
<meta name="select:left container border" content="inset" />
<meta name="select:left container border" content="outset" />
<meta name="color:left container background" contents="" />
<meta name="color:left container border" contents="" />

<meta name="image:right container background" contents="" />
<meta name="select:right container border" content="solid" />
<meta name="select:right container border" content="dashed" />
<meta name="select:right container border" content="dotted" />
<meta name="select:right container border" content="double" />
<meta name="select:right container border" content="groove" />
<meta name="select:right container border" content="ridge" />
<meta name="select:right container border" content="inset" />
<meta name="select:right container border" content="outset" />
<meta name="color:right container background" contents="" />
<meta name="color:right container border" contents="" />

<meta name="image:icon 1" contents="" />
<meta name="select:icon 1 border" content="solid" />
<meta name="select:icon 1 border" content="dashed" />
<meta name="select:icon 1 border" content="dotted" />
<meta name="select:icon 1 border" content="double" />
<meta name="select:icon 1 border" content="groove" />
<meta name="select:icon 1 border" content="ridge" />
<meta name="select:icon 1 border" content="inset" />
<meta name="select:icon 1 border" content="outset" />
<meta name="color:icon 1 border" contents="" />

<meta name="image:icon 2" contents="" />
<meta name="select:icon 2 border" content="solid" />
<meta name="select:icon 2 border" content="dashed" />
<meta name="select:icon 2 border" content="dotted" />
<meta name="select:icon 2 border" content="double" />
<meta name="select:icon 2 border" content="groove" />
<meta name="select:icon 2 border" content="ridge" />
<meta name="select:icon 2 border" content="inset" />
<meta name="select:icon 2 border" content="outset" />
<meta name="color:icon 2 border" contents="" />

<meta name="image:post background" contents="" />
<meta name="color:post background" contents="" />
<meta name="select:post border" content="solid" />
<meta name="select:post border" content="dashed" />
<meta name="select:post border" content="dotted" />
<meta name="select:post border" content="double" />
<meta name="select:post border" content="groove" />
<meta name="select:post border" content="ridge" />
<meta name="select:post border" content="inset" />
<meta name="select:post border" content="outset" />
<meta name="color:post border" contents="" />
<meta name="color:post text" contents="" />

<meta name="color:description text" contents="" />
<meta name="color:description outline" contents="" />
<meta name="text:description" contents="" />

<meta name="image:searchbar background" contents="" />
<meta name="color:searchbar background" contents="" />
<meta name="select:searchbar border" content="solid" />
<meta name="select:searchbar border" content="dashed" />
<meta name="select:searchbar border" content="dotted" />
<meta name="select:searchbar border" content="double" />
<meta name="select:searchbar border" content="groove" />
<meta name="select:searchbar border" content="ridge" />
<meta name="select:searchbar border" content="inset" />
<meta name="select:searchbar border" content="outset" />
<meta name="color:searchbar border" contents="" />
<meta name="color:searchbar text" contents="" />

<meta name="image:calendar background" contents="" />
<meta name="color:calendar background" contents="" />
<meta name="color:calendar inner background" contents="" />
<meta name="select:calendar border" content="solid" />
<meta name="select:calendar border" content="dashed" />
<meta name="select:calendar border" content="dotted" />
<meta name="select:calendar border" content="double" />
<meta name="select:calendar border" content="groove" />
<meta name="select:calendar border" content="ridge" />
<meta name="select:calendar border" content="inset" />
<meta name="select:calendar border" content="outset" />
<meta name="color:calendar border" contents="" />
<meta name="color:calendar text" contents="" />
<meta name="color:calendar day" contents="" />

<meta name="image:footer background" contents="" />
<meta name="color:footer background" contents="" />
<meta name="select:footer border" content="solid" />
<meta name="select:footer border" content="dashed" />
<meta name="select:footer border" content="dotted" />
<meta name="select:footer border" content="double" />
<meta name="select:footer border" content="groove" />
<meta name="select:footer border" content="ridge" />
<meta name="select:footer border" content="inset" />
<meta name="select:footer border" content="outset" />
<meta name="color:footer border" contents="" />
<meta name="color:footer text" contents="" />

<!--GENERAL FIXES ETC-->

<style>

#credit {

position: fixed;

left: 12px;

bottom: 6px;

font-size: 14px;

}

.npf_row {

margin: 0 !important;

}

iframe, img, embed, object, video {

max-width: 100%;

}

iframe {

width: 300px;

margin-left: -90px;

}

blockquote {

    margin: 3px;
}

#ask_form {

width: auto;

margin: auto;

}

.tumblr_audio_player {

max-width: 100%;

padding: 10px;

margin: 0px;

}

body {

background-image: url('{image:background}');

background-size: cover;

background-color: {color:background};

font-family: {select:font};

}

a {

color: {color:links};

}

a:hover {

color: {color:links hover};

-webkit-transition: all 0.4s ease;

transition: all 0.4s ease;

-moz-transition: all 0.4s ease;

-o-transition: all 0.4s ease;

}

.infocontainer {

width: 340px;

height: 530px;

padding: 15px;

overflow: auto;

scrollbar-width: none;

display: inline-block;

background-image: url('{image:left container background}');

background-size: cover;

background-color: {color:left container background};

border: 4px {select:left container border} {color:left container border};

}

.icon {

width: 150px;

height: 150px;

display: inline-block;

border: 4px {select:icon 1 border} {color:icon 1 border};

background-image: url('{image:icon 1}');

background-size: cover;

}

.icon2 {

width: 150px;

height: 150px;

display: inline-block;

border: 4px {select:icon 2 border} {color:icon 2 border};

background-image: url('{image:icon 2}');

background-size: cover;

margin-left: 14px;

}

.searchbar {

width: 248px;

height: 20px;

padding: 1px;

margin-top: 10px;

scrollbar-width: none;

background-image: url('{image:searchbar background}');

background-size: cover;

background-color: {color:searchbar background};

border: 4px {select:searchbar border} {color:searchbar border};

color: {color:searchbar text};

}

.calendar {

margin-top: 20px;

}

table {

background-image: url('{image:calendar background}');

background-color: {color:calendar background};

background-size: cover;

border: 4px {select:calendar border} {color:calendar border};

color: {color:calendar text};

}

td {

background-color: {color:calendar inner background};

border: 2px {select:calendar border} {color:calendar border};

}

.description {

width: 332px;

border: 4px solid transparent;

height: 76px;

color: {color:description text};

}

.pagination {

width: 148px;

height: 20px;

color: {color:pagination};

scrollbar-width: none;

display: inline-block;

padding: 1px;

margin-top: 10px;

}

.jump_page {

padding-right: 8px;

color: {color:pagination};

font-size: 14px;

text-decoration: none;

}

.current_page {

padding-right: 8px;

color: {color:pagination};

font-size: 14px;

text-decoration: underline;

}

.postscontainer {

width: 340px;

padding: 15px;

height: 530px;

overflow: auto;

scrollbar-width: none;

display: inline-block;

background-image: url('{image:right container background}');

background-size: cover;

background-color: {color:right container background};

border: 4px {select:right container border} {color:right container border};

}

.posts {

width: 310px;

padding: 10px;

text-align: left;

background-image: url('{image:post background}');

background-size: cover;

background-color: {color:post background};

color: {color:post text};

border: 4px {select:post border} {color:post border};

}

.footer {

text-align: justify;

padding: 10px;

border: 4px {select:footer border} {color:footer border};

background-image: url('{image:footer background}');

background-size: cover;

}

.footer a {

color: {color:footer text}

}

ol.notes {

list-style-type: none;

margin: 0;

padding: 0;

text-align: justify;

word-wrap: break-word;

line-height: 30px;

}

.photoset {

margin: 0px;

}

</style>

<body>

<center>

<div class="infocontainer">

<a href="/"><div class="icon"></div></a> <!--ICON-->

<a href="/"><div class="icon2"></div></a> <!--ICON 2-->

<div class="searchbar">

<form action="/search" method="get" style="outline: none;"><input class="search" type="text" placeholder="SEARCHBAR" name="q" value="" style="outline: none; border: none; width: 240px; background-color: transparent; color: {color:searchbar text}; font-family: {select:font};"></input></form>

</div> <!--SEARCHBAR-->

<div class="calendar" align="center">
<script text="JavaScript">

monthnames = new Array(
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
  'July',
  'August',
  'September',
  'October',
  'November',
  'December'
);
var linkcount = 0;
class addlink {
  constructor(month, day, href) {
    var entry = new Array(3);
    entry[0] = month;
    entry[1] = day;
    entry[2] = href;
    this[(linkcount += 1)] = entry;
  }
}

Array.prototype.addlink = addlink;
linkdays = [];
monthdays = new Array(12);
monthdays[0] = 31;
monthdays[1] = 28;
monthdays[2] = 31;
monthdays[3] = 30;
monthdays[4] = 31;
monthdays[5] = 30;
monthdays[6] = 31;
monthdays[7] = 31;
monthdays[8] = 30;
monthdays[9] = 31;
monthdays[10] = 30;
monthdays[11] = 31;
todayDate = new Date();
thisday = todayDate.getDay();
thismonth = todayDate.getMonth();
thisdate = todayDate.getDate();
thisyear = todayDate.getYear();
thisyear = thisyear % 100;
thisyear = thisyear < 50 ? 2000 + thisyear : 1900 + thisyear;
if ((thisyear % 4 === 0 && !(thisyear % 100 === 0)) || thisyear % 400 === 0) {
  monthdays[1] += 1;
}
startspaces = thisdate;
while (startspaces > 7) {
  startspaces -= 7;
}
startspaces = thisday - startspaces + 1;
if (startspaces < 0) {
  startspaces += 7;
}
document.write("<font face='{select:font}'>");
document.write('<table border=0 ');
document.write(' style="text-align: center;" cellpadding=2 cellspacing=5>');
document.write(
  '<tr><td colspan=7><center>' +
  monthnames[thismonth] +
  ' ' +
  thisyear +
  '</strong></center></font></td></tr>'
);
document.write('<tr>');
document.write('<td align=center><b>S</b></td>');
document.write('<td align=center><b>M</b></td>');
document.write('<td align=center><b>T</b></td>');
document.write('<td align=center><b>W</b></td>');
document.write('<td align=center><b>T</b></td>');
document.write('<td align=center><b>F</b></td>');
document.write('<td align=center><b>S</b></td>');
document.write('</tr>');
document.write('<tr>');
for (s = 0; s < startspaces; s += 1) {
  document.write('<td> </td>');
}
count = 1;
while (count <= monthdays[thismonth]) {
  for (b = startspaces; b < 7; b += 1) {
    linktrue = false;
    document.write('<td>');
    for (c = 0; c < linkdays.length; c += 1) {
      if (linkdays[c] != null) {
        if (linkdays[c][0] === thismonth + 1 && linkdays[c][1] === count) {
          document.write('<a href="' + linkdays[c][2] + '">');
          linktrue = true;
        }
      }
    }
    if (count === thisdate) {
      document.write("<b><font color='{color:calendar day}'></b>");
    }
    if (count <= monthdays[thismonth]) {
      document.write(count);
    } else {
      document.write(' ');
    }
    if (count === thisdate) {
      document.write('</font>');
    }
    if (linktrue) {
      document.write('</a>');
    }
    document.write('</td>');
    count += 1;
  }
  document.write('</tr>');
  document.write('<tr>');
  startspaces = 0;
}
document.write('</table></p>');


</script>

</font></div> <!--CALCLOSE-->

<div class="description">

    <marquee scrolldelay="110" style="font-size: 30px; text-shadow: -1px -1px 0 {color:description outline}, 1px -1px 0 {color:description outline}, -1px 1px 0 {color:description outline}, 1px 1px 0 {color:description outline};">

        {text:description}

    </marquee>

</div> <!--DESC CLOSE-->

</div> <!--INFO CONTAINER-->

<div class="postscontainer">

{block:posts}

<div class="posts">

{block:Text}
{block:Title}<a href="{Permalink}">{Title}</a>{/block:Title}
{Body}
{/block:Text}

{block:Quote}
<div class="quote"><h2 style="margin-top: 2px; margin-bottom: 2px;"><b>"</b> <i>{Quote}</i> <b>"</b></h2></div>
{block:Source}<div class="source">&mdash; {Source}</div><br>{/block:Source}
{/block:Quote}

{block:Link}
<big><a href="{URL}">{Name}</a></big>
{block:Description}{Description}{/block:Description}
{/block:Link}

{block:Chat}
{block:Title}{Title}{/block:Title}
{block:Lines}
<div class="{Alt} user_{UserNumber}">
{block:Label}{Label}{/block:Label} {Line}
</div>
<br>
{/block:Lines}
{/block:Chat}

{block:Answer}
<span style="float: right;"><b>{Asker}</b></span><br>
<div class="question"><i>{Question}</i></div>
{Answer}
{/block:Answer}

<center>
{block:Photo}
{LinkOpenTag}<img src="{PhotoURL-400}" alt="{Permalink}"/>{LinkCloseTag}
</center>
{block:Caption}{Caption}{/block:Caption}
{/block:Photo}

<center>
{block:Photoset}
{Photoset-400}</center>
{block:Caption}{Caption}{/block:Caption}
{/block:Photoset}

{block:Video}
{Video-400}
{block:Caption}{Caption}{/block:Caption}
{/block:Video}

{block:Audio}
<div class="songtitle" style="text-align: left;">
{block:TrackName}{TrackName}{/block:TrackName}
</div>
<div class="songauthor" style="text-align: left;">{block:Artist}{Artist}{/block:Artist}</div>
<center>
{AudioPlayerWhite}
</center>{/block:Audio}

<div class="footer">

{block:Date}

{block:PermalinkPage}
{/block:PermalinkPage}

{block:PermalinkPage}
{block:NoteCount}
{block:PostNotes}{PostNotes}{/block:PostNotes}
{/block:NoteCount}
{/block:PermalinkPage}

<div id="permalink" style="text-align: center;">

<a style="text-decoration: none;" href="{Permalink}" title="{Month} {DayOfMonth} {Year}">

<b>{Month} {DayOfMonth} {Year}</b>

</a>

<br><br>

{block:HasTags}<div class="tags" style="text-align: justify;">{block:Tags}<a href="{TagUrl}" style="text-decoration: none; color:{color:tags}" title="{Tag}">#{Tag}</a> {/block:Tags}</div>{/block:HasTags}

</div>

{/block:Date}

</div>

</div> <!--POSTS-->

<br>

{/block:Posts} <!--POSTS-->

{block:Pagination}

{block:JumpPagination length="5"}

{block:CurrentPage}

<span class="current_page" style="color: {color:pagination};">{PageNumber}</span>

{/block:CurrentPage}

{block:JumpPage}

<a class="jump_page" href="{URL}" style="color: {color:pagination};">{PageNumber}</a>

{/block:JumpPage}

{/block:JumpPagination}

{/block:Pagination}

</div> <!--POSTS CONTAINER-->

</center>

<div id="credit">

<a href="https://cod.tumblr.com/" target="_blank" title="CODED BY JOYBOY">🦩</a>

</div>

</body>
</html>