<!--HTML--><style>
@import url('https://moonien.github.io/yuenthread10.css');
</style>
<div style="--moon:135,171,96" class="yuenthread10">
<div class="yuenthread10-head">
HELLO FUTURE // WALK YOU HOME.
</div>

<div class="yuenthread10-box bg-default">


<div class="yuenthread10-tags">
<span>month ##, year</span>
<a>character name</a>
</div>

<div class="yuenthread10-text">
lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et magna aliquyam erat, sed diam voluptua. at vero eos et accusam et duo dolores et ea rebum. <b>"stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet."</b> lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et magna aliquyam erat, sed diam voluptua.
</div>


</div>
<a href="https://cttw.jcink.net/index.php?showuser=18258" title="delivered by yuen."></a>
</div>

<!--HTML--><style>
@import url('https://moonien.github.io/yuencomm02.css');

#riah { --yeet:#B0688F; }
#fye { --yeet:#47724D; }
</style>
<div id="fye" class="yuencomm02-sending">
<div class="yuencomm02-box">

<div class="yuencomm02-phone">
<div class="yuencomm02-scroll">
<div class="yuencomm02-cont">


<p>sorry about the other day !!
</p><p>can i make it up by inviting you to cake?  <!--emo&:mad:--><img src="http://i.imgur.com/jLoCTXT.gif" border="0" style="vertical-align:middle" alt="http://i.imgur.com/jLoCTXT.gif"><!--endemo--> 
</p><p><img class="y-img" src="https://data.whicdn.com/images/154985265/original.jpg">


</p></div>
</div>
</div>

<div class="yuencomm02-head">
<div class="yuencomm02-head-img" style="background-image:url(https://66.media.tumblr.com/8cc2faa5cab92bbd1af8edd7c37a5055/73932f6a531f0d38-28/s540x810/c9841655281f5a91a8e9a05c5611d22ed9ad8d77.gif)"><star></star></div>

<span><b>minion</b>
<a>noh riah</a></span>

<circle title="new messages!"><b></b></circle>
</div>

<div class="yuencomm02-foot"></div>

</div>
<a href="https://cttw.jcink.net/index.php?showuser=18258" title="delivered by yuen."></a>
</div>

<!--HTML-->
<link
 href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap"
 rel="stylesheet"
/>

<link
 rel="stylesheet"
 type="text/css"
 href="https://files.jcink.net/uploads2/planetarium/CSS_Folder/Social_Media_Template/postInsta.css"
/>

<style>
 #postInsta {
   --username: "cheddar";
   --location: "Brooklyn, New York";

   --profile_img: url(https://pbs.twimg.com/media/EQsIqOVU4AAeeGX.jpg);
   --post_img: url(https://img.estadao.com.br/fotos/crop/1200x900/resources/jpg/0/5/1562862973450.jpg);
   --profile_liked: url(https://66.media.tumblr.com/3602440986d70ab10b8c8a83931467cb/tumblr_owdllx0dSl1wb7khmo4_250.png);
 }
</style>

<div id="postInsta" class="backf_insta">
 <div class="next_insta"></div>
 <div class="previous_insta"></div>
 <div class="mainImage_insta"></div>
 <div class="box_insta">
   <div class="imgInfo">
     <div class="profile_Iimage"></div>
     <div class="use_loc_insta">
       <span class="username_insta"></span><span class="location_insta"></span>
     </div>
     <span class="dots_insta"> </span>
   </div>

   <div class="cBox_insta">
     <div class="commentBox_insta">
       <div class="profile_Iimage"></div>
       <div class="comments_insta">
         <span class="username_insta"></span
         ><span> Daddy took me to work today! <span class="tag_insta">#realboss </span> </span>
         <div class="subs_insta"><span> 1m </span></div>
       </div>
     </div>

     <div class="commentBox_insta">
       <div
         class="profile_Iimage"
         style="background-image: url(https://images2.imgbox.com/f8/95/46kyz0iw_o.jpeg);"></div>
       <div class="comments_insta">
         <span class="heart_insta"> </span>
         <span class="usernameG_insta">jperalta </span
         ><span> First time I can say Captain's mood </span>
         <div class="subs_insta">
           <span> 1m </span> <b> 2 likes </b>
           <b>Reply</b>
         </div>
       </div>
     </div>

     <div class="commentBox_insta">
       <div
         class="profile_Iimage"
         style="background-image: url(https://images2.imgbox.com/a6/22/rdWze77H_o.jpeg);"></div>
       <div class="comments_insta">
         <span class="heart_insta"> </span>
         <span class="usernameG_insta">asantiago </span
         ><span> Can't believe I'm not the first to comment! </span>
         <div class="subs_insta">
           <span> 1m </span> <b> 2 likes </b>
           <b>Reply</b>
         </div>
       </div>
     </div>

   </div>

   <div class="options_insta">
     <div class="opBut_insta">
       <span class="hearth_insta"> </span
       ><span class="comentaIcon_insta"> </span><span class="DM_insta"> </span
       ><span class="save_insta"> </span>
     </div>
     <div class="likedBy_Insta">
       <div class="smallImg_Insta">
       </div>
       <span> Liked by <b> jperalta </b> and <b> 30k others </b></span>
     </div>
     <span class="date_insta">JANUARY 8, 2020 </span>
   </div>
   <div class="addCom_insta">
     <input type="text" placeholder="Add a comment... " class="input_insta" />
     <span class="postB_insta"> </span>
   </div>
 </div>
 <a
   href="http://cttw.jcink.net/index.php?showuser=27194"
   title="template by: Bib's"
   class="cred_insta"
 ></a>
</div>

<!--HTML--><link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Josefin+Sans:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://dl.dropbox.com/s/b5p25hafz9e2b69/cttw-comm4.css">


<comm1-wrap><comm-flex>
<box-1><box-blob></box-blob>

<img class="bimg" src="https://i.imgur.com/ego5KsW.png">

<box-line></box-line></box-1>

<box-2><a href="http://cttw.jcink.net/index.php?showuser=467" title="coded by juliet @ caution"><b-name>

<span1>àstrid</span1>
<span2>to holden mcalister</span2>

</b-name></a><b-line></b-line>
<b-msgs>
  
<p>This is a message.</p>
<p>This is a text message. This one is longer to see how it looks on multiple lines!</p>

</b-msgs> </box-2>
</comm-flex></comm1-wrap>

<!--HTML-->
<div class="grampost">
 <img src="https://66.media.tumblr.com/491ac0749fe7b6456cb6cd6daa2834f3/tumblr_pous55D4PM1y7j586o1_500.png">
 <div class="username">username</div>
 <div class="thedots">...</div>
</div>
<center><div class="theactualimage"><img src="IMAGEHERE">
</div>
<div class="theinstacontrol"></div></center>
<div class="theacaption">
<div class="theviewss">### views</div><br>
 <b>username</b> caption caption caption
</div>
<div class="instacredit2"><a href="http://cttw.jcink.net/index.php?showuser=140">thanks, shadia!</a></div>

<link rel="stylesheet" type="text/css" href="https://files.jcink.net/uploads/shadia/humble2v2.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

<!--HTML-->

<div class="grampostsl">
 <img src="https://66.media.tumblr.com/491ac0749fe7b6456cb6cd6daa2834f3/tumblr_pous55D4PM1y7j586o1_500.png">
 <div class="usernamesl">username</div>
 <div class="thedotssl">...</div>
</div>
<div class="slidescontainer">

<div class="slidestabs">


<div class="slidestab">
<input type="radio" id="slidestab-1" name="slidestab-group-1" checked>
<label for="slidestab-1"> < </label>
<div class="slidescontent">
<div class="theactualimagesl"><img src="https://data.whicdn.com/images/272564974/large.jpg">
</div></div>
</div>


<div class="slidestab">
<input type="radio" id="slidestab-2" name="slidestab-group-1">
<label for="slidestab-2"> ></label>
<div class="slidescontent">
<div class="theactualimagesl"><img src="https://data.whicdn.com/images/297766716/large.jpg">
</div>
 
</div></div></div></div>
<center><div class="theinstacontrolsl"></div></center>
<div class="theacaptionsl">
<div class="theviewsssl">### views</div><br>
 <b>username</b> caption caption caption
</div>
<div class="instacredit2"><a href="http://cttw.jcink.net/index.php?showuser=140">thanks, shadia!</a></div>


<link rel="stylesheet" type="text/css" href="https://files.jcink.net/uploads/shadia/humble3.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

<!--HTML-->
<div class="instagramcomment">
 <div class="instagramicon22"><a href="http://cttw.jcink.net/index.php?showuser=140"><img src="https://66.media.tumblr.com/1a7ca7d5e61667b55a806e8c8ae381da/tumblr_onqj73HYnF1ur9gmko5_400.png"></a></div>
 <div class="instagramcomment55"><b>username</b> mentioned you in a comment:  wow this is the text. this is a comment. lets see what happens
   when the comment keeps going. wow this is a long comment. a long comment indeed. wow. a comment.
   a very long comment. i love long comments. they're the best. wow. what if i just kept going forever and ever and ever and ever? i could. i could just keep going.
 
</div>

</div>


<link rel="stylesheet" type="text/css" href="https://files.jcink.net/uploads/shadia/instagramcomment.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">

<!--HTML--><link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,600,700,800,900|Roboto|Raleway|Sawarabi+Gothic" rel="stylesheet">
<style>

#faceclaims {
 width: 500px;
 background: #fff;
 height: auto;
 position: relative;
 margin: 30px auto;
 border: 1px solid #ccc;
 outline: 1px solid #bb9656;
 outline-offset: 10px;
 font-family: roboto;
 color: #191919;
 line-height: 170%;
 font-size: 11px;
 margin-bottom: 10px;
}

#faceclaims maintitle {
 position: relative;
 display: block;
 height: 60px;
 border-bottom: 1px solid #bb9656;
 overflow: hidden;
 font-family: playfair display;
 font-weight: 800;
 text-align: center;
 color: #bababa;
 text-transform: uppercase;
 line-height: 230%;
 font-size: 40px;
}

#faceclaims text {
 font-family: roboto;
 padding: 30px;
 display: block;
 color: #191919;
 text-align: justify;
 font-size: 11px;
 line-height: 150%;
}

#faceclaims subtitle {
 position: relative;
 display: block;
 height: 20px;
 border-bottom: 1px solid #ccc;
 overflow: hidden;
 font-family: playfair display;
 font-weight: 800;
 text-align: left;
 color: #bababa;
 text-transform: uppercase;
 line-height: 130%;
 font-size: 20px;
}

#faceclaims descript {
 display: block;
 color: #ddd!important;
 font-size: 9px!important;
}

#faceclaims nameblock {
 width: 300px;
 height: 20px;
 position: relative;
 display: flex;
 margin: 2px auto;
 justify-content: space-between;
 color: #191919;
 line-height: 200%;
 font-size: 11px;
 text-transform: uppercase;
   border-bottom: 1px solid #eee;
}


#faceclaims faceclaim {
 display: block;
}

#faceclaims a {
 color: #bb9656;
 display: block;
 text-decoration: none;
}

</style>
<div id="faceclaims">
 <maintitle>Face Claims</maintitle>
 <text>Face claims are limited to signed actors, musicians, and models on TV. No internet personalities or youtube stars will be permitted.</text>
<subtitle>A-F</subtitle>
 <text>
   <nameblock><descript>Face Claim</descript> <descript>Character</descript></nameblock>
   <nameblock><faceclaim>Last, First</faceclaim><a href="">Character Name</a></nameblock>
 </text>
<subtitle>G-M</subtitle>
 <text>
   <nameblock><descript>Face Claim</descript> <descript>Character</descript></nameblock>
   <nameblock><faceclaim>Last, First</faceclaim><a href="">Character Name</a></nameblock>
   <nameblock><faceclaim>Last, First</faceclaim><a href="">Character Name</a></nameblock>
   <nameblock><faceclaim>Last, First</faceclaim><a href="">Character Name</a></nameblock>
   <nameblock><faceclaim>Last, First</faceclaim><a href="">Character Name</a></nameblock>
 </text>
<subtitle>N-Z</subtitle>
 <text>
   <nameblock><descript>Face Claim</descript> <descript>Character</descript></nameblock>
   <nameblock><faceclaim>Last, First</faceclaim><a href="">Character Name</a></nameblock>
   <nameblock><faceclaim>Last, First</faceclaim><a href="">Character Name</a></nameblock>
   <nameblock><faceclaim>Last, First</faceclaim><a href="">Character Name</a></nameblock>
 </text>
</div>

<center><a href="http://cttw.jcink.net/index.php?showuser=18033" style="color:#ccc;font-size:7px;letter-spacing:5px;">MONTY</a></center>

<div class="container p-5">
	<div class="progress" data-percentage="44">
    <span class="progress-left">
    	<span class="progress-bar"></span>
    </span>
    <span class="progress-right">
    	<span class="progress-bar"></span>
    </span>
    <div class="progress-value">
    	<div>
        44%<br>
        <span>completed</span>
    	</div>
    </div>
	</div>
</div>

$borderWidth: 5px;
$animationTime: .5s;
$border-color-default: #efefef;
$border-color-fill: #ffb43e;
$size: 160px;
$howManySteps: 100; //this needs to be even. 

.progress {
  width: $size;
  height: $size;
  line-height: $size;
  background: none;
  margin: 0 auto;
  box-shadow: none;
  position: relative;
  &:after {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: $borderWidth solid $border-color-default;
    position: absolute;
    top: 0;
    left: 0;
  }
  > span {
    width: 50%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    z-index: 1;
  }
  .progress-left {
    left: 0;
  }
  .progress-bar {
    width: 100%;
    height: 100%;
    background: none;
    border-width: $borderWidth;
    border-style: solid;
    position: absolute;
    top: 0;
    border-color: $border-color-fill;
  }
  .progress-left .progress-bar {
    left: 100%;
    border-top-right-radius: ($size/2);;
    border-bottom-right-radius: ($size/2);;
    border-left: 0;
    -webkit-transform-origin: center left;
    transform-origin: center left;
    //animation: loading-2 1.5s linear forwards 1.8s;
  }
  .progress-right {
    right: 0;
    .progress-bar {
      left: -100%;
      border-top-left-radius: ($size/2);;
      border-bottom-left-radius: ($size/2);;
      border-right: 0;
      -webkit-transform-origin: center right;
      transform-origin: center right;
      //animation: loading-1 1.8s linear forwards;
    }
  }
  .progress-value {
    display: flex;
    border-radius: 50%;
    font-size: 1rem;
    text-align: center;
    line-height: 20px;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    font-weight: 300;
    div {
      //margin-top: 10px;
    }
    span {
      font-size: 12px;
      text-transform: uppercase;
    }
  }
}

/* This for loop creates the necessary css animation names 
Due to the split circle of progress-left and progress right, we must use the animations on each side. 
*/
@for $i from 1 through $howManySteps {
	$stepName: ($i*(100 / $howManySteps));

	//animation only the left side if below 50%
	@if $i <= ($howManySteps/2) { 
    .progress[data-percentage="#{$stepName}"] {
    	.progress-right .progress-bar {
         animation: loading-#{$i} $animationTime linear forwards;
    	}
    	.progress-left .progress-bar {animation: 0;}
    }
	}
	//animation only the right side if above 50%
	@if $i > ($howManySteps/2)  {  
    .progress[data-percentage="#{$stepName}"] {
    	.progress-right .progress-bar {
        animation: loading-#{($howManySteps/2)} $animationTime linear forwards; //set the animation to longest animation
    	}
    	.progress-left .progress-bar {
      animation: loading-#{$i - ($howManySteps/2)} $animationTime linear forwards $animationTime;
    }
    }
	}
}

//animation
@for $i from 1 through ($howManySteps/2) { 
	$degrees: (180/($howManySteps/2));
	$degrees: ($degrees*$i);
	@keyframes loading-#{$i}{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate($degrees);
    	transform: rotate(#{$degrees}deg);
    }
	}
}

<!--HTML-->
<style>
 
 img.sky-circ {
   width: 50px;
   height: 50px;
   object-fit: cover;
   border-radius: 100%;
   overflow: hidden; background: #eee;
   padding: 10px;
   border: 1px solid var(--accent);
   position: absolute;
   top: -35px;
   left: 25px;
 }
 .sky-con {
   --accent: #A03560;
   background: #eee;
   width: 400px;
   padding: 50px;
   text-align: justify;
   font-size: 12px;
   line-height: 15px;
   color: #555;
   margin: 10px auto;
   font-family: 'Poppins', sans-serif;
 }
 .sky-textcon {
   padding: 30px;
   border: 1px solid var(--accent);
   position: relative;
 }
 .sky-text flt {
   display: block;
   float: left;
   width: 80px;
   height: 10px;
 }
 .sky-text b {
   color: var(--accent);
   font-family: 'Inria Serif', serif;
 }
 .sky-qt {
   background: #eee;
   position: absolute;
   bottom: -15px;
   right: 15px;
   height: 30px;
   padding: 0px 25px;
   display: flex;
   align-items: center;
   font-family: 'Inria Serif', serif;
   color: var(--accent);
   text-transform: uppercase;
   font-size: 10px;
 }
 a.yuno-credit {
   display: block;
   width: 500px;
   margin: 3px auto;
   text-align: right;
   text-transform: uppercase;
   font-size: 10px;
   opacity: .5;
 }
 
 
</style>
<link href="https://fonts.googleapis.com/css?family=Inria+Serif|Poppins&display=swap" rel="stylesheet">
<div class="sky-con">
 <div class="sky-textcon">

   <img src="100x100 img auto resizes" class="sky-circ">
   
   <div class="sky-text"><flt></flt>


post goes here


   </div>
   
   <div class="sky-qt">
     & I'm in over my head, over my head
   </div>
 </div>
</div>
<a href="http://cttw.jcink.net/index.php?showuser=3623" class="yuno-credit">&copy; yuno</a>

<!--HTML-->

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
<div id="odysseus">
   <div class="odysseus3">
       <div class="odysseus3-1">dance with me and i'll sing to you a symphony</div>
   </div>


   <div class="odysseus1">
       <div class="odyseus1-1">
         <div class="odysseus1-2" style="margin-top:17px"><span class="th th-hashtag" style="color:#1dbfaa; font-size:6px; margin-right: 2px;"></span>@TAGGED PERSON HERE</div>
           <div class="odysseus1-2">location <span>location here</span></div>
           <div class="odysseus1-2">art credit <span>here, make it short~</span></div>
           <div class="odysseus1-2" style="border-bottom:1px solid transparent">notes <span>here and make it short pls!</span></div>
       </div>
       <img src="https://i.pinimg.com/564x/b6/0b/6b/b60b6b3caa8c106ce2e345a067b11a30.jpg" class="odyseus-img" />
   </div>

   <div class="odysseus2">
       <div class="odysseus2-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pretium iaculis posuere. Morbi ut nunc venenatis, rutrum lectus eu, dictum quam. In luctus dui nunc, quis maximus nunc suscipit sed. Morbi a tincidunt odio, et lacinia arcu. Quisque fringilla vel enim sit amet sollicitudin. <b>Nullam tincidunt congue venenatis. Pellentesque vel euismod ipsum. Ut lorem eros, aliquet eu dapibus vel, tincidunt eu urna.</b> Duis ac erat sit amet massa pellentesque scelerisque nec eget augue. Proin faucibus scelerisque est ac accumsan. Donec in rhoncus sem, vitae viverra nunc. Pellentesque quis diam vulputate, laoreet arcu sit amet, maximus neque. Vivamus venenatis, eros eu finibus ultricies, nibh ante tristique erat, vel dignissim nibh nulla eget enim. Aenean sit amet laoreet nulla.

           <p><i>Sed sed odio quis lectus varius posuere. Mauris eget elementum nunc.</i> Sed dapibus condimentum magna. Ut leo nisi, vestibulum in vulputate at, sollicitudin vitae mauris. Phasellus venenatis ultrices enim, sed facilisis massa eleifend eu. Sed vel aliquam orci. Integer maximus in ex eu efficitur. Integer tristique nibh eu elit pretium fringilla. <p>Suspendisse vel blandit diam. Integer nec tortor vestibulum, accumsan quam in, malesuada tellus. Sed vitae erat consequat, condimentum sapien vel, varius turpis. Fusce auctor tincidunt sapien vel dictum. Suspendisse gravida vestibulum nisl, eu sollicitudin lacus. Quisque consectetur massa vel elementum placerat. Vestibulum vitae aliquam libero. Mauris sed nisl placerat, posuere sapien id, molestie lectus. Nunc mollis bibendum aliquam. Mauris aliquet molestie tincidunt. Vestibulum venenatis scelerisque interdum. Sed porttitor accumsan sapien ut egestas. Donec ornare euismod gravida. Pellentesque porta sem eget tortor dapibus malesuada.
       </div>
   </div>
</div>
     <div class="odysseus-link"><a href="http://cttw.jcink.net/index.php?showuser=24945">YOROZUYA</a></div>
<style>
#odysseus {
   width: 500px;
   padding: 35px;
   margin: 0 auto;
   position: relative;
   background-image: linear-gradient(to top, rgb(29, 191, 170, 0.2) -50%, #FBFCFC);
   background-attachment: fixed;
   overflow: hidden;
   border: 1px solid #EFEFEF;
   display: block;
   border-radius: 20px;
}

.odysseus1 {
   width: 500px;
   background: #fcfcfc;
   position: relative;
   overflow: hidden;
   border: 1px solid #EFEFEF;
   display: flex;
}

.odyseus-img {
   width: 230px;
   height: 250px;
   display: block;
   margin-left: 25px;
   margin-top: 19px;
   margin-bottom: 20px;
   object-fit: cover;
   border: 1px solid #dfdfdf;
}

.odyseus1-1 {
   position: absolute;
   right: 4.5%;
   top: 21%;
   width: 235px;
   text-align: justify;
   background: #FBFCFC;
   border: 1px solid #efefef;
}

.odysseus1-2 {
   position: relative;
   font: 7px 'roboto';
   text-transform: uppercase;
   color: #1dbfaa;
   margin-top: 15px;
   letter-spacing: 1px;
   padding-bottom: 15px;
   padding-left: 10px;
   border-bottom: 1px solid #efefef;
}

.odysseus1-2 span {
   color: #555;
   margin-left: 5px;
}

.odysseus1-2 a {
   text-decoration: none;
   color: #1dbfaa;
}

.odysseus2 {
   width: 500px;
   background: #fcfcfc;
   position: relative;
   overflow: hidden;
   border: 1px solid #EFEFEF;
   margin-top: 20px;
   border-radius: 0px 0px 15px 15px;
}

.odysseus2-1 {
   font: 11px 'raleway';
   line-height: 150%;
   letter-spacing: 0.70px;
   text-align: justify;
   width: 395px;
   color: #222;
   margin-top: 40px;
   margin-bottom: 35px;
   margin-left: auto;
   margin-right: auto;
   text-transform: lowercase;
}

.odysseus3 {
   width: 500px;
   background: #fcfcfc;
   position: relative;
   overflow: hidden;
   border: 1px solid #EFEFEF;
   margin-bottom: 20px;
   border-radius: 10px 10px 0px 0px;
}

.odysseus3-1 {
   margin-top: 15px;
   margin-bottom: 12px;
   margin-right: 10px;
   font: 8px 'roboto';
   letter-spacing: 2px;
   text-align: right;
   text-transform: uppercase;
   color: #777;
}

.odysseus3-1:after {
   content: ' |';
}

#odysseus b {
   background-image: linear-gradient(to top, #1dbfaa, 3%, #fcfcfc 50%);
   font-weight: 500;
   color: #444;
}

#odysseus i {
   color: #1dbfaa;
}
 
 .odysseus-link {
   font: 7px 'roboto';
   text-align: center;
   letter-spacing: 4px;
   margin-top: 3px;
 }
 
 .odysseus-link a {
   text-decoration: none;
 }
</style>

<!--HTML--><style>
@font-face { font-family: "tantinotes"; src: url('https://dl.dropboxusercontent.com/s/z15mn9qxlgjp3z7/Tantinotes.otf') ;}
@font-face { font-family: "pistilli"; src: url('https://dl.dropboxusercontent.com/s/pyua0lsg7wvqjoa/Pistilli-Roman.otf') ;}
.calendar1 {
    /* position: absolute; */
    width: 200px;
    height: 200px;
    /* top: -20px; */
    /* left: -80px; */
    z-index: 999;
    border-radius: 4px;
    -webkit-transform: rotate(-2deg);
    opacity: 1;
}

.month1 { position:absolute; text-align:center; width:200px; height:auto; top:10px; font-size:42px; color:#977666; font-family:'tantinotes'; }

/* --- dotw grid --- */
.day-of-week1 { width:180px; margin-top:35px; margin-left:15px; display: grid; grid-template-columns: repeat(7, 1fr); }
.day-of-week1 button { background:#a1a59e; color:#f5f5f5; width:18px; height:18px; border-radius:100%; border:none; font-size:9px; padding:3px; margin:5px 0px 5px 0px; font-weight:bold; text-transform:uppercase; }

/* --- days grid --- */
.date-grid1 { width:180px; margin-top:0px; padding-left:15px; display: grid; grid-template-columns: repeat(7, 1fr); }
.date-grid1 button { width:18px; height:18px; background:transparent; border:none; font-size:9px; border-radius:100%; padding:3px; margin:4px 0px 4px 0px; }
.date-grid1 button a { color:#f5f5f5; }

/* ---

use this to move first day of the month
based on which day it falls on. 1 is sunday,
2 is monday, 3 is tuesday, 4 is wednesday,
5 is thursday, 6 is friday & 7 is saturday.

--- */
.date-grid1 button:first-child { grid-column:3; }
</style>
<div class="calendar1"><div class="month1"> december </div><div class="day-of-week1"><button>s</button><button>m</button><button>t</button><button>w</button><button>t</button><button>f</button><button>s</button></div><div class="date-grid"><button>1</button><button>2</button><button>3</button><button>4</button><button>5</button><button>6</button><button>7</button><button>8</button><button>9</button><button>10</button><button>11</button><button>12</button><button>13</button><button>14</button><button>15</button><button>16</button><button>17</button><button>18</button><button>19</button><button>20</button><button>21</button><button>22</button><button>23</button><button>24</button><button style="background:#977666;"><a href="/" title="christmas day" class="">25</a></button><button>26</button><button>27</button><button>28</button><button>29</button><button>30</button><button>31</button></div></div>

<!--        MUSIC PLAYER #01 by glenthemes
        ♬ glenthpvs.tumblr.com/player01--->
<script src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
<script src="//glenthemes.github.io/-music-/glenplayer01.js"></script>
<link href="//glenthemes.github.io/-music-/glenplayer01.css" rel="stylesheet">

<style element="glenplayer01">
:root {
    --MusicPlayer-Distance-From-Bottom:30px;
    
    --MusicPlayer-Frame-Thickness:12px;
    --MusicPlayer-Frame-Color:#fff;
    --MusicPlayer-Frame-Transparency:40%;
    
    --MusicPlayer-Text-Background:#fff;
    --MusicPlayer-Text-Padding:12px;
    --MusicPlayer-Text-Align:right;
    
    --MusicPlayer-Text-TOP-Size:10px;
    --MusicPlayer-Text-TOP-Color:#999;
    
    --MusicPlayer-Text-BOTTOM-Size:10px;
    --MusicPlayer-Text-BOTTOM-Color:#222;
    
    --MusicPlayer-Circle-Size:50px;
    --MusicPlayer-Circle-Background:#fff;
    
    --MusicPlayer-PlayButton-Size:10px;
    --MusicPlayer-PlayButton-Color:#222;
    
    --MusicPlayer-Bar-Thickness:2px;
    --MusicPlayer-Bar-Spacing:2px;
    --MusicPlayer-Bar-Color:#222;
    
    --MusicPlayer-SlideIn-Speed:0.69s;
    --MusicPlayer-SlideOut-Speed:1s;
}
</style>

<div glenplayer01>
    <div top-text>Fleeting Words / Family</div>
    <div bottom-text>Keiichi Okabe / Square Enix Music</div>
    
    <audio id="music-id" src="https://cdn.glitch.com/575112cc-11b3-450e-a9e0-7c6c330b016c/Fleeting%20Words%20-%20Family.mp3"></audio>
</div>
<!--- end music player --->
    

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=ABeeZee|Karla" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-------MUSIC PLAYER BY GLENTHEMES------->
<script src="//glenthemes.github.io/-music-/glenplayer07.js"></script>
<style>/*-------MUSIC PLAYER BY GLENTHEMES-------*/
:root {
   --Circle-Size:38px;
   --Progress-Border-Size:2px;
   --Progress-Empty:#eee;
   --Progress-Fill:#333;
   --Player-Background:#fbfbfb;
   --Play-Pause-Buttons-Size:14px;
   --Play-Pause-Buttons-Color:#111;
   --Player-Text-Margin:16px;

   --Song-Name-Font-Size:10px;
   --Song-Name-Color:#111;

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

#glenplayer07 {
   position:fixed;
   bottom:0;margin-bottom:30px;
   left:0;margin-left:30px;
   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 {display:flex;align-items:center}

.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:ABeeZee;
   font-size:var(--Song-Name-Font-Size);
   text-transform:uppercase;
   letter-spacing:1.5px;
   color:var(--Song-Name-Color);
}

.artist-name {
   margin-top:3px;
   font-family:karla;
   font-size:var(--Artist-Name-Font-Size);
   letter-spacing:0.3px;
   color:var(--Artist-Name-Color);
}
 
</style>
<!-------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">Sterelogue</div>
           <div class="artist-name">Veeta Crush</div>
       </div><!--music-info-->
   </div><!--flamingo-->
</div><!--glenplayer07-->

<audio id="audio" src="https://drive.google.com/uc?export=download&id=18sv1xNr-c8--fbL2bVcsqDfAs290WxAf" type="audio"></audio>
<!----end music player---->

<!--HTML--><script src="//pull.cappuccicons.com/cpf.js"></script>

                          <!---- ICONS ---->
 
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
 
<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
 
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

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

<link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">


<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

                          <!---- FONTS ---->

<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800,900&display=swap" rel="stylesheet">

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,400;0,600;1,900&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&display=swap" rel="stylesheet">

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@900&display=swap" rel="stylesheet">

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@300;400;500&family=Poppins:wght@900&display=swap" rel="stylesheet">

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500;700;900&display=swap" rel="stylesheet">

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@1&display=swap" rel="stylesheet">

<style>#back { position:absolute; width:210px; height:180px; background-color:#f9f9f9; bottom:0px; left:0px; border-radius:15px; border-top-left-radius:30px; border-top-right-radius:30px; box-shadow:0px -2px 1px #dddddd;}

#icon { position:absolute; width:30px; height:30px; background-color:#f3a2d0; top:20px; left:20px; border-radius:100%; }

#icon img { position:absolute; width:30px; height:30px; top:0px; left:0px; border-radius:100%; }

#follow { position:absolute; width:67px; height:17px; top:23px; right:20px; background-color:#f3a2d0; padding:3px; text-align:center; color:#f9f9f9; border-radius:10px; font-size:7.5px; }

#follow a { color:#f9f9f9; }

#follow:hover { color:#f9f9f9;  transform: scale(1.1); -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear;  filter:blur(0.5px); }

#linea { position:absolute; width:210px; height:1px; background-color:#dddddd; top:140px; left:0px; }

#lineados { position:absolute; width:70px; height:40px; background-color:#f3a2d0; top:140px; left:0px; border-bottom-left-radius:15px; opacity:50%; }

#lit { position:absolute; width:70px; height:28px; top:140px; left:0px; border-bottom-left-radius:15px; text-align:center; color:#f9f9f9; font-size:7.5px; line-height:10px; padding-top:12px; font-weight:600; }

#lit b { font-size:10px; }

#lineatres { position:absolute; width:70px; height:40px; background-color:#f3a2d0; top:140px; left:70px; }

#khea { position:absolute; width:70px; height:28px; top:140px; left:70px; text-align:center; color:#f9f9f9; font-size:7.5px; line-height:10px; padding-top:12px; font-weight:600; }

#khea b { font-size:10px; color:#f9f9f9; }

#lineacuatro { position:absolute; width:70px; height:40px; background-color:#f3a2d0; top:140px; left:140px; border-bottom-right-radius:15px; opacity:50%; }

#tiago { position:absolute; width:70px; height:28px; top:140px; left:140px; border-bottom-right-radius:15px; text-align:center; color:#f9f9f9; font-size:7.5px; line-height:10px; padding-top:12px; font-weight:600; }

#tiago b { font-size:10px; }

#rusher { position:absolute; width:170px; height:60px; top:60px; left:20px; }

.username { position:absolute; width:154px; height:auto; color:#f3a2d0; top:0px; left:0px; }

.description { position:absolute; width:170px; height:20px; padding-top:10px; padding-bottom:12px; top:18px; left:0px; color:#aaaaaa; overflow-x:visible; line-height:10px; font-size:9px; }


                    /*   AIR DROP  */    
                            
.shotaro { position:absolute; width:180px; height:90px; top:80px; left:100px; background-color:#f9f9f9; border-radius:10px; border:1px solid #dddddd; -webkit-animation: fadein 1.5s; -moz-animation: fadein 1.5s; -o-animation: fadein 1.5s; animation: fadein 1.5s; }              

.taro { position:absolute; width:180px; height:1px; top:70px; left:0px; background-color:#dddddd; }

.roo { position:absolute; width:1px; height:20px; top:70px; left:87px; background-color:#dddddd; }

.tiktoker { position:absolute; width:152px; height:20px; top:19px; left:0px; line-height:10px; overflow:hidden; color:#aaaaaa; padding:14px; text-align:center; }

.remind { position:absolute; width:180px; height:14px; top:9px; left:0px; text-align:center; color:#f3a2d0; font-weight:800; font-size:9.5px; letter-spacing:.5; font-style:bold; text-shadow:0px 0px 2px #f3a2d0; text-transform:uppercase; }

.accept { position:absolute; height:20px; width:90px; top:73px; left:0px; font-size:8px; text-align:center; background-color:transparent; color:#f3a2d0; }

.accept:hover { color:#ede5f3; }

.decline { position:absolute; height:20px; width:90px; top:73px; right:0px; font-size:8px; text-align:center; background-color:transparent; color:#f3a2d0; }

.decline:hover { color:#ede5f3; }


                       /* MUSIC */
 
#bzrp { position:absolute; width:240px; height:160px; top:180px; left:110px; background-color:transparent; animation: topToBottom ease 2s; -webkit-animation: topToBottom ease 2s; -moz-animation: topToBottom ease 2s; -o-animation: topToBottom ease 2s; -ms-animation: topToBottom ease 2s; }

@-webkit-keyframes topToBottom {
    100% { top: 100%; }
}

@keyframes topToBottom {
    0% { top: 0%; }
}

#duki {  position:absolute; width:240px; height:160px; top:0px; left:0px; background-color:#f3a2d0; border-radius:15px; opacity:40%; }

#border {  position:absolute; width:239px; height:159px; top:0px; left:0px; background-color:transparent; border:1px solid #f3a2d0; border-radius:15px; }

.pic { position:absolute; width:50px; height:50px; top:20px; left:20px; }

.pic img { position:absolute; width:50px; height:50px; }

.txt { position:absolute; width:150px; height:20px; top:23px; left:80px; font-size:8px; line-height:15px; color:#f9f9f9; }

.txt cell { font-size:7.5px; }

.txt b { font-weight:900; font-size:10; }

.txt artist { font-style:italic; font-size:8px; }

#rep { position:absolute; width:200px; height:2px; background-color:#f9f9f9; top:90px; left:20px; }

.avance { position:absolute; width:50%; height:2px; background-color:#f3a2d0; top:0px; left:0px; }

.long { position:absolute; width:200px; height:8px; top:3px; font-size:7.5px; color:#f3a2d0; font-weight:800; }

#nicole { position:absolute; background-color:transparent; width:200px; height:10px; top:115px; left:18px; padding:2px; text-transform:uppercase; font-weight:700; color:#f9f9f9; letter-spacing:.5px; font-style:italic; font-size:8px; line-height:12px; }

#bzrp:hover { transform: scale(1); -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear;  filter:blur(0.7px); }

</style>

<div id="back">
        <div id="icon"><img draggable="false" src="https://64.media.tumblr.com/37a6818ca3054623fbb414306eb56960/1fe9baa11be4b064-28/s2048x3072/b50c7a1fb660b89e18ec5f4935d9aade703e8080.png"></div>
        <div id="follow"><a href="https://tumblr.com/follow/beecores">follow</a></div>
        <div id="lineados"></div>
        <div id="lit"><b>3200</b><br> posts</div>
        <div id="lineatres"></div>
        <div id="khea"><b>13M</b><br> followers</div>
        <div id="lineacuatro"></div>
        <div id="tiago"><b>540</b><br> following</div>
        <div id="linea"></div>
        <div id="rusher">
            <div class="username"><b>@nickinicole</b></div>
            <div class="description">me llegó el dato de que hablabas mal de mi. me volví frío como el hielo.</div>
        </div>
    </div>

<div id="bzrp">
    <div id="border"></div>
    <div id="duki"></div>
    <div class="pic"><img draggable="false" src="https://64.media.tumblr.com/f6dfe919e5d9ded07e37449f66b2c383/1fe9baa11be4b064-4c/s2048x3072/db67f50dca416ee98220fa097f418481a71f3f5c.png"></div>
    <div class="txt">
    <cell>iphone</cell><br>
    <b>ese mensaje
    </b>
    <br>
    <artist>lit killah, fmk</artist></div>
    <div id="rep">
        <div class="avance"></div>
        <div class="long">01:50&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;03:27</div>
    </div>
    <div id="nicole">aún recuerdo cuando te vi. no lo niego, me sorprendí...</div>
</div>

<div class="shotaro">
    <div class="taro"></div>
    <div class="roo"></div>
    <div class="remind">( +1 ) new notification</div>
    <div class="tiktoker">check out <b>mawz</b> by lit killah on spotify.</div>
    <div class="accept">accept</div>
    <div class="decline">decline</div>
</div>

<!--HTML--><div id="sidebar_info">
<div class="sidebar_desc">
<div class="iconh"><img src="https://static.tumblr.com/ac5b9f7b2091e7be7bff623ba535650d/cs3v2w7/ZNppy5y9z/tumblr_static_8odvivggzv8ckkkg84so4kgss.png">
<div id="navigation">
<a href="/">index</a>
<a href="/ask">mssg</a><br>
<a href="/codedirectory">codes</a>
<a href="/navigation">nav</a>
</div>
</div>


<b>lili or ali;</b> i quit a long time ago. basically been on a "hiatus" for two years. if there is something wrorng with my themes and you can't fix it on your own, i highly suggest using another. i check this maybe once every two months or something, and thats even pushing it.

<div class="stuff">

</div>

</div>
<!-- Statcounter code for scftlcves
http://scftlcves.tumblr.com/ on Tumblr -->
<script type="text/javascript">
var sc_project=11750856; 
var sc_invisible=1; 
var sc_security="ce866e6c"; 
var sc_https=1; 
</script>
<script type="text/javascript" src="https://www.statcounter.com/counter/counter.js" async=""></script>
<noscript><div class="statcounter"><a title="Web Analytics"
href="https://statcounter.com/" target="_blank"><img
class="statcounter"
src="https://c.statcounter.com/11750856/0/ce866e6c/1/"
alt="Web Analytics"></a></div></noscript>
<!-- End of Statcounter Code -->

</div>

<style>#sidebar_info {
    margin-top: 120px;
    width: 300px;
    position: relative;
    display: block;
}
.sidebar_desc {
    margin-top: -5px;
    text-align: justify;
    padding: 20px;
    overflow: auto;
    border-radius: 10px;
    background-color: #f8f8f8;
    border-top: 10px solid #dfc1bf;
    border-bottom: 10px solid #b3c6ba;
    border-left: 1px solid #e7e7e7;
    border-right: 1px solid #e7e7e7;
    box-shadow: 2px 2px 9px #ececec;
}
.iconh {
    float: left;
    margin-right: 20px;
    height: 120px;
}
.iconh img {
    background-color: #f8f8f8;
    border: 1px solid #e7e7e7;
    display: inline-block;
    padding: 3px;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    border: 1px solid #e7e7e7;
    -webkit-transition: -webkit-transform .8s ease-in-out;
    transition: .8s ease-in-out;
    -webkit-filter: grayscale(0%);
}
#navigation {
    margin-top: 10px;
    display: block;
    text-align: center;
    word-spacing: 18px;
}
#navigation a {
    color: #5a5a5a;
    font-style: italic;
    text-align: center;
    display: inline-block;
    -webkit-transition: -webkit-transform .8s ease-in-out;
    transition: .8s ease-in-out;
}
b, strong {
    color: #dfc1bf;
    font-weight: 300;
    text-transform: lowercase;
    font-family: poppins;
    font-size: 12px;
}
.stuff {
    margin-top: 20px;
    text-align: center;
    display: block;
    text-transform: uppercase;
    font-family: karla;
    font-size: 7px;
    letter-spacing: 2px;
    word-spacing: 5px;
}
</style>