I ♡ ZOZO 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>

<script>

function minimize(){
$(".container").hide();

}

function maximize(){
$(".container").show();

}

</script>

<script>

function minimize2(){
$(".posts").hide();

}

function maximize2(){
$(".posts").show();

}

</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:custom cursor" contents="" />

<meta name="image:background" contents="" />
<meta name="color:background" contents="" />
<meta name="select:background size" content="cover" />
<meta name="select:background size" content="contain" />
<meta name="select:background size" content="auto" />

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

<meta name="color:text" contents="" />
<meta name="color:text shadow" contents="" />

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

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

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

<meta name="image:post background" contents="" />
<meta name="color:post background" contents="" />
<meta name="color:post border" 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="image:header background" contents="" />
<meta name="color:header background" contents="" />
<meta name="color:header border" contents="" />
<meta name="select:header border" content="solid" />
<meta name="select:header border" content="dashed" />
<meta name="select:header border" content="dotted" />
<meta name="select:header border" content="double" />
<meta name="select:header border" content="groove" />
<meta name="select:header border" content="ridge" />
<meta name="select:header border" content="inset" />
<meta name="select:header border" content="outset" />

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

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

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

<meta name="text:description" contents="" />
<meta name="color:description" contents="" />
<meta name="select:description align" content="center" />
<meta name="select:description align" content="left" />
<meta name="select:description align" content="right" />
<meta name="select:description align" content="justify" />

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

<meta name="image:calendar background" contents="" />
<meta name="color:calendar text" contents="" />
<meta name="color:calendar day" contents="" />
<meta name="color:calendar background" contents="" />
<meta name="color:calendar inner background" contents="" />
<meta name="color:calendar border" 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:searchbar border" 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:tags" contents="" />
<meta name="color:tags shadow" contents="" />
<meta name="color:min max buttons" contents="" />
<meta name="text:permalink" contents="" />

<!--STUFF AUUUUGH-->

<style>

#credit {

position: fixed;

left: 12px;

bottom: 6px;

font-size: 14px;

}

.npf_row {

margin: 0 !important;

}

iframe, img, embed, object, video {

max-width: 100%;

}

blockquote {

margin: 3px;

}

html, body, a, a:hover {

cursor: url('{image:custom cursor}'), auto;

}

body {

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

background-size: {select:background size};

background-color: {color:background};

font-family: {select:font};

scrollbar-width: none;

}

a {

color: {color:links};

text-shadow: 0 0 3px {color:links shadow};

}

a:hover {

color: {color:links hover};

text-shadow: 0 0 3px {color:links hover shadow};

}

p {

margin-top: 5px;

}

.containme {

width: 740px;

height: auto;

overflow: auto;

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

scrollbar-width: none;

}

.containbuttons {

width: 740px;

height: 30px;

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

position: fixed;

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

background-size: cover;

background-color: {color:header background};

z-index: 10;

scrollbar-width: none;

margin-top: -4px;

margin-left: -4px;

}

.container {

width: 539px;

height: 640px;

overflow: auto;

float: left;

scrollbar-width: none;

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

background-size: cover;

background-color: {color:container background};

}

.container::-webkit-scrollbar {

display: none;

width: 0 !important;

height: 0 !important;

-webkit-appearance: none;

background: transparent;

}

::-webkit-scrollbar {

display: none;

}

.sidebar {

width: 196px;

height: 640px;

position: fixed;

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

background-size: cover;

background-color: {color:sidebar background};

margin-left: 539px;

margin-top: 1px;

border-left: 4px {select:sidebar border} {color:sidebar border};

}

.icon {

width: 170px;

height: 170px;

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

margin-top: 40px;

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

background-size: cover;

}

.desc {

width: 170px;

padding: 4px;

max-height: 170px;

overflow: auto;

text-align: {select:description align};

margin-top: 10px;

scrollbar-width: none;

color: {color:description};

}

.postsheader {

width: 440px;

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

height: 20px;

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

background-size: cover;

background-color: {color:post header background};

}

.posts {

width: 400px;

text-align: justify;

padding: 20px;

text-shadow: 0 0 3px {color:text shadow};

color: {color:text};

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

background-size: cover;

background-color: {color:post background};

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

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

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

}

.footer {

width: 400px;

}

.pagination {

color: {color:pagination};

padding: 1px;

margin-top: 14px;

}

.jump_page {

padding-right: 8px;

color: {color:pagination};

font-size: 18px;

text-decoration: none;

}

.current_page {

padding-right: 8px;

color: {color:pagination};

font-size: 18px;

text-decoration: underline;

}

.calendar {

margin-top: 20px;

z-index: 20;

font-size: 10px;

}


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};

font-size: 10px;

}

td {

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

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

font-size: 10px;

}

.tags {

width: 350px;

margin-left: -95px;

color: {color:tags};

}

.permalink {

width: 50px;

margin-left: 372px;

text-align: right;

}

ol {

text-align: justify;

}

#sf {

background-image: url('https://cdn.discordapp.com/attachments/996223789450932234/1040109890506608680/searchie.png');

background-color: #fff;

background-align: center;

background-repeat: no-repeat;

background-size: 20px 20px;

}

.sfm input {

background-color: #fff;

width: 126px;

font-size: 10px;

color: #000;

letter-spacing: 1px;

padding: 6px 22px;

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

margin-top: 10px;

}

</style>

<body>

<center>

<div class="containme">

<div class="containbuttons">

<span style="float: right; margin-right: 10px;">

<span style="font-size: 20px; color: {color:min max buttons}" onclick="minimize()"><b>—</b></span>

 &nbsp;

<span style="font-size: 20px; color: {color:min max buttons}" onclick="maximize()"><b>⧠</b></span>

</span>

</div> <!--BUTTONS CLOSE-->

<div class="container">

<div class="sidebar">

<div class="icon"></div> <!--ICON CLOSE-->

<div class="desc">

{text:description}

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

<form action="/search" method="get" class="sfm" name="theform">
<input type="text" name="q" value="" id="sf" />
</form>

<div class="pagination">

{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> <!--PAGI-->

<div class="calendar" align="center" id="dragme">
<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=4>');
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> <!--SIDEBAR CLOSE-->

{block:posts}

<br><br>

<div class="postsheader">

<span style="float: left; margin-left: 8px; font-size: 20px; margin-top: -6px;">

<a href="{ReblogURL}" title="Reblog?" style="text-decoration: none; color: {color:min max buttons}">↶</a>

</span>

<span style="float: right; margin-right: 10px; margin-top: -6px;">

<span style="font-size: 20px; color: {color:min max buttons}" onclick="minimize2()">—</span>

 &nbsp;

<span style="font-size: 20px; color: {color:min max buttons}" onclick="maximize2()"><b>⧠</b></span>

</span></div> <!--POSTS HEADER-->

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

<div class="footer">

<div class="permalink">

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

<b>{text:permalink}</b>

</a>

</div>

{block:HasTags}

<div class="tags" style="text-align: left;">

{block:Tags}

<a href="{TagUrl}" style="text-decoration: none; color:{color:tags}; text-shadow: 0 0 3px {color:tags shadow};" title="{Tag}">#{Tag}</a>

{/block:Tags}
</div>

{/block:HasTags}

{block:Date}

{block:PermalinkPage}
{/block:PermalinkPage}

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

{/block:Date}

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

<br>

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

</div> <!--CONTAINER CLOSE-->

</div> <!--CONTAIN ME CLOSE-->

</div>

<div id="credit">

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

</div>

</center>

</body>
</html>