HORIZONTAL AGAIN THEME

<!DOCTYPE html>

<head>

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

<!--FONTS-->

<style>

    @import url('https://fonts.googleapis.com/css2?family=Caveat&family=DynaPuff&family=Silkscreen&display=swap');

    @import url('https://fonts.googleapis.com/css2?family=Caveat&family=DynaPuff&family=Silkscreen&display=swap');

    @import url('https://fonts.googleapis.com/css2?family=Caveat&family=DynaPuff&family=Silkscreen&display=swap');

    @import url('https://fonts.googleapis.com/css2?family=Caveat&family=DynaPuff&family=Fredoka+One&family=Silkscreen&display=swap');

</style>

<script type="text/javascript">

Splitting();

</script>


<title>{Title}</title>

<link rel="shortcut icon" href="{Favicon}">

<!--METAS-->

    <!--BACKGROUND OPTIONS-->

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

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

    <meta name="if:background cover" content="" />

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

    <meta name="color:link" cotents="" />

    <meta name="color:link hover" contents="" />

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

    <meta name="select:font" content="arial" />
    <meta name="select:font" content="comic sans ms" />
    <meta name="select:font" content="times" />
    <meta name="select:font" content="ms gothic" />
    <meta name="select:font" content="Caveat" />
    <meta name="select:font" content="DynaPuff" />
    <meta name="select:font" content="Silkscreen" />
    <meta name="select:font" content="Fredoka One" />

    <!--HEADER OPTIONS-->

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

    <meta name="color:header border color" contents="" />

    <meta name="text:header border width" contents="" />

    <meta name="select:header border style" content="solid" />

    <meta name="select:header border style" content="dashed" />

    <meta name="select:header border style" content="dotted" />

    <meta name="select:header border style" content="double" />

    <meta name="select:header border style" content="groove" />

    <meta name="select:header border style" content="ridge" />

    <meta name="select:header border style" content="inset" />

    <meta name="select:header border style" content="outset" />


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

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


    <!--POSTS OPTIONS-->

    <meta name="color:posts background" contents="" />

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

    <meta name="text:posts font size" contents="" />

    <meta name="color:posts border color" contents="" />

    <meta name="text:posts border width" contents="" />

    <meta name="select:posts border style" content="solid" />

    <meta name="select:posts border style" content="dashed" />

    <meta name="select:posts border style" content="dotted" />

    <meta name="select:posts border style" content="double" />

    <meta name="select:posts border style" content="groove" />

    <meta name="select:posts border style" content="ridge" />

    <meta name="select:posts border style" content="inset" />

    <meta name="select:posts border style" content="outset" />

    <meta name="if:border blur" contents="" />

    <meta name="image:hover for tags" contents="" />

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

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


    <meta name="text:link one title" contents="" />

    <meta name="text:link one" contents="" />

    <meta name="text:link two title" contents="" />

    <meta name="text:link two" contents="" />

    <meta name="text:link three title" contents="" />

    <meta name="text:link three" contents="" />

    <meta name="text:link four title" contents="" />

    <meta name="text:link four" contents="" />

<style type="text/css">

/*DON'T TOUCH MEEE YOU'LL BREAK EVERYTHING*/

.bigwrap {

    width: 900px;
}

.wrapper {

    transform: rotate(90deg) translateY(-50vh);

    transform-origin: top left;

    display: flex;

}

.outer-wrapper {

    width: 510px;

    height: 840px;

    transform: rotate(-90deg) translateX(-50vh);

    transform-origin: top left;

    overflow-y: scroll;

    margin-top: 40px;

    overflow-x: hidden;

    position: absolute;

}

.outer-wrapper img {

    max-width: 100%;

    max-height: 100%;

}

.outer-wrapper::-webkit-scrollbar {

  display: none;

}

/*--CREEDDITTT--*/

#credit {

    position: fixed;

    left: 12px;

    bottom: 6px;

    font-size: 14px;
}

/*GENERAL STUFF EUGH*/

html {

    height: 100%;

    font-family: {select:font};

}

body {

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

    {block:ifbackgroundcover}

    background-size: cover;

    {/block:ifbackgroundcover}

    {block:ifnobackgroundcover}

    background-repeat: repeat;

    {/block:ifnobackgroundcover}

    background-color: {color:background};

    overflow: hidden;

    font-family: {select:font};

}

::-webkit-scrollbar {

  width: 3px;

  height: 3px;

  background-color: {color:posts background};

}

::-webkit-scrollbar-thumb {

    background-color: {color:scrollbar};
}

a {

    color: {color:link};

}

a:hover {

    color: {color:link hover};

    -webkit-transition: all 0.4s ease;

    transition: all 0.4s ease;

    -moz-transition: all 0.4s ease;

    -o-transition: all 0.4s ease;
}

blockquote {

margin: 3px;

}

.npf_row {
    margin: 0 !important;
}

hr {

    border-style: {select:posts border style};

    border-color: {color:posts border color};

}

.header {

    width: 834px;

    margin-top: 50px;

    margin-left: -60px;

    height: 150px;

    display: fixed;

    border: 3px solid transparent;
}

.icon {

    width: 450px;

    height: 150px;

    margin-top: -3px;

    margin-left: -3px;

    float: left;

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

    background-size: cover;

    border-width: {text:header border width};

    border-color: {color:header border color};

    border-style: {select:header border style};

    {block:ifborderblur}

    -webkit-box-shadow: 0 0 5px 2px {color:header border color};
        -moz-box-shadow: 0 0 5px 2px {color:header border color};
        box-shadow: 0 0 5px 2px {color:header border color};

    border: transparent;

    {/block:ifborderblur}

    z-index: 10;

}

.icon:hover + .desc {

    opacity: 1.0;

    visibility: visible;
}

.desc:hover {

    opacity: 1.0;

    visibility: visible;
}

.links {

    height: 150px;

    border: 3px solid transparent;

    float: left;

    margin-top: -3px;

    font-size: 24px;

    margin-left: 10px;

    font-family: {select:font};

    color: {color:navigation};

    text-shadow: {color:navigation outline} 0px 0px 2px,   {color:navigation outline} 0px 0px 2px,   {color:navigation outline} 0px 0px 2px,
             {color:navigation outline} 0px 0px 2px,   {color:navigation outline} 0px 0px 2px,   {color:navigation outline} 0px 0px 2px, 0px 0px 4px {color:navigation outline};

}

.links a {

    color: {color:navigation};
}

.post {

    padding: 10px;

    width: 540px;

    min-width: 540px;

    text-align: left;

    color: {color:posts font color};

    font-family: {select:font};

    font-size: {text:posts font size};

    background-color: {color:posts background};

    border-width: {text:posts border width};

    border-style: {select:posts border style};

    border-color: {color:posts border color};

    margin-left: 20px;

    max-height: 440px;

    margin-top: -9px;

    overflow-y: auto;

    overflow-x: hidden;

    {block:ifborderblur}

    -webkit-box-shadow: 0 0 5px 2px {color:posts border color};
        -moz-box-shadow: 0 0 5px 2px {color:posts border color};
        box-shadow: 0 0 5px 2px {color:posts border color};

    border: transparent;

    margin-top: -10px;

    {/block:ifborderblur}

}

.pagenotes {

    display: inline-block;

    margin-left: 10px;

}

ol.notes {

    overflow-y: auto;

    overflow-x: hidden;

    max-height: 440px;

    width: 198px;

    text-align: left;

    line-height: 30px;

    padding: 10px;

    margin-top: -20px;

    list-style: none;

    color: {color:posts font color};

    font-family: {text:posts font family};

    font-size: {text:posts font size};

    background-color: {color:posts background};

    border-width: {text:posts border width};

    border-style: {select:posts border style};

    border-color: {color:posts border color};

    {block:ifpostsborderblur}

    -webkit-box-shadow: 0 0 5px 2px {color:posts background};
        -moz-box-shadow: 0 0 5px 2px {color:posts background};
        box-shadow: 0 0 5px 2px {color:posts background};

    border: transparent;

    {/block:ifpostsborderblur}

}

.tags {

    text-align: justify;

    opacity: 0%;

    -webkit-transition: all 0.4s ease;

    transition: all 0.4s ease;

    -moz-transition: all 0.4s ease;

    -o-transition: all 0.4s ease;
}

.post:hover .tags {

   opacity: 100%;

   -webkit-transition: all 0.4s ease;

   transition: all 0.4s ease;

   -moz-transition: all 0.4s ease;

   -o-transition: all 0.4s ease;

}

.desc {

    opacity: 0.0;

    visibility: hidden;

    transition: opacity .2s, visibility .2s;

    width: 250px;

    height: 120px;

    border: 3px solid transparent;

    -moz-box-shadow: 0 0 5px 5px {color:desc background};
    -webkit-box-shadow: 0 0 5px 5px {color:desc background};
    box-shadow: 0 0 5px 5px {color:desc background};

    background-color: {color:desc background};

    color: {color:desc font color};

    margin-top: 12px;

    position: absolute;

    margin-left: 97px;

    overflow: auto;
}

/* photos and videos */

.media {

    overflow: hidden;

    max-width: 100%;

    max-height: 100%;
}

.media img {

    display: block;

    margin: 0;

    max-width: 100%;

    max-height: 100%;

}

#hvr-forward {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
#hvr-forward:hover, #hvr-forward:focus, #hvr-forward:active {
  -webkit-transform: translateX(8px);
  transform: translateX(8px);
}


</style>

</head>

<body>

<center>

<div class="bigwrap">

<div class="header">

<div class="icon">

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

<div class="desc" style="text-align: justify;">{text:desc}</div> <!--DESC CLOSE-->

<div class="links" style="text-align: left; margin-left: 2px;">

<a href="{text:link one}" id="hvr-forward" style="text-decoration: none;">{text:link one title}</a><br>

<a href="{text:link two}" id="hvr-forward" style="text-decoration: none;">{text:link two title}</a><br>

<a href="{text:link three}" id="hvr-forward" style="text-decoration: none;">{text:link three title}</a><br>

<a href="{text:link four}" id="hvr-forward" style="text-decoration: none;">{text:link four title}</a><br>

<div class="pagination" style="font-size: 22px;">
{block:Pagination}

{block:PreviousPage}
<a href="{PreviousPage}" style="text-decoration: none;">🢀</a>
{/block:PreviousPage}
&nbsp;&nbsp;
{block:NextPage}
<a href="{NextPage}" style="text-decoration: none;">🢂</a>
{/block:NextPage}

{/block:Pagination}
</div> <!--PAGI CLOSE-->

</div> <!--LINKS CLOSE-->

</div> <!--HEADER CLOSE-->

<div class="outer-wrapper">

  <div class="wrapper">

{block:posts}

            <div class="post">

            {block:Text}
            <div class="type-text post-content">
              {block:Title}
              <h2 class="title">
            	<a href="{Permalink}">{Title}</a>
              </h2>
              {/block:Title}

              {Body}
            </div>
            {/block:Text}


            {block:Photo}
            <figure class="type-photo post-content">
              {LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" />{LinkCloseTag}

              {block:Caption}
              <figcaption class="caption">
            	{Caption}
              </figcaption>
              {/block:Caption}
            </figure>
            {/block:Photo}


            {block:Photoset}
            <figure class="type-photoset post-content">
              {Photoset}

              {block:Caption}
              <figcaption class="caption">
            	{Caption}
              </figcaption>
              {/block:Caption}
            </figure>
            {/block:Photoset}


            {block:Quote}
            <div class="type-quote post-content">
              <blockquote>{Quote}</blockquote>

              {block:Source}
              <cite class="caption">
            	{Source}
              </cite>
              {/block:Source}
            </div>
            {/block:Quote}

            {block:Link}
            <div class="type-link post-content">
              <a {Target} href="{URL}" class="link-name">{Name}</a>

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


            {block:Chat}
            <div class="type-chat post-content">
              <ul class="chat-lines">
            	{block:Lines}
            	<li>
            	  {block:Label}<span class="label">{Label}</span>{/block:Label} {Line}
            	</li>
            	{/block:Lines}
              </ul>
            </div>
            {/block:Chat}


            {block:Audio}
            <div class="type-audio post-content">
              {block:AudioEmbed}
            	  {AudioEmbed color="white"}
              {/block:AudioEmbed}
              </div>
              {block:Caption}
              <div class="caption">
            	{Caption}
              </div>
              {/block:Caption}

            {/block:Audio}


            {block:Video}
            <div class="type-video post-content">
              {Video-500}

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


            {block:Answer}
            <div class="type-answer post-content">
              <div class="question">
            	<p class="asker">
            	  <span class="user-name">{Asker}</span> asked:
            	</p>

            	{Question}

            	<hr>
              </div>

              {block:Answerer}
              <div class="answer">
            	  <p class="answerer">
            		<span class="user-name">{Answerer}</span>{block:English} answered{/block:English}:
            	  </p>

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

              <div class="replies">
            	{Replies}
              </div>
            </div>
            {/block:Answer}

            <span style="text-align: justify;">

{block:Date}

{block:PermalinkPage}
{/block:PermalinkPage}
{/block:Date}
</span>

<footer class="contentinfo" role="contentinfo">
              <a href="{Permalink}" title="{ShortMonth} {DayOfMonth}{DayOfMonthSuffix} {Year}">{TimeAgo}</a> &nbsp;

              {block:NoteCount}
              <a class="note-count" href="{Permalink}#notes">
              {NoteCountWithLabel}</a> &nbsp;
              {/block:NoteCount}

              {block:RebloggedFrom}
              <a class="reblog-link" href="{ReblogParentURL}" style="float: right;">
            	via
              </a> &nbsp;
              {/block:RebloggedFrom}

              {block:HasTags}

              <center>


              <img src="{image:hover for tags}" style="max-width: 100%; margin-top: 12px;">

              </center>

              <div class="tags">
            	{block:Tags}<a href="{TagURL}">#{Tag}</a> &nbsp;{/block:Tags}
              </div>
              {/block:HasTags}

            </footer>

            </div>

{block:PostNotes}
<div class="pagenotes" style="margin-top: 11px;">
{PostNotes}
</div> <!--POSTS-->
{/block:PostNotes}

{/block:Posts}


</div> <!--WRAP CLOSE?-->

</div> <!--ANOTHER WRAP CLOSE-->

</div> <!--BIG WRAP CLOSE-->

</center>

<div id="credit">

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

                    </div>

</body></html>