SWEET TREAT THEME

<!DOCTYPE html>
<head>

<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() {
$( "#container" ).draggable();
} );

</script>

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

<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="image:floaty" contents="" />

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

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

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

<meta name="image:calendar background" contents="" />
<meta name="color:calendar background" contents="" />
<meta name="color:calendar" contents="" />
<meta name="color:calendar day" 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:links" contents="" />
<meta name="color:tags" contents="" />

<style>

#credit {

position: fixed;

left: 12px;

bottom: 6px;

font-size: 14px;

}

::webkit-scrollbar {

display: none;

}

blockquote {

margin-left: 3px;

}

.npf_row {

margin: 0px !important;

}

iframe, img, embed, object, video {

max-width: 100%;

}

iframe {

max-width: 290px;

margin-right: 120px;

}

.tumblr_audio_player {

max-width: 100%;

}

a, ahref {

color: {color:links};

}

body {

scrollbar-width: none;

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

background-size: cover;

background-color: {color:background};

font-family: {select:font};

}

.wrapper {

width: 700px;

}

.container {

width: 610px;

height: 610px;

background-color: {color:container background};

border-top: 15px {select:container border} {color:container border};

border-top-left-radius: 15px;

border-top-right-radius: 15px;

border-bottom: 5px {select:container border} {color:container border};

border-left: 5px {select:container border} {color:container border};

border-right: 5px {select:container border} {color:container border};

padding: 10px;

overflow: auto;

scrollbar-width: none;

}

.header {

width: 610px;

height: 100px;

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

background-size: cover;

margin-bottom: 10px;

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

position: fixed;

z-index: 10;

scrollbar-width: none;

}

.headerfix {

width: 610px;

height: 50px;

border: 2px solid transparent;

background-color: {color:container background};

position: fixed;

margin-top: -10px;

scrollbar-width: none;

z-index: 5;

}

.icon {

width: 130px;

height: 130px;

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

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

background-size: cover;

position: fixed;

margin-left: 480px;

margin-top: 110px;

scrollbar-width: none;

}

.icon2 {

width: 130px;

height: 130px;

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

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

background-size: cover;

position: fixed;

margin-left: 480px;

margin-top: 110px;

scrollbar-width: none;

}

.pagination {

position: fixed;

width: 130px;

height: 20px;

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

background-size: cover;

background-color: {color:pagination background};

color: {color:pagination};

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

padding: 10px;

margin-left: 320px;

margin-top: 110px;

scrollbar-width: none;

}

.jump_page {

padding-right: 8px;

color: {color:pagination};

font-size: 20px;

text-decoration: none;

}

.current_page {

padding-right: 8px;

color: {color:pagination};

font-size: 20px;

text-decoration: underline;

}

.searchbar {

position: fixed;

width: 130px;

height: 20px;

border: 2px solid transparent;

padding: 10px;

margin-left: 320px;

margin-top: 160px;

scrollbar-width: none;

}

.desc {

position: fixed;

width: 270px;

height: 50px;

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

background-size: cover;

background-color: {color:description background};

color: {color:description};

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

padding: 10px;

text-align: justify;

margin-left: 320px;

margin-top: 390px;

scrollbar-width: none;

overflow: auto;

}

.calendar {

position: fixed;

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

background-color: {color:calendar background};

color: {color:calendar};

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

padding: 10px;

width: 130px;

height: 150px;

margin-left: 320px;

margin-top: 210px;

scrollbar-width: none;

overflow: auto;

}

.postswrap {

width: 310px;

float: left;

margin-top: 110px;

scrollbar-width: none;

}

.posts {

width: 290px;

padding: 10px;

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

background-size: cover;

background-color: {color:posts background};

color: {color:posts};

height: auto;

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

margin-bottom: 10px;

text-align: left;

scrollbar-width: none;

}

.float {

position: fixed;

margin-top: 470px;

margin-left: 320px;

width: 290px;

height: 140px;

border: 2px solid transparent;

overflow: hidden;

}

.float b {

width: 50px;

height: 50px;

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

background-size: contain;

background-repeat: no-repeat;

position: absolute;

-webkit-animation: moveX 8.05s linear 0s infinite alternate, moveY 8.4s linear 0s infinite alternate;

-moz-animation: moveX 8.05s linear 0s infinite alternate, moveY 8.4s linear 0s infinite alternate;

-o-animation: moveX 8.05s linear 0s infinite alternate, moveY 8.4s linear 0s infinite alternate;

animation: moveX 8.05s linear 0s infinite alternate, moveY 8.4s linear 0s infinite alternate;

}

@-webkit-keyframes moveX {
  from { left: 0; } to { left: 250px; }
}
@-moz-keyframes moveX {
  from { left: 0; } to { left: 250px; }
}
@-o-keyframes moveX {
  from { left: 0; } to { left: 250px; }
}
@keyframes moveX {
  from { left: 0; } to { left: 250px; }
}
@-webkit-keyframes moveY {
  from { top: 0; } to { top: 90px; }
}
@-moz-keyframes moveY {
  from { top: 0; } to { top: 90px; }
}
@-o-keyframes moveY {
  from { top: 0; } to { top: 90px; }
}
@keyframes moveY {
  from { top: 0; } to { top: 90px; }
}

</style>

</head>

<body>

<center>

<div class="wrapper">

<div class="container" id="container">

<div class="header"></div> <!--HEADER-->

<div class="headerfix"></div> <!--HEADERFIX-->

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

<div class="icon2" style="margin-top: 250px;"></div> <!--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; margin-top: -1px; margin-left: -4px; max-width: 100%;"></input></form>

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

<div class="pagination">

{block:Pagination}

{block:JumpPagination length="5"}

{block:CurrentPage}

<span class="current_page" style="color: {color:pagination}; margin-top: -8px;">{PageNumber}</span>

{/block:CurrentPage}

{block:JumpPage}

<a class="jump_page" href="{URL}" style="color: {color:pagination}; margin-top: -8px;">{PageNumber}</a>

{/block:JumpPage}

{/block:JumpPagination}

{/block:Pagination}

</div> <!--PAGI-->

<div class="desc">

{text:description}

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

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

monthnames = new Array(
"JAN",
"FEB",
"MAR",
"APR",
"MAY",
"JUN",
"JUL",
"AUG",
"SEP",
"OCT",
"NOV",
"DEC");
var linkcount=0;
function addlink(month, day, href) {
var entry = new Array(3);
entry[0] = month;
entry[1] = day;
entry[2] = href;
this[linkcount++] = entry;
}
Array.prototype.addlink = addlink;
linkdays = new Array();
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]++;
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("bordercolor=black style='font-size : 12px; color : {color:calendar};' cellpadding=1 cellspacing=2>");
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++) {
document.write("<td> </td>");
}
count=1;
while (count <= monthdays[thismonth]) {
for (b = startspaces;b<7;b++) {
linktrue=false;
document.write("<td>");
for (c=0;c<linkdays.length;c++) {
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++;
}
document.write("</tr>");
document.write("<tr>");
startspaces=0;
}
document.write("</table></p>");
// End -->
</script>

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

<div class="float"><b></b></div> <!--FLOAT-->

<div class="postswrap">

{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>{/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>
{/block:Lines}
{/block:Chat}

{block:Answer}
<span style="float: right;"><i>{Asker}</i></span><br>
<div class="question"><blockquote>{Question}</blockquote></div><hr>
{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}
{block:AlbumArt}<div class="songart"><img src="{AlbumArtURL}" style="width: 100px; float: left; margin-bottom: 8px;"></div>{/block:AlbumArt}
<div class="songtitle" style="float: right;">
{block:TrackName}{TrackName}{/block:TrackName}
</div>
<div class="songauthor" style="float: right;">By{block:Artist} {Artist}{/block:Artist}</div>
{AudioPlayerWhite}
{/block:Audio}

<span style="text-align: justify;">

{block:Date}

<div id="permalink">

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

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

</a>

{block:NoteCount}

 +

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

{NoteCount} notes

</a></b>

{/block:NoteCount}

<div>{block:RebloggedFrom}from <a href="{ReblogParentURL}" title="{ReblogParentName}" style="font-family: {text:font family}; text-decoration: none;">{ReblogParentName}</a>{/block:RebloggedFrom}</div>
{block:HasTags}<div class="tags">{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>

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

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

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

</div> <!--WRAPPER-->

</center>

<div id="credit">

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

</div> <!--CREDIT-->

</body>

</html>