Untitled

 <!--

                       ♡  REALITY BY DRUNKBLUSHED  ♡

                       — do not combine with other themes.
                 — do not take copy or take parts of this theme.
              — do not remove credits and redistribute as your own.


 -->

<html>
<head>

<meta name="color:background" content="#e7e7e7"/>
<meta name="color:posts" content="#f3f3f3"/>
<meta name="color:container" content="#eaeaea"/>
<meta name="color:borders" content="#dadada"/>
<meta name="color:accent" content="#d6dcdf"/>
<meta name="color:accent 2" content="#e7c5bb"/>
<meta name="color:phone" content="#3c3c3c"/>
<meta name="color:bold" content="#dfac9d"/>
<meta name="color:italic" content="#98aab0"/>
<meta name="color:text" content="#444444"/>
<meta name="color:link" content="#7e92a2"/>
<meta name="color:permalink" content="#444444"/>
<meta name="color:permalink bg" content="#c8d1d4"/>

<meta name="image:background" content=""/>
<meta name="image:left image" content="https://via.placeholder.com/280x190"/>
<meta name="image:right image" content="https://via.placeholder.com/180x200"/>
<meta name="image:icon" content="https://via.placeholder.com/50x50"/>

<meta name="text:main title" content="REALITY REALITY REALITY"/>
<meta name="text:side description" content="Consisting of four members, Mamamoo debuted in 2014 under Rainbow Bridge World, and has become a group who is unstoppably releasing back-to-back popular songs."/>
<meta name="text:stats" content"ACCEPTING APPS!" />
<meta name="text:sidelink title1" content="link one" />
<meta name="text:sidelink url1" content="/" />
<meta name="text:sidelink title2" content="link two" />
<meta name="text:sidelink url2" content="/" />
<meta name="text:sidelink title3" content="link three" />
<meta name="text:sidelink url3" content="/" />
<meta name="text:sidelink title4" content="link four" />
<meta name="text:sidelink url4" content="/" />

 <title>{title}</title>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
   $('.video iframe').each(function(){
   var scale = $(this).parents('.video').width() / 500;
   $(this).attr({
   width: Math.floor($(this).attr('width') * scale),
   height: Math.floor($(this).attr('height') * scale)
   });
   });
});
</script>

<script type="text/javascript" src="https://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
<script>
   (function($){
   $(document).ready(function(){
   $("[title]").style_my_tooltips();
   });
   })(jQuery);
</script>


<link href="https://fonts.googleapis.com/css?family=Montserrat:500&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-------MUSIC PLAYER BY GLENTHEMES------->
<script src="https://dl.dropbox.com/s/brdv4yv2iaigjmp/glenplayer07.js"></script>

<style type="text/css">

/*----------------- FONTS -----------------*/

@font-face { font-family: "creo"; src: url('https://dl.dropboxusercontent.com/s/uk7fcayvza8gd9t/Creo-ExtraBold.ttf') ;}
@font-face{font-family:"praying angel";src:url('https://static.tumblr.com/it5srtk/X1Yorww17/praying_angel.ttf');}
 @font-face { font-family: "dalmatins"; src: url('https://dl.dropboxusercontent.com/s/vt2bux883emjhf3/Dalmatins.otf') ;}


/*----------------- TEXT STYLES -----------------*/

body{
background-color: {color:background};
font-family: 'Montserrat', sans-serif;
color:{color:text};
letter-spacing:1px;
color:{color:text};
font-size:9px;
font-weight:500;
}

a:link, a:active, a:visited{
color: {color:Link};
text-decoration:none;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;
text-transform:uppercase;
}

a:hover {
color:{color:Link Hover};
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;
}

b,bold,strong{
color:{color:bold};
text-transform:uppercase;
}

em,i,italic{
color:{color:italic};
}

big{
font-size:15px;
font-family: 'Montserrat', sans-serif;
}

small,sup, sub{
font-size:9px;
}

h1{font-family: "creo";
letter-spacing:1px;
padding:0px;
text-align:center;
font-size: 20px;
text-transform:uppercase;
line-height: 120%;
color:{color:bold};}


h2{font-family: "dalmatins";
letter-spacing:1px;
text-align:center;
font-size: 14px;
text-transform:lowercase;
line-height: 120%;
color:#c8d1d4;}

.posttitle{
font-family: "creo";
letter-spacing:1px;
text-align:center;
font-size: 24px;
text-transform:uppercase;
line-height: 120%;
-webkit-text-stroke: 1px {color:bold};
-webkit-text-fill-color: rgba(0, 0, 0, 0);
}

blockquote{
margin-left:0px;
padding-left:15px;
border-left: 1px solid {color:borders};
width:95%;
}


.p { padding-top: 5px;}
.ol, ul { margin-left: 30px; padding: 5px; }
.ul { list-style-type: square; }

::-webkit-scrollbar-thumb {
 display: none;
}

::-webkit-scrollbar {
 display: none;
}

#s-m-t-tooltip {
z-index: 999999999999999999;
background: #fff;
font-size: 7.5px;
line-height: 13px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: {color:text};
font-weight:900;
background-color:{color:posts};
border:1px solid {color:borders};
max-width: 150px;
word-wrap: break-word;
padding: 2px 5px 2px 6px;
display: block;
margin: 24px 14px 7px 12px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;
}

::-moz-selection { background: {color:accent}; }
::selection { background: {color:accent}; }

/*----------------- CONTAINERS & POSTS -----------------*/

#entries{
padding:20px;
z-index:99;
margin: auto;
left:0px;
top:0px;
bottom:0px;
right:0px;
width:250px;
position:absolute;
height:540px;
overflow-y:scroll;
background-color: {color:phone};
overflow-x:hidden;
border-radius:15px;
border:15px solid {color:phone};
}

#container {
margin: auto;
left:0px;
top:20px;
bottom:0px;
right:0px;
position:absolute;
width:300px;
height:570px;
overflow:auto;
color:{color:text};
z-index:999;
-webkit-animation: fadeEffect 0.7s;
animation: fadeEffect 0.7s;
border-radius:0px 0px 10px 10px;
background-color:{color:container};
}

#post {
font-size:9px;
background-color:{color:posts};
padding:15px;
width:250px;
z-index:99;
margin-top:20px;
margin-bottom:40px;
margin-left:10px;
line-height:160%;
letter-spacing:1px;
border-radius:10px;
}

#post .tags {position:relative;
text-align:left;
color:{color:link};
padding-top:10px;
font-size:6.5px;
letter-spacing:2px;
font-family: 'Montserrat', sans-serif;
text-transform:uppercase;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;
line-height:120%;
margin-top:5px;
}

#post .tags a{
color:{color:link};
}

#post img{
max-width:250px;
height:auto;
}


#post:hover .tags {position:relative;
text-align:left;opacity:1;
color:{color:link}; width:auto;
text-transform:uppercase;-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;}
.tags a {color:{color:text};text-transform:uppercase;}

.tags a:hover {color:{color:link hover};text-transform:uppercase;}


.info{
background:{color:permalink bg};
position:relative;
padding:12px;
margin-top:20px;
margin-bottom:0px;
text-transform:uppercase;
letter-spacing:2px;
color:{color:permalink};
font-size:8.5px;
line-height:100%;
border-radius:5px;
}

.info span{
text-align:left;
padding-left:-20px;
text-transform:uppercase;
margin-top:2px;
padding-right:5px;
}

.info rb{
right:0%;
position:absolute;
padding-right:0px;
margin-top:-1px;
}

 .info b{
font-weight:900;
color:{color:permalink};
 }

.info a{
margin-left:0px;
font-size:8.5px;
color: {color:permalink};
}


/*----------------- CUSTOMIZATIONS -----------------*/

#leftwindow{
width:315px;
height:300px;
padding:0px;
background-color:{color:posts};
margin:auto;
position:fixed;
left:0px;
top:310px;
bottom:0px;
right:600px;
border-radius:15px;
-webkit-box-shadow: -9px 10px 22px -21px rgba(0,0,0,0.75);
-moz-box-shadow: -9px 10px 22px -21px rgba(0,0,0,0.75);
box-shadow: -9px 10px 22px -21px rgba(0,0,0,0.75);
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;
}

#leftwindow:hover{
transform: scale(1.1);
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;
z-index:9999;
}

#browserbig{
background-color:{color:accent 2};
padding:5px;
width:auto;
border-radius:15px 15px 0px 0px;
}

.dots{
font-size:10px;
margin:5px; color:{color:posts};}

.comp{
font-size:10px;
margin:5px; text-align:right; color:{color:posts};}

#rightwindow{
width:230px;
height:380px;
padding:0px;
background-color:{color:posts};
margin:auto;
position:fixed;
left:525px;
top:230px;
bottom:0px;
right:0px;
border-radius:15px;
-webkit-box-shadow: 9px 10px 22px -21px rgba(0,0,0,0.75);
-moz-box-shadow: 9px 10px 22px -21px rgba(0,0,0,0.75);
box-shadow: 9px 10px 22px -21px rgba(0,0,0,0.75);
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;
}

#rightwindow img{
width:180px;
height:200px;
border-radius:10px;
margin-top:45px;
margin-left:30px;
background-color:{color:accent};
}

#rightwindow:hover{
transform: scale(1.1);
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;
}

#stats{
font-family:"creo";
font-size:14px;
position:fixed;
margin-top:15px;
margin-left:30px;
color:{color:italic};
width:180px;
text-align:center;
word-spacing:0px;
overflow:hidden;
letter-spacing:2.5px;
font-weight:bold;
}


.blinking{
    animation:blinkingText 1.2s infinite;
}
@keyframes blinkingText{
    0%{     color: {color:italic};    }
    49%{    color: {color:italic}; }
    60%{    color: transparent; }
    99%{    color:transparent;  }
    100%{   color: {color:italic};    }
}

@import "compass/css3";

.wave1fill{
 fill:{color:accent};
 width: 1000px;
height: 675px;
}


#wave1{
margin:auto;
right:0px;
top:-35px;
left:0px;
bottom:0px;
width: 1000px;
height:675px;
overflow: hidden;
position:fixed;
}

#notif{
position:fixed;
top:-480px;
right:0px;
left:640px;
bottom:0px;
margin:auto;
border-radius:15px;
width:250px;
height:50px;
padding:10px;
background-color:{color:posts};
opacity:0.8;
line-height:150%;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;
}

#notif img{
width:50px;
height:50px;
border-radius:50%;
float:left;
margin-right:10px;
}

#notif:hover{
transform: scale(1.1);
opacity:0.9;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;
}

#spotify{
position:fixed;
top:-310px;
right:0px;
left:570px;
bottom:0px;
margin:auto;
border-radius:15px;
width:200px;
height:68px;
background-color:{color:posts};
opacity:0.8;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;
}

#spotify:hover{
transform: scale(1.1);
opacity:0.9;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;
}

.sideimage {position:fixed; width:280px; height:150px; background-color:{color:accent}; border-radius:15px;  margin:18px;display:block;}

.sideimage img {width:280px; height:190px; position:fixed; border-radius:15px; margin-top:-40px; }

.description {width:280px; height:75px; line-height:200%; margin-top:180px; margin-left:18px; display:block; font-size:9px; overflow:hidden;}

#maintitle{
font-family:"creo";
font-size:74px;
position:fixed;
margin:auto;
left:0px;
right:660px;
bottom:0px;
top:-280px;
-webkit-text-stroke:1.5px {color:bold};
-webkit-text-fill-color: rgba(0, 0, 0, 0);
text-shadow:3px 3px {color:posts};
width:300px;
height:250px;
text-align:right;
word-spacing:-3px;
line-height:100%;
padding:10px;
letter-spacing:2px;
}

#bar{
position:fixed;
top:-570px;
bottom:0px;
right:0px;
left:0px;
margin: auto;
width:90px;
height:25px;
border-radius:8px;
background-color:{color:phone};
z-index:9999999999999999999999999999999;
}

#phone{
position:fixed;
top:-560px;
bottom:0px;
right:0px;
left:0px;
margin: auto;
width:270px;
height:5px;
background-color:{color:container};
padding:10px 15px;
z-index:9999999999999999999999999999;
font-size:9px;
line-height:110%;
letter-spacing:2.5px;
border-radius:15px 15px 0px 0px;
text-transform:uppercase;
}

.phone{
float:right;
}

#phone span{font-size:10px;}

#phone .material-icons{font-size:11px; color:{color:text};  display: inline-block; margin-top:-5px; text-transform: none;letter-spacing: normal;word-wrap: normal;white-space: nowrap;}


/*----------------- NAVIGATION & PAGINATION -----------------*/

#sidelink{
position:fixed;
width:280px;
height:50px;
margin-left:30px;
margin-top:15px;
z-index:999999999999999999999999999;
text-align:left;
}

#sidelink span{
width:21px;
height:21px;
border-radius:15px;
background-color:{color:accent 2};
color:{color:text};
font-size:21px;
float:left;
padding:10px;
text-align:center;
margin-right:5px;
}

#sidelink a:hover span{
transform: scale(1.2);
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;
}


#pagination {
font-family: 'Montserrat', sans-serif;
font-size:10px;
font-weight:900;
width:180px;
color:{color:accent};
text-align:center;
margin-left:30px;
}

#pagination a{
display:inline-block;
color:{color:link};
padding:7px 10px 5px 10px;
}


/*----------------- ASK POSTS -----------------*/

.question {
padding:15px;
background-color:{color:container};
color:{color:text};
margin-top:40px;
margin-left:0px;
width:220px;
margin-bottom:20px;
border-radius:10px;
text-align:center;
}

.asker img {
position:absolute;
border-radius:50px;
margin-left:-40px;
margin-right:40px;
margin-top:-10px;
border:5px solid {color:bold};
}

.asker {
padding-top:6px;
background-color:{color:posts};
padding:5px;
color:{color:bold};
font-size:16px;
letter-spacing:1.5px;
margin-left:23%;
margin-top:5px;
display:inline;
width:auto;
position:absolute;
margin-bottom:10px;
text-transform:uppercase;
font-family:"creo";
}

.asker a{
color:{color:bold};
margin-top:-5px;
}


/*----------------- CHAT POSTS -----------------*/

.answer span,.convo li{margin:0 0 5px;border-radius:1em;padding:.5em 10px;max-width:75%;clear:both;position:relative}.answer .them,.user_1,.user_3,.user_5,.user_7,.user_9,.user_11{float:left;background:{color:container};color:{color:text};left:3px}.me::after,.user_1::after,.user_3::after,.user_5::after,.user_7::after,.user_9::after,.user_11::after{content:"";position:absolute;left:-.5em;bottom:0;width:.5em;height:1em;border-right:.5em solid {color:container};border-bottom-right-radius:1em .5em}.answer .me,.user_2,.user_4,.user_6,.user_8,.user_10,.user_12{right:3px;float:right;background-color:{color:background};color:{color:text}}.them::after,.user_2::after,.user_4::after,.user_6::after,.user_8::after,.user_10::after,.user_12::after{content:"";position:absolute;right:-.5em;bottom:0;width:.5em;height:1em;border-left:.5em solid {color:background};border-bottom-left-radius:1em .5em}.me p,.answer,.asked span{padding:0;margin:0}.answer{overflow:hidden}
.asked p {
text-align: left;
margin: 0 0px 10px 0px;
padding: 0;
color:{color:text};
font-size: 12px;
line-height: 0px;
}
.footerright .viasrc {
float: left;
}
.asked a {
margin:0;padding:0;
}
.user_4{background-color:{color:container};color{color:text}}.user_4::after{border-color:{color:container}}.user_6{background-color:{color:container};color{color:text}}.user_6::after{border-color:{color:container}}.user_5{background-color:{color:background};color:{color:text}}.user_5::after{border-color:{color:link}}.user_3{background-color:{color:container};color{color:text}}.user_3::after{border-color:{color:container}}.user_7{background-color:{color:container};color{color:text}}.user_7::after{border-color:{color:container}}.user_8{background-color:{color:container};color{color:text}}.user_8::after{border-color:{color:container}}.user_9{background-color:{color:container};color{color:text}}.user_9::after{border-color:{color:container}}
.convo {
overflow: hidden;
list-style-type: none;
padding: 0;
margin: 0;
}

/*----------------- PERMALINK PAGE -----------------*/
ol.notes {
width:300px;
padding: 0px;
margin: 0px 0px;
list-style-type: none;
margin-left:5px;
margin-top:-10px;
font-size:9px;}

ol.notes li.note {
padding: 10px;
}

ol.notes li.note img.avatar {
vertical-align: -4px;
margin-right: 10px;
width: 16px;
height: 16px;
}

ol.notes li.note .answer_content {
font-weight: normal;
}

ol.notes li.note blockquote {
border-color: {color:posts};
padding: 4px 10px;
margin: 10px 0px 0px 25px;
}

ol.notes li.note blockquote a {
text-decoration: none;}


/*----------------- TABS STYLING -----------------*/

.tabcontent {
margin: auto;
left:00px;
top:0px;
bottom:0px;
right:0px;
background:transparent;
position:absolute;
width:300px;
height:570px;
padding:30px;
color:{color:text};
z-index:999;
-webkit-animation: fadeEffect 0.8s;
animation: fadeEffect 0.8s;
border-radius:10px;
}

.tabcontainer{
background:{color:container};
position:fixed;
margin-left:-30px;
border-radius:0px 0px 10px 10px;
width:300px;
height:570px;
z-index:-9;
}

@-webkit-keyframes fadeEffect {
from {opacity: 0.1;}
to {opacity: .9;}
}

@keyframes fadeEffect {
from {opacity: 0.1;}
to {opacity: .9;}
}


.tabsclose {
font-size:7px;
padding:3px;
color:{color:italic};
margin-top:10px;
margin-left:-18px;
position:fixed;
z-index:9999999999999999999999999;
}

.tabsclose:hover {
cursor:pointer;
}

#tabsub{
margin-top:320px;
color:#b5725b;
font-family:"praying angel";
-webkit-text-fill-color: transparent; -webkit-text-stroke: 1px #ccc; text-shadow: 3px 3px #474747;
text-align:left;
text-align-last:right;
padding:0px;
font-size:96px;
width:450px;
height:110px;
margin-left:-195px;
line-height:95%;
position:fixed;
text-transform:lowercase;
transform:rotate(-5deg);
overflow:visible;
}

#tabdesc{
margin-top:40px;
margin-left:-10px;
width:230px;
height:230px;
background-color:{color:posts};
color:{color:text};
padding:15px;
position:fixed;
font-size:9px;
overflow-y:auto;
text-align:justify;
line-height:150%;
border-radius:5px;
}

#tabdesc b{
background-color:{color:permalink bg};
color:{color:permalink};
padding:3px;
margin-right:5px;
line-height:220%;
font-size:8px;
}

#tabdesc a{
background-color:{color:permalink bg};
color:{color:permalink};
padding:3px;
margin-right:5px;
line-height:220%;
font-size:8px;
}

#tabdesc span{
font-size:15px;
font-family:"creo";
color:{color:bold};
float:left;
padding:10px 5px 0px 0px;
}

#tabdesc p{
margin-top:5px;
margin-bottom:-5px;
}


#tablink{
position:fixed;
width:280px;
height:100px;
margin-left:-15px;
margin-top:410px;
z-index:9999;
text-align:left;
}

#tablink a{
background-color:{color:link};
color:{color:posts};
width:55px;
height:55px;
padding:0px;
display:inline-block;
border-radius:5px;
font-size:25px;
margin:0px 5px 10px 5px;
text-align:center;
}

#tablink span{
padding:5px;
padding-top:15px;
padding-right:5px;
}

#tablink a:hover{
border-radius:2px;
background-color:{color:bold};
color:{color:text};
}


/*-----------------  CREDITS / DO NOT TOUCH! that means you can't change the sizing, color, placement, and general appearance of the credit. -----------------*/
#credits{
position:fixed;
bottom:10px;
right:15px;
width:36px;
height:36px;
text-align:center;
}

#credits a{
font-weight:bold;
font-family:"creo";
width:36px;
height:36px;
padding:0px;
display:inline-block;
-webkit-text-fill-color: {color:posts};
background-color:{color:bold};
font-size:18px;
border-radius:50%;

}

#credits span{
padding:5px;
padding-top:10px;
padding-right:5px;
}

#credits a:hover{
font-family:"creo";
}

.pulse a:hover{
  animation: pulse 1s infinite;
  animation-timing-function: linear;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.3);
  100% { transform: scale(1); }
  }
}

/*-------MUSIC PLAYER BY GLENTHEMES-------*/
:root {
   --Circle-Size:50px;
   --Progress-Border-Size:2px;
   --Progress-Empty:#eee;
   --Progress-Fill:{color:bold};
   --Player-Background:{color:accent 2};
   --Play-Pause-Buttons-Size:20px;
   --Play-Pause-Buttons-Color:#111;
   --Player-Text-Margin:9.5px;

   --Song-Name-Font-Size:9.5px;
   --Song-Name-Color:{color:bold};

   --Artist-Name-Font-Size:9.5px;
   --Artist-Name-Color:#888;
}

#glenplayer07 {
position:absolute;
margin-top:10px;
margin-left:10px;
   z-index:99;
}

.flamingo {
   display:flex;
   align-items:center;
}

.circleofdeath {
   width:var(--Circle-Size);
   height:var(--Circle-Size);
   border-radius:100%;
   overflow:hidden;
}

.tinfoil {
   width:var(--Circle-Size);
   height:var(--Circle-Size);
   background:var(--Progress-Empty);
   border-radius:100%;
}

.oven {
   background:var(--Progress-Fill);
}

.oliveoil {
   width:100%;
   height:100%;
}

.crust {
   position:absolute;
   top:0;
   display:flex;
   align-items:center;
   justify-content:center;
   width:var(--Circle-Size);
   height:var(--Circle-Size);
}

.cherry {
   display:flex;
   align-items:center;
   justify-content:center;
   width:calc(var(--Circle-Size) - (var(--Progress-Border-Size) * 2));
   height:calc(var(--Circle-Size) - (var(--Progress-Border-Size) * 2));
   background:var(--Player-Background);
   border-radius:100%;
   cursor:pointer;
   z-index:1;
}

.music-controls .material-icons {
   font-size:var(--Play-Pause-Buttons-Size);
   color:var(--Play-Pause-Buttons-Color);
}

.pausee {display:none;}

.beff {display:none;}
.aff {display:block;}

.music-info {
   margin-left:var(--Player-Text-Margin);
   line-height:1em;
}

.song-name {
   font-family: 'Montserrat', sans-serif;
   font-size:var(--Song-Name-Font-Size);
   text-transform:uppercase;
   font-weight:bold;
   color:{color:bold};
   color:var(--Song-Name-Color);
}

.artist-name {
   margin-top:3px;
   font-family: 'Montserrat', sans-serif;
   font-size:var(--Artist-Name-Font-Size);
   letter-spacing:0.3px;
   color:var(--Artist-Name-Color);
}

{CustomCSS}
</style>

<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" /><meta name="viewport" content="width=820" />


</head>

<body>

<div id="wave1">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1046 675.3" xml:space="preserve" class="wave1fill">
<path d="M1050,684.3c-5.51-50.91-13.36-83.29-34.23-129.38S960.55,468,915.87,450c-22.8-9.18-47.68-12.3-69.34-24.25-34.58-19.08-55.93-58-68.47-97.53S759.9,246.9,746.6,207.67C710.34,100.73,613.53,20.57,508,10.12c-47.17-4.67-97.63,4.8-134,37.44-28.26,25.39-45.29,61.92-66.68,94.14a355.13,355.13,0,0,1-90.9,93.91c-42.58,30-91.92,50.22-127.61,89.22-39.35,43-57.07,103.47-68.12,162.58A1014.19,1014.19,0,0,0,4.07,684Z" transform="translate(-4 -9)"/></svg>
</div>

<div id="phone"> 4:20PM
<div class="phone">
<i class="material-icons">wifi</i>
<i class="material-icons">signal_cellular_alt</i>
<i class="material-icons">battery_full</i>
</div>
</div>

<div id="bar"></div>


<div id="notif">
<img src="{image:icon}">
<b>DRUNKBLUSHED</b><br/>
this is a sample notif. if you like this theme, please consider donating to my ko-fi! thank u ♥
</div>


<div id="spotify">
<!-------MUSIC PLAYER BY GLENTHEMES------->
<div id="glenplayer07">
<div class="flamingo">
<div class="circleofdeath">
<div class="tinfoil">
<div class="oliveoil"></div>
</div>
<div class="crust">
<div class="cherry">
<div class="music-controls">
<i class="material-icons playy">play_arrow</i>
<i class="material-icons pausee">pause</i>
</div>
</div><!--cherry-->
</div><!--crust-->
</div><!--circleofdeath-->

<div class="music-info">
<div class="song-name">REALITY</div>
<div class="artist-name">mamamoo</div>
</div><!--music-info-->
</div><!--flamingo-->
</div><!--glenplayer07-->

<audio id="audio" src="https://dl.dropbox.com/s/g2g4f2qtcntdwv5/MAMAMOO%20%28%EB%A7%88%EB%A7%88%EB%AC%B4%29%20-%20rEALITY%20-%20Color%20Coded%20%28Han%20Rom%20Eng%29.mp3" type="audio"></audio>
<!----end music player---->
</div>

<div id="leftwindow">
<div id="browserbig">
<div class="dots">
<span class="th th-circle"></span>
<span class="th th-circle"></span>
<span class="th th-circle"></span>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp;
<span class="th th-minus"></span>&nbsp;
<span class="th th-cross"></span>
</div></div>

<div class="sideimage"><img src="{image:left image}" draggable="false"></div>

<div class="description">{text:side description}</div>

</div>

<div id="rightwindow">
<div id="browserbig">
<div class="comp">
<span class="th th-minus"></span>&nbsp;
<span class="th th-cross"></span></div></div>

<div id="stats">
<span class="blinking">{text:stats}</span>
</div>

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

<div id="sidelink">
<a href="#" class="tablink tabsact" onclick="openCity(event, 'tabsDefault');"><span class="th th-home-o"></span></a>

<a href="/ask"><span class="th th-envelope-o"></span></a>

<a href="#" class="tablink tabsact" onclick="openCity(event, 'tabsNavigate');"><span class="th th-star-o"></span></a>

<a href="{text:sidelink url4}" title="{text:sidelink title4}"><span class="th th-worldwide-o"></span></a>
</div>

{block:Pagination}
<div id="pagination">
<div style="margin-top:65px;margin-bottom:10px;">
{block:PreviousPage}<a href="{PreviousPage}" class="jump_page"><span class="th th-chevron-left"></span></a>{/block:PreviousPage}
{block:JumpPagination length="3"}
{block:CurrentPage}<a><span class="current_page">{PageNumber}</span></a>{/block:CurrentPage}
{block:JumpPage}<a class="jump_page" href="{URL}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}
{block:NextPage}<a href="{NextPage}" class="jump_page"><span class="th th-chevron-right"></span></a>{/block:NextPage}
</div></div>
{/block:Pagination}

</div>

<!-------------------------------POSTS------------------------------->
<div id="container">

<!----------------------NAVIGATION TAB---------------------->
<div id="tabsNavigate" class="tabcontent" style="display:none; overflow:hidden;"><span onclick="this.parentElement.style.display='none'" class="tabsclose">CLOSE TAB</span>

<div class="tabcontainer"></div>

<div id="tabsub">bulletin</div>
<img src="https://lh3.googleusercontent.com/proxy/p4ZOJzeEx3jEONoLHPq3dH17pYXb0H08mr8TT5WozDMwY5GPLbBXVIYC-Jpwm81wB7Mlsmnifb7eJQodE3B_ndwcbh80w7mDZ8dQIlJAvVo"style="margin-top:-30px;margin-left:45px;opacity:.8;position:fixed;width:150px;z-index:999999;transform: rotate(-45deg);">
<div id="tabdesc">
<span>WHAT I DO</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer metus ipsum, malesuada nec mollis et, malesuada non lacus. Donec quis libero vitae dui tincidunt venenatis efficitur vel eros. Pellentesque fermentum iaculis massa, vel convallis tellus sodales nec. Vivamus eget lacus justo.  </p>

<br/><span>PLOT</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer metus ipsum, malesuada nec mollis et, malesuada non lacus. Donec quis libero vitae dui tincidunt venenatis efficitur vel eros. Pellentesque fermentum iaculis massa, vel convallis tellus sodales nec. Vivamus eget lacus justo. </p>

<br/><span>MORE</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer metus ipsum, malesuada nec mollis et, malesuada non lacus. Donec quis libero vitae dui tincidunt venenatis efficitur vel eros. Pellentesque fermentum iaculis massa, vel convallis tellus sodales nec. Vivamus eget lacus justo. </p>
</div>


<img src="https://pluspng.com/img-png/push-pin-png--728.png"style="width:30px;margin-top:395px;margin-left:0px;opacity:.9;position:fixed;z-index:9999999999999;transform: rotate(-45deg);">
<img src="https://pluspng.com/img-png/push-pin-png--728.png"style="width:30px;margin-top:395px;margin-left:75px;opacity:.9;position:fixed;z-index:9999999999999;transform: rotate(0deg);-webkit-filter: grayscale(100%);">
<img src="https://pluspng.com/img-png/push-pin-png--728.png"style="width:30px;margin-top:395px;margin-left:130px;opacity:.9;position:fixed;z-index:9999999999999;transform: rotate(-90deg);">
<img src="https://pluspng.com/img-png/push-pin-png--728.png"style="width:30px;margin-top:395px;margin-left:210px;opacity:.9;position:fixed;z-index:9999999999999;transform: rotate(-25deg);-webkit-filter: grayscale(100%);">

<img src="https://pluspng.com/img-png/push-pin-png--728.png"style="width:30px;margin-top:460px;margin-left:-3px;opacity:.9;position:fixed;z-index:9999999999999;transform: rotate(-90deg);-webkit-filter: grayscale(100%);">
<img src="https://pluspng.com/img-png/push-pin-png--728.png"style="width:30px;margin-top:460px;margin-left:73px;opacity:.9;position:fixed;z-index:9999999999999;transform: rotate(-25deg);">
<img src="https://pluspng.com/img-png/push-pin-png--728.png"style="width:30px;margin-top:460px;margin-left:137px;opacity:.9;position:fixed;z-index:9999999999999;transform: rotate(-45deg);-webkit-filter: grayscale(100%);">
<img src="https://pluspng.com/img-png/push-pin-png--728.png"style="width:30px;margin-top:460px;margin-left:213px;opacity:.9;position:fixed;z-index:9999999999999;transform: rotate(0deg);">


<!--TAB LINKS-->
<div id="tablink">
<a href="{text:tablink url1}" title="{text:tablink title1}"><span class="th th-star-o"></span></a>
<a href="{text:tablink url2}" title="{text:tablink title2}"><span class="th th-confetti-o"></span></a>
<a href="{text:tablink url3}" title="{text:tablink title3}"><span class="th th-cloud-3-o"></span></a>
<a href="{text:tablink url4}" title="{text:tablink title4}"><span class="th th-folder-3-o"></span></a>
<a href="{text:tablink url5}" title="{text:tablink title5}"><span class="th th-paperclip"></span></a>
<a href="{text:tablink url6}" title="{text:tablink title6}"><span class="th th-diamond-o"></span></a>
<a href="{text:tablink url7}" title="{text:tablink title7}"><span class="th th-users-o"></span></a>
<a href="{text:tablink url8}" title="{text:tablink title8}"><span class="th th-list-o"></span></a>
</div>


</div><!--END NAVIGATION-->

{block:Posts}

<div id="post">

{block:text}
{block:Title}
<div class="posttitle">{Title}</div>
{/block:Title}
{Body}
{/block:text}

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

{block:Photo}
<center>
{LinkOpenTag}
<a href="{permalink}">
<img src="{PhotoURL-400}" alt="{PhotoAlt}" width="250"></a>
{LinkCloseTag}
</center>
{block:Caption}{Caption}{/block:Caption}
{block:ContentSource}
<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
{/block:SourceLogo}
{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
{/block:ContentSource}
{block:ReblogParentURL}
<!-- {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
{/block:ReblogParentURL}
{/block:Photo}

{block:Photoset}
<div style="z-index:99999999999999999999;">{Photoset}</div>
{block:Caption}{Caption}{/block:Caption}
{/block:Photoset}

{block:Quote}
<h1>{Quote}</h1>
{block:Source}
<center>- {Source}</center>
{/block:Source}
{/block:Quote}

{block:Chat}
{block:Title}
<h1>{Title}</h1>{/block:Title}<br>
<ul class="convo">{block:Lines}<li class="line_{Alt} user_{UserNumber}">{block:Label}<span class="label"><strong>{Label}</strong></span>{/block:Label}
{Line}</li>{/block:Lines}</ul>
{/block:Chat}

{block:Audio}
{block:AlbumArt}
<img src="{AlbumArtURL}" width="60" align="left" style="margin-right:10px; border-radius:50%;" />{/block:AlbumArt}
<br/>
{block:TrackName}<b>Title:</b> {TrackName}<br />{/block:TrackName}
{block:Artist}<b>Artist:</b> {Artist}<br />{/block:Artist}
{/block:ExternalAudio}<b>Played:</b> {PlayCount} times
<span class="audio">{AudioPlayerGrey}<br></span>
{block:Caption}{Caption}{/block:Caption}
{/block:Audio}

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

{block:Answer}
<div class="asker"><img src="{AskerPortraitURL-24}">{Asker}</div>
<div class="question">{Question}</div>
{Answer}{/block:Answer}

{block:IndexPage}
<div class="info">
{block:Date}
<span><a href="{Permalink}" title="{TimeAgo}">
<b>{ShortMonth} {DayOfMonthWithZero}</b></a>
{block:NoteCount}with
<b><a href="{Permalink}">{NoteCountWithLabel}</b></a>{/block:NoteCount}</span>
{/block:Date}
<rb>
<span>

{block:RebloggedFrom}
<a href="{reblogparenturl}" title="via"><span class="th th-share-o"></span></a>{/block:RebloggedFrom}

{block:ContentSource}
<a href="{SourceURL}" title="source"><span class="th th-push-pin-o"></span></a>{/block:ContentSource}

<a href="{ReblogURL}" title="reblog" target="_blank" class="reblog"><span class="th th-reload"></span></a></span></rb>
</div>

<div class="tags">{block:HasTags}
{block:Tags}<a href="{TagURL}">#<font style="text-transform:uppercase;">{Tag}</font>&nbsp;</a>
{/block:Tags}
{/block:HasTags}</div>
{/block:IndexPage}


{block:PermalinkPage}
 <div class="info">
{block:Date}<span>
<a href="{Permalink}">
<b>{ShortMonth} {DayOfMonthWithZero}</b></a> with <b><a href="{Permalink}">{NoteCountWithLabel}</b></a></span>
{/block:Date}
<span>
</span>
</div>

<div class="tags">{block:HasTags}
{block:Tags}<a href="{TagURL}">#<font style="text-transform:uppercase;">{Tag}</font>&nbsp;</a>
{/block:Tags}
{/block:HasTags}</div>
{/block:PermalinkPage}


</div><!----POST END---->

{block:PostNotes}
{PostNotes}
{/block:PostNotes}
{/block:Posts}

</div><!--END DEFAULT-->


<div id="entries">

<div id="maintitle">{text:main title}</div>


</div><!----ENTRIES END---->
</div>

<div id="credits">
<div class="pulse">
<a href="https://drunkblushed.tumblr.com/" title="made by dana">
<span class="th th-heart-1-o"></a></div></div>


</body>
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
</html>