<!DOCTYPE html>
<head>

<!-----
day 2 no hating theme by beefbrain

NOTES:

- plz add lots of text to the desc. can't figure out a way to make it look good with a short desc teehee
- ONLY use the marquee if you have both pixels/buttons and searchbar enabled
- feel free to mess around with the code at your own risk. just don't remove the credit and we're good. you're free to change the image for the credit as well if it's not to your tastes but once again don't remove the credit itself
- if you wanna use fontawesome icons on the buttons instead of text just copy and paste the <i> code it gives you when you click on an icon, example: <i class="fa-solid fa-star"></i>.
if it's not working/showing up you probably chose a pro icon, make sure that the name of the icon on the fontawesome page for it doesn't have the "PRO" next to it
----->
<script src="https://kit.fontawesome.com/83d9648b58.js" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="https://static.tumblr.com/flycrs9/qWwqf8xxx/jquery.style-my-tooltips.js"></script>
 
<script>
 
(function($){
 
$(document).ready(function(){
 
$("a[title],img[title]").style_my_tooltips({
 
tip_follows_cursor:true,
 
tip_delay_time:300,
 
tip_fade_speed:300,
 
attribute:"title"
 
});
 
});
 
})(jQuery);
 
</script>

<meta charset="utf-8">
<meta https-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
    
<title>{Title}</title>
        
<link rel="shortcut icon" href="{image:favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<link rel="stylesheet" href="https://static.tumblr.com/qxrkgx6/RWPmgn2qa/normalize.min.css">

<script src="https://static.tumblr.com/qxrkgx6/LuRmgn2rm/modernizr-2.6.2.min.js"></script>

<meta name="image:favicon">
<meta name="image:icon" content="https://i.imgur.com/Pw7qKoc.png">
<meta name="image:bg">
<meta name="image:header">
<meta name="image:container">
<meta name="image:desc">
<meta name="image:post">
<meta name="image:footer">
<meta name="image:perma">
<meta name="image:pixel 1">
<meta name="image:pixel 2">
<meta name="image:pixel 3">
<meta name="image:pixel 4">

<meta name="color:bg" content="#fff">
<meta name="color:text" content="#000">
<meta name="color:link" content="#1f45ad">
<meta name="color:link hover" content="#ad1f1f">
<meta name="color:text stroke" content="#b8b8b8">
<meta name="color:link stroke" content="#000">
<meta name="color:link stroke hover" content="#ffbfbf">
<meta name="color:text glow" content="#000">
<meta name="color:link glow" content="#1f45ad">
<meta name="color:link glow hover" content="#ad1f1f">
<meta name="color:tooltip text" content="#fff">
<meta name="color:tooltip stroke" content="#000">
<meta name="color:icon border" content="#000">
<meta name="color:container" content="#fff">
<meta name="color:container border" content="#000">
<meta name="color:container glow" content="#000">
<meta name="color:header" content="#fff">
<meta name="color:post" content="#fff">
<meta name="color:post border" content="#000">
<meta name="color:footer" content="#fff">
<meta name="color:desc" content="#fff">
<meta name="color:desc text" content="#000">
<meta name="color:desc border" content="#000">
<meta name="color:button" content="#fff">
<meta name="color:button hover" content="#d3dbd5">
<meta name="color:button text" content="#000">
<meta name="color:button text hover" content="#ad1f1f">
<meta name="color:button border" content="#000">

<meta name="select:icon border" content="none">
<meta name="select:icon border" content="solid">
<meta name="select:icon border" content="double">
<meta name="select:icon border" content="dashed">
<meta name="select:icon border" content="dotted">
<meta name="select:icon border" content="inset">
<meta name="select:icon border" content="outset">
<meta name="select:icon border" content="groove">
<meta name="select:icon border" content="ridge">

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

<meta name="select:post border" content="none">
<meta name="select:post border" content="solid">
<meta name="select:post border" content="double">
<meta name="select:post border" content="dashed">
<meta name="select:post border" content="dotted">
<meta name="select:post border" content="inset">
<meta name="select:post border" content="outset">
<meta name="select:post border" content="groove">
<meta name="select:post border" content="ridge">

<meta name="select:desc border" content="none">
<meta name="select:desc border" content="solid">
<meta name="select:desc border" content="double">
<meta name="select:desc border" content="dashed">
<meta name="select:desc border" content="dotted">
<meta name="select:desc border" content="inset">
<meta name="select:desc border" content="outset">
<meta name="select:desc border" content="groove">
<meta name="select:desc border" content="ridge">

<meta name="select:button border" content="none">
<meta name="select:button border" content="solid">
<meta name="select:button border" content="double">
<meta name="select:button border" content="dashed">
<meta name="select:button border" content="dotted">
<meta name="select:button border" content="inset">
<meta name="select:button border" content="outset">
<meta name="select:button border" content="groove">
<meta name="select:button border" content="ridge">

<meta name="select:link style" content="none">
<meta name="select:link style" content="underline">
<meta name="select:link style" content="line-through">
<meta name="select:link style" content="overline">

<meta name="select:link style hover" content="none">
<meta name="select:link style hover" content="underline">
<meta name="select:link style hover" content="line-through">
<meta name="select:link style hover" content="overline">

<meta name="if:text glow" content="0"/>
<meta name="if:link glow" content="0"/>
<meta name="if:text stroke" content="0"/>
<meta name="if:link stroke" content="0"/>
<meta name="if:transparent container" content="0"/>
<meta name="if:transparent header" content="0"/>
<meta name="if:transparent desc" content="0"/>
<meta name="if:transparent posts" content="0"/>
<meta name="if:bg cover" content="0"/>
<meta name="if:container bg cover" content="0"/>
<meta name="if:header bg cover" content="0"/>
<meta name="if:desc bg cover" content="0"/>
<meta name="if:post bg cover" content="0"/>
<meta name="if:blend post and footer" content="0"/>
<meta name="if:footer bg cover" content="0"/>
<meta name="if:container glow" content="0"/>
<meta name="if:buttons" content="0"/>
<meta name="if:standard button design" content="0"/>
<meta name="if:pixels" content="0"/>
<meta name="if:searchbar" content="0"/>
<meta name="if:flip header" content="0"/>
<meta name="if:switch desc to marquee" content="0"/>
<meta name="if:rounded container" content="0"/>
<meta name="if:rounded posts" content="0"/>
<meta name="if:rounded icon" content="0"/>
<meta name="if:rounded searchbar" content="0"/>
<meta name="if:rounded desc" content="0"/>
<meta name="if:rounded buttons" content="0"/>

<meta name="text:font size" content="20">
<meta name="text:font" content="arial">
<meta name="text:icon border size" content="1">
<meta name="text:container border size" content="1">
<meta name="text:post border size" content="1">
<meta name="text:desc border size" content="1">
<meta name="text:button border size" content="1">
<meta name="text:tooltip border size" content="1">
<meta name="text:icon hover" content="home">
<meta name="text:desc" content="plz read the notes at the top of the theme (gray text) for info about the desc/marquee">
<meta name="text:search" content="search">
<meta name="text:search button" content="go!!!">
<meta name="text:button 1 text" content="1">
<meta name="text:button 1 link" content="/ (these links are used on the pixels too ^_^)">
<meta name="text:pixel 1 hover" content="link 1">
<meta name="text:button 2 text" content="2">
<meta name="text:button 2 link" content="/">
<meta name="text:pixel 2 hover" content="link 2">
<meta name="text:button 3 text" content="3">
<meta name="text:button 3 link" content="/">
<meta name="text:pixel 3 hover" content="link 3">
<meta name="text:button 4 text" content="4">
<meta name="text:button 4 link" content="/">
<meta name="text:pixel 4 hover" content="link 4">
        
<style type="text/css">


body {
margin:0px;
background:{color:bg};
font-family:{text:font};
font-size:{text:font size}px;
line-height:140%;
color: {color:text};
{block:iftextstroke}text-shadow: {color:text stroke} 2px 0px 0px, {color:text stroke} 1.75517px 0.958851px 0px, {color:text stroke} 1.0806px 1.68294px 0px, {color:text stroke} 0.141474px 1.99499px 0px, {color:text stroke} -0.832294px 1.81859px 0px, {color:text stroke} -1.60229px 1.19694px 0px, {color:text stroke} -1.97999px 0.28224px 0px, {color:text stroke} -1.87291px -0.701566px 0px, {color:text stroke} -1.30729px -1.51361px 0px, {color:text stroke} -0.421592px -1.95506px 0px, {color:text stroke} 0.567324px -1.91785px 0px, {color:text stroke} 1.41734px -1.41108px 0px, {color:text stroke} 1.92034px -0.558831px 0px;{/block:iftextstroke}
{block:iftextglow}
text-shadow: 0px 0px 3px {color:text glow};{/block:iftextglow}
background-image:url({image:bg});
background-size:repeat;
{block:ifbgcover}
background-size:cover;{/block:ifbgcover}
}

p{
margin:0 0 10px 0;
padding:0;
}

pre { 
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}

a{
color:{color:link};
cursor:help;
transition: .2s ease;
{block:iflinkstroke}
text-shadow: {color:link stroke} 2px 0px 0px, {color:link stroke} 1.75517px 0.958851px 0px, {color:link stroke} 1.0806px 1.68294px 0px, {color:link stroke} 0.141474px 1.99499px 0px, {color:link stroke} -0.832294px 1.81859px 0px, {color:link stroke} -1.60229px 1.19694px 0px, {color:link stroke} -1.97999px 0.28224px 0px, {color:link stroke} -1.87291px -0.701566px 0px, {color:link stroke} -1.30729px -1.51361px 0px, {color:link stroke} -0.421592px -1.95506px 0px, {color:link stroke} 0.567324px -1.91785px 0px, {color:link stroke} 1.41734px -1.41108px 0px, {color:link stroke} 1.92034px -0.558831px 0px;{/block:iflinkstroke}
{block:iflinkglow}
text-shadow: 0px 0px 3px {color:link glow};{/block:iflinkglow}
text-decoration: {select:link style};
{block:ifnotlinkstroke}
text-shadow:none;
{/block:ifnotlinkstroke}
}

a:hover{
color:{color:link hover};
transition: .2s ease;
{block:iflinkstroke}
text-shadow: {color:link stroke hover} 2px 0px 0px, {color:link stroke hover} 1.75517px 0.958851px 0px, {color:link stroke hover} 1.0806px 1.68294px 0px, {color:link stroke hover} 0.141474px 1.99499px 0px, {color:link stroke hover} -0.832294px 1.81859px 0px, {color:link stroke hover} -1.60229px 1.19694px 0px, {color:link stroke hover} -1.97999px 0.28224px 0px, {color:link stroke hover} -1.87291px -0.701566px 0px, {color:link stroke hover} -1.30729px -1.51361px 0px, {color:link stroke hover} -0.421592px -1.95506px 0px, {color:link stroke hover} 0.567324px -1.91785px 0px, {color:link stroke hover} 1.41734px -1.41108px 0px, {color:link stroke hover} 1.92034px -0.558831px 0px;{/block:iflinkstroke}
{block:iflinkglow}
text-shadow: 0px 0px 3px {color:link glow hover};{/block:iflinkglow}
text-decoration: {select:link style hover};
}

li{
margin-left:-15px;
}

#wrapper{
}

#container {
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
width:450px;
height:600px;
overflow:hidden;
border: {select:container border} {text:container border size}px {color:container border};
{block:ifroundedcontainer}
border-radius: calc(4px + {text:container border size}px);
{/block:ifroundedcontainer}
{block:ifcontainerglow}
box-shadow: 0px 0px 5px {color:container glow};
transition: .2s ease;
{/block:ifcontainerglow}
}

{block:ifcontainerglow}
#container:hover {
box-shadow: 0px 0px 15px {color:container glow};
transition: .2s ease;
}
{/block:ifcontainerglow}

#header{
width:440px;
height:150px;
border-bottom: {select:container border} {text:container border size}px {color:container border}; border-top:none;border-left:none;border-right:none;
padding:5px;
display: flex;
align-content: space-between; 
flex-wrap: nowrap;
gap: calc({text:icon border size}px / 2);
gap:5px;
line-height:0;
background:{color:header};
{block:iftransparentheader}
background:transparent;{/block:iftransparentheader}
background-image:url({image:header});
background-size:repeat;
{block:ifheaderbgcover}
background-size:cover;{/block:ifheaderbgcover}

}

#header img {
height:auto;
{block:ifsearchbar}
width:190px;
{/block:ifsearchbar}
{block:ifroundedicon}
border-radius: 5px;
{/block:ifroundedicon}
border: {select:icon border} {text:icon border size}px {color:icon border};
width:calc( 200px - {text:icon border size}px);
box-sizing: border-box;
}

#content{
width:400px;
padding: 10px;
}

.stuff {
height:440px;
position:relative;
overflow-y:auto;
overflow-x:hidden;
background:{color:container};
{block:iftransparentcontainer}
background:transparent;{/block:iftransparentcontainer}
background-image:url({image:container});
background-size:repeat;
{block:ifcontainerbgcover}
background-size:cover;{/block:ifcontainerbgcover}
background-attachment:fixed;
}

.post{
width:400px;
margin:0 0 50px 6px;
border: {select:post border} {text:post border size}px {color:post border};
padding:5px;
background:{color:post};
{block:iftransparentposts}
background:transparent;{/block:iftransparentposts}
background-image:url({image:post});
background-size:repeat;
{block:ifpostbgcover}
background-size:cover;{/block:ifpostbgcover}
overflow:hidden;
{block:ifroundedposts}
border-radius: 5px;
{/block:ifroundedposts}
box-sizing: border-box;
}

#header img, .post img{
max-width:100%;
}

#nav{
padding:5px;
width:100%;
font-size: 30px;
margin-bottom: 30px;
}

.media{
margin:0 0 10px 0;
}

.title{
font-weight:normal;
font-size:18px;
margin:0 0 10px 0;
}

.quote{
font-weight:normal;
font-size:16px;
font-style:italic;
margin:0 0 10px 0;
}

.question{
margin-bottom:10px;
border: {select:post border} {text:post border size}px {color:post border};
padding:5px;
background: url(https://i.imgur.com/mY5ffGl.png);
}

blockquote{
margin:0 0 10px 10px; 
padding:0 0 0 10px;
border-left: 1px solid {color:text};
}

.tumblr_audio_player {
width:32px;
position: absolute;
top:50%;
left:13%;
transform: translate(-50%, -50%);
transition: .3s ease;
opacity: 3;
border-radius:20%;
mix-blend-mode: screen;
}
.tumblr_audio_player:hover {
opacity: .5;
transition: .3s ease;
box-shadow: white 0px 0px 5px;
top:50%;
left:13%;
transform: translate(-50%, -50%), scale(1.2);
}


.timestamp {margin-top:calc(-{text:font size}px / .7);opacity:0;z-index:9999;transition:.3s ease;}
.footer img{opacity:1;transition:.3s ease;visibility:visible;}
.footer:hover img {opacity:0;transition:.3s ease;visibility:hidden;}
.footer:hover .timestamp {opacity:1;transition:.3s ease;}
.footer {
text-align:center;
border-top: {select:post border} {text:post border size}px {color:post border};
border-bottom:none;
border-left:none;
border-right:none;
padding:5px;
margin-bottom:-6px;
width:101%;
margin-left:-6px;
background:{color:footer};
{block:ifblendpostandfooter}
background:transparent;
border-top:none;
{/block:ifblendpostandfooter}
background-image:url({image:footer});
background-size:repeat;
{block:iffooterbgcover}
background-size:cover;{/block:iffooterbgcover}
}

.footer:hover .tags {
line-height:1;
max-height:500px;
transition:.3s ease;
opacity:1;
}

.tags {
line-height:0;
max-height:0;
transition:.3s ease;
opacity:0;
}

ol.notes{
list-style-type:none;
padding:0;
margin:0;
word-break:break-word;
width:390px;
}

ol.notes li.note img{
width:16px;
height:16px;
margin-right:3px;
}

ol.notes li.note{
margin:0px;
margin-left: 10px;
}

.permapage {
background:{color:footer};
{block:ifblendpostandfooter}
background:transparent;
{/block:ifblendpostandfooter}
background-image:url({image:footer});
background-size:repeat;
{block:iffooterbgcover}
background-size:cover;{/block:iffooterbgcover}
margin:-5px -10px -5px -5px;
}


.tooltip{
display:inline;
position:relative;
}
#s-m-t-tooltip{
max-width:300px;
padding:3px 4px 5px 4px; 
margin:20px 7px -2px 20px; 
font-family:inherit;
font-size:20px;
color:{color:tooltip text};
text-shadow: {color:tooltip stroke} 2px 0px 0px, {color:tooltip stroke} 1.75517px 0.958851px 0px, {color:tooltip stroke} 1.0806px 1.68294px 0px, {color:tooltip stroke} 0.141474px 1.99499px 0px, {color:tooltip stroke} -0.832294px 1.81859px 0px, {color:tooltip stroke} -1.60229px 1.19694px 0px, {color:tooltip stroke} -1.97999px 0.28224px 0px, {color:tooltip stroke} -1.87291px -0.701566px 0px, {color:tooltip stroke} -1.30729px -1.51361px 0px, {color:tooltip stroke} -0.421592px -1.95506px 0px, {color:tooltip stroke} 0.567324px -1.91785px 0px, {color:tooltip stroke} 1.41734px -1.41108px 0px, {color:tooltip stroke} 1.92034px -0.558831px 0px;
z-index:99999999999999999999;
word-break: break-word;
transition: .2s ease all;
}

.sfm input {
background:url(https://i.imgur.com/mY5ffGl.png);
color: #363636;
padding: 5px;
border: 1px outset #d6d6d6;
font-family:inherit;
background-color: #d6d6d6;
font-size: 22px;
}

#sf {
background: url(https://i.imgur.com/mY5ffGl.png);
background-size: repeat;
background-color: white;
color: black;
{block:ifroundedsearchbar}
border-radius:5px 0 0 5px;{/block:ifroundedsearchbar}
}


::placeholder {
color: black;
opacity: .5;
}

#sb {
background:white;
{block:ifroundedsearchbar}
border-radius:0 5px 5px 0;{/block:ifroundedsearchbar}
padding-top:3;
}

#sb:hover {
cursor: help;
background:#f0f0f0;
}

.ahh form {
height:100%;
display: grid;
grid-template-columns: auto auto;
}

input.search{
width: 100%;
box-sizing: border-box;
height:100%;
}

.desc {
height:100%;
overflow-x:hidden;
overflow-y:auto;
width: 290px;
box-sizing: border-box;
font-size: 20px;
padding:5px;
line-height:1;
{block:ifroundeddesc}
border-radius: 5px;{/block:ifroundeddesc}
background:{color:desc};
{block:iftransparentdesc}
background:transparent;{/block:iftransparentdesc}
background-image:url({image:desc});
background-size:repeat;
{block:ifdescbgcover}
background-size:cover;{/block:ifdescbgcover}
background-attachment:fixed;
border: {select:desc border} {text:desc border size}px {color:desc border};
color:{color:desc text};
}

{block:ifswitchdesctomarquee}
#marquee {
width: 290px;
height:100%;
font-size: 25px;
padding:5px;
padding-bottom: 30px;
margin-top:5px;
margin-bottom:5px;
line-height:1.8;
box-sizing: border-box;
overflow-x: hidden;
clip-path: fill-box;
{block:ifroundeddesc}
border-radius: 5px;{/block:ifroundeddesc}
background:{color:desc};
{block:iftransparentdesc}
background:transparent;{/block:iftransparentdesc}
background-image:url({image:desc});
background-size:repeat;
{block:ifdescbgcover}
background-size:cover;{/block:ifdescbgcover}
background-attachment:fixed;
border: {select:desc border} {text:desc border size}px {color:desc border};
color:{color:desc text};
}


.track {
position: absolute;
white-space: nowrap;
will-change: transform;
animation:marquee 20s linear infinite;
}

@keyframes marquee{
from {transform: translateX(100%);}
to {transform: translateX(-100%);}
}

{/block:ifswitchdesctomarquee}

.col {
display: flex;
flex-direction: column;
gap: 5px;
}

.but {
display: flex;
justify-content: space-between;
}

{block:ifpixels}
.pixel {
max-width: 35px;
}
.pixel img {
object-fit: none;
object-position:center;
}

{/block:ifpixels}

button {
min-width: 35px;
min-height:35px;
box-sizing: border-box;
{block:ifnotstandardbuttondesign}
font-size:{text:font size}px;
border: {select:button border} {text:button border size}px {color:button border};
background:white;
{block:ifroundedbuttons}
border-radius: 5px;{/block:ifroundedbuttons}
color: {color:button text};
transition: .3s ease;
{/block:ifnotstandardbuttondesign}
font-family:{text:font};
}

{block:ifnotstandardbuttondesign}
button:hover {
background:{color:button hover};
color: {color:button text hover};
cursor: help;
transition: .3s ease;
}{/block:ifnotstandardbuttondesign}

#credit {position: fixed; bottom: 5px; left: 5px;}
#credit img:hover {animation: shake 1s infinite;}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

{CustomCSS}
</style>
</head>

<body>
<div id="wrapper">

<div id="container">
<div id="header">
{block:ifnotflipheader}
<a href="/" title="{text:icon hover}">
<img src="{image:icon}"></a>{/block:ifnotflipheader}
<div class="col">


{block:ifsearchbar}
<div class="ahh">
<form action="/search" method="get" class="sfm" name="theform"  >
<input class ="search" type="text" name="q" value="" placeholder="{text:search}" id="sf"/>
<input type="submit" id="sb" value="{text:search button}" />
</form></div>
{/block:ifsearchbar}

{block:ifnotswitchdesctomarquee}
<div class="desc">
{text:desc}
</div>{/block:ifnotswitchdesctomarquee}


{block:ifswitchdesctomarquee}
<div id="marquee">
<div class="track">
{text:desc}
</div>
</div>{/block:ifswitchdesctomarquee}


<div class="but">
{block:ifbuttons}
<a href="{text:button 1 link}"><button>{text:button 1 text}</button></a>
<a href="{text:button 2 link}"><button>{text:button 2 text}</button></a>
<a href="{text:button 3 link}"><button>{text:button 3 text}</button></a>
<a href="{text:button 4 link}"><button>{text:button 4 text}</button></a>
{/block:ifbuttons}

{block:ifpixels}
<div class="pixel"><a href="{text:button 1 link}" title="{text:pixel 1 hover}"><img src="{image:pixel 1}" style="border:none;border-radius:0;"></a></div>
<div class="pixel"><a href="{text:button 2 link}" title="{text:pixel 2 hover}"><img src="{image:pixel 2}" style="border:none;border-radius:0;"></a></div>
<div class="pixel"><a href="{text:button 3 link}" title="{text:pixel 3 hover}"><img src="{image:pixel 3}" style="border:none;border-radius:0;"></a></div>
<div class="pixel"><a href="{text:button 4 link}" title="{text:pixel 4 hover}"><img src="{image:pixel 4}" style="border:none;border-radius:0;"></a></div>
{/block:ifpixels}
</div>
</div>

{block:ifflipheader}
<a href="/" title="{text:icon hover}">
<img src="{image:icon}"></a>
{/block:ifflipheader}

</div>


<div class="stuff">
<div id="content">
{block:Posts}

{block:PinnedPostLabel}<i class="fa-solid fa-thumbtack"></i> <i>PINNED POST</i> {/block:PinnedPostLabel}

<div class="post">


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

{block:Photo}
<div class="media">{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}</div>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:Photo}

{block:Photoset}
<div class="media">{Photoset-400}</div>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:Photoset}

{block:Quote}
<div class="quote">"{Quote}"</div>
{block:Source}
<div class="quotesource">{Source}</div>
{/block:Source}
{/block:Quote}

{block:Link}
<div class="title"><a href="{URL}">{Name}</a></div>
{block:Description}
<div class="description">{Description}</div>
{/block:Description}
{/block:Link}

{block:Chat}
{block:Title}
<div class="title">{Title}</div>
{/block:Title}

{block:Lines}
<div class="{Alt} user_{UserNumber}">
{block:Label}
<b>{Label}</b>{/block:Label}
 {Line}
</div>
{/block:Lines}
{/block:Chat}

{block:Video}
<div class="media">{Video-400}</div>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:Video}

{block:Audio}
<div class="media">
<div class="env" style="position:relative;">
<div class="play" style="width:400px;display:flex;flex-direction:row;gap:5px;">
{AudioPlayer}{block:AlbumArt}
<img src="{AlbumArtURL}" style="float:left;width:100px;height:auto;margin-left:-5px;{block:ifroundedposts}border-radius: 5px;{/block:ifroundedposts}">
{/block:AlbumArt}
<span style="font-size:20px;float:right;text-align:left;line-height:1.5;">
{block:TrackName}<b>{TrackName} </b>{/block:TrackName}
<br>
{block:Album}
<span style="font-size:14px;background: url(https://i.imgur.com/mY5ffGl.png);padding:3px;">from {Album}</span>
{/block:Album}
{block:Artist}<br>
<span style="font-size:12px;background: url(https://i.imgur.com/mY5ffGl.png);padding:3px;">by {Artist}{/block:Artist}</span></span>
</div></div>
</div>
{block:ifnothidecaption}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:ifnothidecaption}
{/block:Audio}   
                
{block:Answer}
<div class="question">{Asker}: {Question}</div>
<div class="caption">{Answer}</div>
{/block:Answer}


{block:Date}
<div class="footer">
<img src="{image:perma}" style="text-align:center;display:inline;">
<div class="timestamp">
<a href="{Permalink}" title="{Month} {DayOfMonth}{DayOfMonthSuffix}, {Year}">
{DayOfMonthWithZero}/{MonthNumberWithZero}</a>{block:NoteCount} <i class="fa-solid fa-barcode"></i> <a href="{ReblogURL}" title="reblog?">{NoteCount} <i class="fa-solid fa-rotate-right"></i>{/block:NoteCount}
</a>
</div>
<div class="tags" style="text-align:left;">
{block:HasTags}
{block:Tags}<a href="{TagURL}">#{Tag}</a> 
{/block:Tags}
{/block:HasTags}
</div>
</div>

<div class="permapage">{block:PermalinkPage}{block:RebloggedFrom}
<br>
<a href="{ReblogParentURL}" style="margin-left:5px;">via {ReblogParentName}</a>{/block:RebloggedFrom}
{block:ContentSource}<br><a href="{SourceURL}">{lang:Source}: {SourceTitle}</a>{/block:ContentSource}
{block:NoteCount}
{block:PostNotes}{PostNotes}{/block:PostNotes}
{/block:NoteCount}
{/block:PermalinkPage}</div>
{/block:Date}

</div>
{/block:Posts}

{block:Pagination}
<div id="nav">
{block:PreviousPage}<a href="{PreviousPage}" style="float:left;"><i class="fa-solid fa-arrow-left"></i></a>{/block:PreviousPage}
 
{block:NextPage}<a href="{NextPage}" style="float:right;"><i class="fa-solid fa-arrow-right"></i></a>{/block:NextPage}
</div>
{/block:Pagination}
</div></div></div>
</div>

</div>
<div id="credit">
<a href="https://beefbrain.tumblr.com/" data-toggle="tooltip" title="by beefbrain" ><img src="https://i.imgur.com/4I1bKS3.gif" width="20%"></a>
</div>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="https://static.tumblr.com/qxrkgx6/q6kmgn2w2/jquery-1.8.3.min.js"><\/script>')</script>

    </body>
</html>