RAINBOW RESCUE THEME

<!DOCTYPE html>

<head>

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

<!--SCRIPTS-->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script src="https://static.tumblr.com/rtrqcib/VGGnlh8rf/jquery.style-my-tooltips.min.js"></script>

<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($){$(document).ready(function(){$("a[title]").style_my_tooltips({tip_follows_cursor:true,tip_delay_time:0,tip_fade_speed:0,attribute:"title"});});})(jQuery);

</script>

<script>

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

</script>

<script>

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

</script>

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

<!--HVR-->

<style>

@-webkit-keyframes hvr-bob {
  0% {
    translateY(-8px);
  }
  50% {translateY(-4px);
  }
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@keyframes hvr-bob {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@-webkit-keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
@keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}
#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>

<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:floatie 1" contents="" />
<meta name="image:floatie 2" contents="" />

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

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

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

<meta name="color:music player" contents="" />

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

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

<meta name="text:desc" contents="" />

<meta name="text:mp3" contents="" />
<meta name="text:song title" contents="" />

<meta name="color:desc background" contents="" />
<meta name="color:desc font" contents="" />

<meta name="color:tooltip background" contents="" />
<meta name="color:tooltip font" contents="" />

<!--STUFF-->

<style>

#credit {

position: fixed;

left: 12px;

bottom: 6px;

font-size: 14px;

}

::webkit-scrollbar {

display: none;

}

blockquote {

margin: 3px;

}

.npf_row {

margin: 0 !important;

}

iframe, img, embed, object, video {

max-width: 280px;

max-height: 280px;

}

iframe {

margin-right: 120px;

}

.tumblr_audio_player {

max-width: 100%;

}

.wrapper {

with: 900px;

}

body {

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

background-size: cover;

background-color: {color:background};

font-family: {select:font};

background-attachment: fixed;

}

a {

color: {color:links};

}

.container {

width: 300px;

max-width: 300px;

margin-top: -20px;

margin-bottom: -20px;

overflow: auto;

padding: 4px;

display: inline-block;

scrollbar-width: none;

}

.container img {

max-width: 100%;

}

.posts {

width: 280px;

padding: 8px;

margin-bottom: 12px;

margin-top: 12px;

word-wrap: break-word;

text-align: justify;

background-color: rgba(255, 255, 255, 0.8);

border-radius: 10px;

color: {color:font};

}

.icon {

width: 107px;

height: 107px;

overflow: hidden;

padding: 1px;

display: inline-block;

animation: float 6s ease-in-out infinite;

position: fixed;

margin-top: 140px;

margin-left: 344px;

z-index: 10;

}

.icon img {

max-width: 100%;

max-height: 100%;

}

.desc {

width: 162px;

max-height: 82px;

position: fixed;

margin-left: 320px;

margin-top: 290px;

padding: 0px;

display: inline-block;

border: 2px outset #eee;

background-color: {color:desc background};

color: {color:desc font}

text-align: justify;

overflow: auto;

scrollbar-width: none;

}

.pag {

width: 162px;

height: 30px;

overflow: auto;

position: fixed;

margin-left: 320px;

margin-top: 100px;

padding: 0px;

display: inline-block;

scrollbar-width: none;

text-decoration: none;

z-index: 20;

}

.music {

width: 162px;

height: 30px;

overflow: auto;

position: fixed;

margin-left: 320px;

margin-top: 260px;

padding: 0px;

display: inline-block;

scrollbar-width: none;

text-decoration: none;

z-index: 20;

}

.tooltip {

display: inline;

position: relative;

}

#s-m-t-tooltip {

max-width: 250px;

text-align: center;

margin: 10px 0 0 15px;

padding: 4px;

background-color: {color:tooltip background};

color: {color:tooltip font};

word-wrap: break-word;

font-size: 14px

-webkit-transition:all 0.2s linear;

-moz-transition:all 0.2s linear;

-o       -transition-duration:0.2s;

transition: all 0.2s linear;

letter-spacing: 2px;

}

</style>

</head>

<body>

<center>

<div class="wrapper">

<img src="{image:floatie 1}" id="box1" style="max-width: 200px; margin-top: 200px; margin-left: -200px; position: fixed;">

<img src="{image:floatie 2}" id="box2" style="max-width: 200px; margin-top: 400px; margin-left: 310px; position: fixed;">

<div class="icon" id="hvr-bob">

<img src="{image:icon}">

</div> <!--ICON-->

{block:Pagination}

<div class="pag">

{block:NextPage}<a href="{NextPage}" style="text-decoration: none; float: left; color: {color:pagination}; font-size: 16px; text-shadow: -1px -1px 0 {color:pagination outline}, 0 -1px 0 {color:pagination outline}, 1px -1px 0 {color:pagination outline}, 1px 0 0 {color:pagination outline}, 1px 1px 0 {color:pagination outline}, 0 1px 0 {color:pagination outline}, -1px 1px 0 {color:pagination outline}, -1px 0 0 {color:pagination outline};">NEXT</a>{/block:NextPage}

{block:PreviousPage}<a href="{PreviousPage}" style="text-decoration: none; float: right; color: {color:pagination}; font-size: 16px; text-shadow: -1px -1px 0 {color:pagination outline}, 0 -1px 0 {color:pagination outline}, 1px -1px 0 {color:pagination outline}, 1px 0 0 {color:pagination outline}, 1px 1px 0 {color:pagination outline}, 0 1px 0 {color:pagination outline}, -1px 1px 0 {color:pagination outline}, -1px 0 0 {color:pagination outline};">PREV</a>{/block:PreviousPage}

</div> <!--PAG-->

{/block:Pagination}

<div class="desc">

<p style="padding-left: 10px; padding-right: 10px; margin-top: 2px; margin-bottom: 5px; font-size: 14px;">

{text:desc}

</p>

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

<div class="music">

<a href="#" style="float: left; margin-top: -4px; color: {color:music player}; text-decoration: none;" onclick="document.getElementById('music').play()">▶</a><audio id="music" src="{text:mp3}"></audio>

<marquee scrolldelay="100" style="float: right; width: 140px; color: {color:music player};">

{text:song title}

</marquee>

</div> <!--MUSIC-->

<div class="container">

<center>

{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}
<span style="text-align: center;">

<div id="permalink">

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

<b>{ShortMonth} {DayOfMonth} {ShortYear}</b>

</a>

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

{block:NoteCount}

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

{NoteCount} notes

</a></b>

{/block:NoteCount}

<div>{block:RebloggedFrom}<a href="{ReblogParentURL}" title="{ReblogParentName}" style="color: {color:via}; font-family: {text:font family}; font-size: {text:via font size}; text-decoration: none;">via</a>{block:ContentSource} — <a href="{ReblogRootURL}" title="{ReblogRootName}" style="color: {color:source}; font-family: {text:font family}; font-size: {text:source font size}; text-decoration: none;">src</a>{/block:ContentSource}{/block:RebloggedFrom}</div></span>
{block:HasTags}<div class="tags">{block:Tags}<a href="{TagUrl}" style="text-decoration: none;" title="{Tag}">#{Tag}</a> {/block:Tags}</div>{/block:HasTags}

</div>

{/block:Date}

</div>

{/block:Posts}

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