LOGIN THEME

<html>

<head>

<meta charset="UTF-8">

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

<title>{text:TITLE}</title>

<link rel="icon" type="image/x-icon" href="{image:FAVICON}">

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

</script>

<script>

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

</script>

<!--METAS-->

<meta name="text:FLOATING TEXT" contents="" />
<meta name="text:DESC" contents="" />

<meta name="select:FONT" content="arial" />
<meta name="select:FONT" content="times" />
<meta name="select:FONT" content="ms gothic" />
<meta name="select:FONT" content="comic sans" />
<meta name="select:FONT" content="tahoma" />
<meta name="select:FONT" content="georgia" />
<meta name="select:FONT" content="alata" />
<meta name="select:FONT" content="amatic sc" />
<meta name="select:FONT" content="bruno ace" />
<meta name="select:FONT" content="concert one" />
<meta name="select:FONT" content="righteous" />
<meta name="select:FONT" content="sacramento" />

<meta name="image:FLOATER 1" contents="" />
<meta name="image:FLOATER 2" contents="" />

<meta name="image:LEFT IMAGE" contents="" />
<meta name="image:RIGHT IMAGE" contents="" />

<meta name="image:SCROLL 1" contents="" />
<meta name="image:SCROLL 2" contents="" />
<meta name="image:SCROLL 3" contents="" />

<meta name="color:FLOATING TEXT" contents="" />
<meta name="color:FLOATING TEXT 2" contents="" />

<meta name="image:BACKGROUND" contents="" />

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

<meta name="select:BACKGROUND SIZE" content="auto" />
<meta name="select:BACKGROUND SIZE" content="cover" />
<meta name="select:BACKGROUND SIZE" content="contain" />

<meta name="color:LINKS" contents="" />
<meta name="color:LINKS HOVER" contents="" />

<meta name="image:CONTAINER BACKGROUND" contents="" />

<meta name="color:CONTAINER BACKGROUND" contents="" />

<meta name="select:CONTAINER BACKGROUND SIZE" content="auto" />
<meta name="select:CONTAINER BACKGROUND SIZE" content="cover" />
<meta name="select:CONTAINER BACKGROUND SIZE" content="contain" />

<meta name="color:CONTAINER BORDER" contents="" />

<meta name="select:CONTAINER BORDER SIZE" content="0px" />
<meta name="select:CONTAINER BORDER SIZE" content="1px" />
<meta name="select:CONTAINER BORDER SIZE" content="2px" />
<meta name="select:CONTAINER BORDER SIZE" content="3px" />
<meta name="select:CONTAINER BORDER SIZE" content="4px" />
<meta name="select:CONTAINER BORDER SIZE" content="5px" />
<meta name="select:CONTAINER BORDER SIZE" content="10px" />
<meta name="select:CONTAINER BORDER SIZE" content="15px" />
<meta name="select:CONTAINER BORDER SIZE" content="20px" />

<meta name="select:CONTAINER BORDER STYLE" content="solid" />
<meta name="select:CONTAINER BORDER STYLE" content="dashed" />
<meta name="select:CONTAINER BORDER STYLE" content="dotted" />
<meta name="select:CONTAINER BORDER STYLE" content="ridge" />
<meta name="select:CONTAINER BORDER STYLE" content="groove" />
<meta name="select:CONTAINER BORDER STYLE" content="inset" />
<meta name="select:CONTAINER BORDER STYLE" content="outset" />
<meta name="select:CONTAINER BORDER STYLE" content="double" />

<meta name="color:DESC TEXT" contents="" />

<meta name="color:DESC BACKGROUND" contents="" />

<meta name="color:DESC BORDER" contents="" />

<meta name="if:DESC SHADOW" contents="" />

<meta name="color:DESC SHADOW" contents="" />

<meta name="select:DESC ALIGN" content="center" />
<meta name="select:DESC ALIGN" content="left" />
<meta name="select:DESC ALIGN" content="right" />
<meta name="select:DESC ALIGN" content="justify" />

<meta name="select:DESC BORDER SIZE" content="0px" />
<meta name="select:DESC BORDER SIZE" content="1px" />
<meta name="select:DESC BORDER SIZE" content="2px" />
<meta name="select:DESC BORDER SIZE" content="3px" />
<meta name="select:DESC BORDER SIZE" content="4px" />
<meta name="select:DESC BORDER SIZE" content="5px" />

<meta name="select:DESC BORDER STYLE" content="solid" />
<meta name="select:DESC BORDER STYLE" content="dashed" />
<meta name="select:DESC BORDER STYLE" content="dotted" />
<meta name="select:DESC BORDER STYLE" content="ridge" />
<meta name="select:DESC BORDER STYLE" content="groove" />
<meta name="select:DESC BORDER STYLE" content="inset" />
<meta name="select:DESC BORDER STYLE" content="outset" />
<meta name="select:DESC BORDER STYLE" content="double" />

<meta name="color:POSTS TEXT" contents="" />

<meta name="image:POSTS BACKGROUND" contents="" />

<meta name="color:POSTS BACKGROUND" contents="" />

<meta name="select:POSTS BACKGROUND SIZE" content="auto" />
<meta name="select:POSTS BACKGROUND SIZE" content="cover" />
<meta name="select:POSTS BACKGROUND SIZE" content="contain" />

<meta name="color:POSTS BORDER" contents="" />

<meta name="select:POSTS BORDER SIZE" content="0px" />
<meta name="select:POSTS BORDER SIZE" content="1px" />
<meta name="select:POSTS BORDER SIZE" content="2px" />
<meta name="select:POSTS BORDER SIZE" content="3px" />
<meta name="select:POSTS BORDER SIZE" content="4px" />
<meta name="select:POSTS BORDER SIZE" content="5px" />

<meta name="select:POSTS BORDER STYLE" content="solid" />
<meta name="select:POSTS BORDER STYLE" content="dashed" />
<meta name="select:POSTS BORDER STYLE" content="dotted" />
<meta name="select:POSTS BORDER STYLE" content="ridge" />
<meta name="select:POSTS BORDER STYLE" content="groove" />
<meta name="select:POSTS BORDER STYLE" content="inset" />
<meta name="select:POSTS BORDER STYLE" content="outset" />
<meta name="select:POSTS BORDER STYLE" content="double" />

<meta name="color:TIMESTAMP" contents="" />
<meta name="color:TIMESTAMP HOVER" contents="" />


<!--STUFF-->

<style>

@import url('https://fonts.googleapis.com/css2?family=Alata&family=Amatic+SC&family=Bruno+Ace&family=Concert+One&family=Press+Start+2P&family=Righteous&family=Sacramento&display=swap');

#credit {

position: fixed;

left: 12px;

bottom: 6px;

font-size: 14px;

}

body {

background-color: {color:BACKGROUND};

background-image: url("{image:BACKGROUND}");

background-size: {select:BACKGROUND SIZE};

font-family: {select:FONT};

}

img {

max-width: 100%;

height: auto;

}

.page {

width: 600px;

height: 110%;

margin-top: -10px;

margin-bottom: -10px;

background-color: {color:CONTAINER BACKGROUND};

background-image: url("{image:CONTAINER BACKGROUND}");

background-size: {select:CONTAINER BACKGROUND SIZE};

border-left: {select:CONTAINER BORDER SIZE} {select:CONTAINER BORDER STYLE} {color:CONTAINER BORDER};

border-right: {select:CONTAINER BORDER SIZE} {select:CONTAINER BORDER STYLE} {color:CONTAINER BORDER};

overflow: auto;

scrollbar-width: none;

}

.top_text {

font-size: 42px;

z-index: 99;

color: {color:FLOATING TEXT};

text-shadow: 0px 5px 0px {color:FLOATING TEXT 2};

}

.top {

width: 540px;

height: 190px;

}

.top_img_1 {

width: 170px;

height: 170px;

margin-left: 10px;

margin-top: 10px;

float: left;

}

.top_img_2 {

width: 170px;

height: 170px;

margin-right: 10px;

margin-top: 10px;

float: right;

}

.center {

width: 124px;

max-height: 154px;

background-color: {color:DESC BACKGROUND};

border: {select:DESC BORDER SIZE} {select:DESC BORDER STYLE} {color:DESC BORDER};

{block:ifdescshadow}

box-shadow: 0 0 10px {color:DESC SHADOW};

{/block:ifdescshadow}

padding: 8px;

margin-top: 10px;

margin-left: 14px;

float: left;

color: {color:DESC TEXT};

overflow: auto;

scrollbar-width: none;

}

.undertop {

width: 540px;

height: auto;

background-color: transparent;

margin-bottom: 20px;

}

a {

color: {color:LINKS};

text-decoration: none;

}

a:hover {

color: {color:LINKS HOVER};

transition: 0.8s;

}

img {

max-width: 100%;

}

.posts {

width: 500px;

height: auto;

padding: 8px;

background-color: {color:POSTS BACKGROUND};

background-image: url("{image:POSTS BACKGROUND}");

background-size: {select:POSTS BACKGROUND};

color: {color:POSTS TEXT};

word-wrap: break-word;

text-align: justify;

margin-bottom: 40px;

border: {select:POSTS BORDER SIZE} {select:POSTS BORDER STYLE} {color:POSTS BORDER};

}

.timestamp a {

color: {color:TIMESTAMP};

}

.timestamp a:hover {

color: {color:TIMESTAMP HOVER};

}

.questions {

background-color: {color:POSTS BACKGROUND};

padding: 8px;

border-top-right-radius: 10px;

border-bottom-left-radius: 10px;

color: {color:POSTS TEXT};

}

.asker {

margin-top: 8px;

}

.pagination {

width: 100px;

padding: 8px;

background-color: {color:POSTS BACKGROUND};

}

ol.notes {

padding: 0px;

margin: 25px 0px;

list-style-type: none;

}

ol.notes li.note {

padding: 10px;

}

ol.notes li.note img.avatar {

width: 12px;

height: 12px;

margin-right: 12px;

}

img.avatar {

border-radius: 50%;

}

ol.notes li.note blockquote {

border-color: #eee;

padding: 8px;

margin: 10px;

margin-top: 10px;

}

ol.notes li.note blockquote a {

text-decoration: none;

}

.footer {

margin-top: 5px;

}

blockquote {

border-left: 2px solid {color:LINKS};

padding-left: 15px;

margin-top: -5px;

margin-left: 5px;

}

.tumblr_audio_player {

width: 500px;

height: 85px;

}

@-webkit-keyframes hvr-bob {
  0% {
    translateY(-18px);
  }
  50% {translateY(-4px);
  }
  100% {
    -webkit-transform: translateY(-18px);
    transform: translateY(-18px);
  }
}
@keyframes hvr-bob {
  0% {
    -webkit-transform: translateY(-18px);
    transform: translateY(-18px);
  }
  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
  100% {
    -webkit-transform: translateY(-18px);
    transform: translateY(-18px);
  }
}
@-webkit-keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-18px);
    transform: translateY(-18px);
  }
}
@keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-18px);
    transform: translateY(-18px);
  }
}
#hvr-bob {
  -webkit-animation-name: hvr-bob-float, hvr-bob;
  animation-name: hvr-bob-float, hvr-bob;
  -webkit-animation-duration: .3s, 1.5s;
  animation-duration: .3s, 1.5s;
  -webkit-animation-delay: 0s, .3s;
  animation-delay: 0s, .3s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
}

</style>

</head>

<body>

<center>

<div class="page">

<br><br>

<a href="/"><div class="top_text" id="hvr-bob">

{text:FLOATING TEXT}

</div></a> <!--TOP TEXT-->

<br>

<img src="{image:FLOATER 1}" id="pic1" style="position: absolute; z-index: 100; max-width: 200px; margin-left: 250px; margin-top: 200px;">

<img src="{image:FLOATER 2}" id="pic2" style="position: absolute; z-index: 100; max-width: 200px; margin-left: -450px; margin-top: -100px;">

<div class="top">

<div class="top_img_1">

<center>

<img src="{image:LEFT IMAGE}" style="max-width: 180px; max-height: 180px; float: right;">

</div> <!--IMG 1-->

<div class="top_img_2">

<center>

<img src="{image:RIGHT IMAGE}" style="max-width: 180px; max-height: 180px; float: left;">

</div> <!--IMG 1-->

<div class="center">

<p style="text-align: {select:DESC ALIGN}; margin-top: 0px; margin-bottom: 0px;">

{text:DESC}

</p>

</div> <!--CENTER-->

</div> <!--TOP-->

<br>

<div class="undertop">

<marquee scrolldelay="110" behavior="alternate">

<img src="{image:SCROLL 1}"> &nbsp;

<img src="{image:SCROLL 2}"> &nbsp;

<img src="{image:SCROLL 3}">

</marquee>

</div> <!--UNDER TOP-->

{block:Posts}

{block:ContentSource}

{block:RebloggedFrom}

{/block:RebloggedFrom}

source: <a href="{SourceURL}">{SourceTitle}</a>

{/block:ContentSource}

{block:IndexPage}

{/block:IndexPage}

{block:PermalinkPage}

{block:RebloggedFrom}

{/block:RebloggedFrom}

{/block:PermalinkPage}

<div class="timestamp"><b><a href="{Permalink}" title="{TimeAgo}">{TimeAgo}</a></b><br><br></div> <!--TIMESTAMP-->

<div class="posts">

{block:Date}

<div class="footer" style="margin-bottom: 4px;">

{block:HasTags}
filed under: &nbsp;
{block:Tags}

<a href="{TagURL}">#{Tag}</a> &nbsp;

{/block:Tags}

{/block:HasTags}

</div>

{/block:Date}

{block:Photo}

<div class="media">

{LinkOpenTag}

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

{LinkCloseTag}

</div>

{block:Caption}

<div class="txt">{Caption}</div>

{/block:Caption}

{/block:Photo}

{block:Panorama}

<div class="media">

{LinkOpenTag}

<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}" />

{LinkCloseTag}

</div>

{block:Caption}

<div class="txt">{Caption}</div>

{/block:Caption}

{/block:Panorama}

{block:Text}

{block:Title}

<div class="title">{Title}</div>

{/block:Title}

<div class="txt">{Body}</div>

{/block:Text}

{block:Photoset}

<div class="media">

{Photoset}

</div>

{block:Caption}

<div class="txt">{Caption}</div>

{/block:Caption}

{/block:Photoset}

{block:Chat}

{block:Title}

<div class="title">{Title}</div>

{/block:Title}

{block:Lines}

<div class="{Alt}">

{block:Label}

<span class="chatlabel">{Label}</span>

{/block:Label}

&nbsp;{Line}

</div>

{/block:Lines}

{/block:Chat}

{block:Quote}

<div class="quote {Length}">{Quote}</div>

{block:Source}

<div class="quotesrc">&mdash;{Source}</div>

{/block:Source}

{/block:Quote}

{block:Answer}

<div class="questions">

{Question}

</div>

<div class="asker">

<img style="float: right;" src="{AskerPortraitURL-48}"> <span style="text-transform: lowercase;"><i>{Asker}</i></span>

</div>

<div class="txt">{Answer}</div>

{/block:Answer}

{block:Link}

<div class="link">

<a href="{URL}" {Target}>{Name}</a>

</div>

{block:Description}

<div class="txt">{Description}</div>

{/block:Description}

{/block:Link}

{block:Audio}

{block:AudioEmbed}

<div class="media">

{AudioEmbed}

</div>

{/block:AudioEmbed}

<div class="txt">{Caption}</div>

{/block:Audio}

{block:Video}

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

{block:Caption}

<div class="txt">{Caption}</div>

{/block:Caption}

{/block:Video}

{PostNotes}

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

{/block:Posts}

{block:Pagination}

<div class="pagination">

{block:NextPage}

<a href="{NextPage}">NEXT</a>

{/block:NextPage}

{block:PreviousPage}

 &nbsp;<a href="{PreviousPage}">PREV</a>

{/block:PreviousPage}

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

<br><br>

</div> <!--PAGE-->

</center>

<div id="credit">

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

</div>

</body>

</html>