BUBBLE WAFFLE THEME

<!DOCTYPE html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<link rel="icon" type="image/x-icon" href="image:favicon">

<!--MEEEEETAS-->

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

<meta name="text:font family" contents="" />

<meta name="image:container background" contents="" />
<meta name="image:post background" contents="" />
<meta name="image:icon background" contents="" />
<meta name="image:description background" contents="" />
<meta name="image:pagination background" contents="" />

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

<meta name="color:container background" contents="" />
<meta name="color:container shadow" contents="" />
<meta name="color:post background" contents="" />
<meta name="color:post text" contents="" />
<meta name="color:post text outline" contents="" />
<meta name="color:post shadow" contents="" />
<meta name="color:icon background" contents="" />
<meta name="color:icon shadow" contents="" />
<meta name="color:description background" contents="" />
<meta name="color:description text" contents="" />
<meta name="color:description text outline" contents="" />
<meta name="color:description shadow" contents="" />
<meta name="color:pagination background" contents="" />
<meta name="color:pagination" contents="" />
<meta name="color:pagination outline" contents="" />
<meta name="color:pagination shadow" contents="" />

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

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

<meta name="color:tags" contents="" />
<meta name="text:tags size" contents="" />
<meta name="text:divider emoji" contents="" />

<!--IMPORTANT-->

<style>

/* Bob */
@-webkit-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);
  }
}
@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>

<!--EEEELEMENTS-->

<style>

#credit {

position:fixed;

left:12px;

bottom:6px;

font-size:14px;

}

blockquote {

margin: 0;

}

body {

font-family: {text:font family};
background-color: {color:background};
background-image: url('{image:background}');
background-size: cover;

}

a {

color: {color:links};

}

.npf_row {

margin: 0 !important;

}

.contain {

width: 340px;
height: 340px;
background-color: {color:container background};
background-image: url('{image:container background}');
background-size: cover;
color: #fff;
clip-path: circle(40%);
overflow: auto;
padding: 140px;
text-align: justify;
display: inline-block;

}

.containwrap {

filter: drop-shadow(3px 3px 0px {color:container shadow});

}

iframe, img, embed, object, video {

   max-width: 100%;
   margin-bottom: 0px;
   padding-bottom: 0px;

}

img {

    width: auto;

    height: auto;
}

.icon {

display: inline-block;
width: 130px;
height: 130px;
clip-path: circle(40%);
padding: 20px;
background-color: {color:icon background};
background-image: url('{image:icon background}');
background-size: cover;
color: #fff;
position: absolute;
margin-left: -130px;
z-index: 10;

}

.icon img {

   border-radius: 50%;
   width: 100%;
   height: 100%;
}

.iconwrap {

filter: drop-shadow(3px 3px 0px {color:icon shadow});

}

.pag {

display: inline-block;
width: 80px;
height: 80px;
clip-path: circle(40%);
padding: 20px;
background-color: {color:pagination background};
background-image: url('{image:pagination background}');
background-size: cover;
color: {color:pagination};
position: absolute;
margin-left: -50px;
margin-top: 150px;
z-index: 10;
text-shadow: -1px -1px 0 {color:pagination outline}, 1px -1px 0 {color:pagination outline}, -1px 1px 0 {color:pagination outline}, 1px 1px 0 {color:pagination outline};

}

.pagwrap {

filter: drop-shadow(3px 3px 0px {color:pagination shadow});

}

.pag a {

color: {color:pagination};
text-decoration: none;

}

.desc {

display: inline-block;
width: 130px;
height: 130px;
clip-path: circle(40%);
padding: 20px;
background-color: {color:description background};
background-image: url('{image:description background}');
background-size: cover;
color: {color:description text};
position: absolute;
margin-left: 20px;
margin-top: 30px;
z-index: 10;
overflow: auto;
text-align: justify;
text-shadow: -1px -1px 0 {color:description text outline}, 1px -1px 0 {color:description text outline}, -1px 1px 0 {color:description text outline}, 1px 1px 0 {color:description text outline};
word-break: break-word;

}

.descwrap {

filter: drop-shadow(3px 3px 0px {color:description shadow});

}

.desc p {

margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: -20px;

}

.post {

background-color: {color:post background};
background-image: url('{image:post background}');
background-size: cover;
max-width: 100%;
padding: 10px;
margin-bottom: 9px;
margin-top: 9px;
color: {color:post text};
text-shadow: -1px -1px 0 {color:post text outline}, 1px -1px 0 {color:post text outline}, -1px 1px 0 {color:post text outline}, 1px 1px 0 {color:post text outline};
text-wrap: break-word;
overflow: hidden;

}



</style>

</head>

<body>

<center>

<span class="containwrap">

<div class="contain">

{block:Posts}

<div class="post">

{block:Quote}
<div id="titlequote">&nbsp; {Quote} &nbsp;<i class="fa fa-quote-right"></i></div>
{block:Source}<div id="source">&mdash; {Source}</div>{/block:Source}
{/block:Quote}

{block:Text}
{block:Title}
<div id="title">{Title}</div>{/block:Title}
{Body}
{/block:Text}

{block:link}
<div id="title"><a href="{URL}">&nbsp; {Name}</a></div>
{block:Description}{Description}{/block:Description}
{/block:link}

{block:Chat}
{block:Title}
<div id="title">{Title}</div>{/block:Title}
{/block:Text}
{block:lines}
{block:label}
<br><b>{label}</b>
{/block:label}
{line}
{/block:lines}
{/block:Chat}

{block:Photo}
{linkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{linkCloseTag}
{/block:Photo}

{block:Photoset}
{Photoset-500}
{/block:Photoset}

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

{block:Audio}
{block:AudioEmbed}{AudioEmbed-500}{/block:AudioEmbed}
{/block:Audio}

{block:Answer}
<div class="q">
<div class="as"> <b><big>{Asker} said:</big></b>
{Question}</div></div>
<div class="a">{Answer}</div>
{/block:Answer}

{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}

<!-- {block:ContentSource} {SourceURL} {/block:ContentSource} {block:RebloggedFrom} {ReblogRootURL} {ReblogParentURL} {/block:RebloggedFrom} -->

{block:Date}
<span style="text-align: center;">
<div id="permalink">
<a style="color: {color:permalink}; font-family: {text:font family}; font-size: {text:permalink font size}; text-decoration: none;" href="{Permalink}" ><b>{ShortMonth} {DayOfMonth}</b></a>
{block:NoteCount}&nbsp; {text:divider emoji} &nbsp;<a href="{Permalink}" style="color: {color:notes}; font-family: {text:font family}; font-size: {text:notes font size}; text-decoration: none;">{NoteCount}♡︎</a>{/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>

<span style="text-align: right;">
{block:HasTags}<div class="tags">{block:Tags}<a href="{TagUrl}" style="color: {color:tags}; font-family: {text:font family}; font-size: {text:tags size}; text-decoration: none;">#{Tag}</a>&nbsp;&nbsp;{/block:Tags}</div>{/block:HasTags}</span>

</div>

{/block:Date}

</div>

{block:PostNotes}
<div class="pagenotes">
{PostNotes}
</div>
{/block:PostNotes}

{/block:Posts}

</div><!--CONTAIN END-->

</span>

<span class="pagwrap">

<div class="pag"><br>
{block:Pagination}
{block:PreviousPage}
<a href="{PreviousPage}" title="PREVIOUS PAGE">🡸</a>
{/block:PreviousPage} &nbsp;&nbsp;
{block:NextPage}<a href="{NextPage}" title="NEXT PAGE">🡺</a>
{/block:NextPage}
{/block:Pagination}
</div>

</span>

<span id="hvr-bob" class="iconwrap">

<div id="hvr-bob" class="icon"><img src="{image:icon}"></div>

</span>

<span class="descwrap">

<div class="desc">

<p>{text:description}</p>

</div>

</span>

</center>

<div id="credit">

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

                    </div>

</body>

</html>