complexities

<style>
@import url(https://fonts.googleapis.com/css?family=Montserrat);
@import url(https://fonts.googleapis.com/css?family=Playfair Display SC);
@import url(https://fonts.googleapis.com/css?family=Questrial);
@import url(https://fonts.googleapis.com/css?family=Roboto);
@import url(https://fonts.googleapis.com/css?family=Merriweather);
@import url(https://fonts.googleapis.com/css?family=Oxygen);

/*coded by [punpun]. do not steal the concept. do not remove the credit. do not remove this.*/
::-webkit-scrollbar-thumb {background-color: #8B9BA8; width: 1px; }
::-webkit-scrollbar {background-color: transparent; width: 1px;}

 body {background: linear-gradient(to bottom, #eee 0%,#cccccc 250%); cursor:url(http://media.tumblr.com/tumblr_lqcmexUvFW1qfc7qm.png), auto !important; }

a {
 color: #aeaeae;
 text-decoration: none;
 transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -webkit-transition: all 0.4s ease-in-out;}
a:hover {
 color: #ffffff;background-color: #000; cursor:url(http://media.tumblr.com/d867d8c0827140bcce868f3bdbbd5e4f/tumblr_inline_mwwd9dv65Z1srowmh.png), auto !important;
 text-decoration: none;
 transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -webkit-transition: all 0.4s ease-in-out;}

.tatami1
{ position: fixed; margin: auto; right: 0px; left:0; top: 0; bottom: 0;
height: 145px;
width: 145px;
border: 7px solid #eee;
z-index:10;
background-image: url('https://66.media.tumblr.com/bcd7af497f2547f95c01117b6119dbf6/tumblr_nvy3mfSGMv1uxvvvzo1_500.gif');
background-repeat: no-repeat;
background-size: 270px; /*width, height*/
background-position: -80px 0px;
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
opacity:0.75;
transition:all 0.6s ease-out;
}
.text1
{ position: fixed; margin: auto; right: 0px; left:0; top: 0; bottom: 0;
height: 105px;
width: 105px;
border: 0px solid #eee;
z-index:9;
font-size:19px;
background:#f3f3f3;
line-height:5;
border-right: 2px solid #eee;
border-left: 2px solid #eee;
padding:30px;
color: #aeaeae;
letter-spacing: 0.1px;
text-align: justify;
font-family: roboto;
overflow-y:auto;
overflow-x:hidden;
opacity:0.2;
-webkit-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;
}
.tatami1:hover {opacity:0;}




.tatami2
{ position: fixed; margin: auto; right: 157px; left:0; top: 0; bottom: 315;
height: 145px;
width: 303px;
border: 7px solid #eee;
z-index:10;
background-image: url('http://image.prntscr.com/image/8e08ad1a92404edf9105f1ca6a7cea7c.png');
background-repeat: no-repeat;
background-size: 400px; /*width, height*/
background-position: -15px -30px;
-webkit-filter: grayscale(10%);
filter: grayscale(10%);
opacity:0.75;
transition:all 0.6s ease-out;
}



.tatami3
{ position: fixed; margin: auto; right: 0; left:157px; top: 315; bottom: 0;
height: 145px;
width: 303px;
border: 7px solid #eee;
z-index:10;
background-image: url('http://image.prntscr.com/image/051eba70ec464cf29a41cc6e4bb21d55.png');
background-repeat: no-repeat;
background-size: 400px; /*width, height*/
background-position: -15px -50px;
  -webkit-filter: hue-rotate(0deg);
  filter: hue-rotate(0deg);
opacity:0.75;
transition:all 0.6s ease-out;}

.tatami4
{ position: fixed; margin: auto; right: 315px; left:0; top: 160; bottom: 0;
height: 301px;
width: 145px;
border: 7px solid #eee;
z-index:10;
background-image: url('http://i0.wp.com/halcyonrealms.com/blogpics/gardenwords02.jpg');
background-repeat: no-repeat;
background-size: 500px; /*width, height*/
background-position: -45px -20px;
  -webkit-filter: hue-rotate(30deg);
  filter: hue-rotate(30deg);
opacity:0.75;
transition:all 0.6s ease-out;
}

.tatami5
{ position: fixed; margin: auto; right: 0px; left:315; top: 0; bottom: 159;
height: 301px;
width: 145px;
border: 7px solid #eee;
z-index:10;
background-image: url('http://i.imgur.com/wqIfuIW.png');
background-repeat: no-repeat;
background-size: 550px; /*width, height*/
background-position: -265px 0px;
  -webkit-filter: hue-rotate(90deg);
  filter: hue-rotate(90deg);
opacity:0.75;
transition:all 0.6s ease-out;
}



.was {
position: fixed; margin: auto; right: 0px; left:0; top: 0; bottom: 0; width: 100%; height: 100%;
background-color:#f3f3f3;
 opacity: 0; border: 20.99px solid #;
 z-index: 5;
 text-align: justify;
 transition: all 1.6s linear;
}

.was:target {
 z-index: 30;
 opacity: 1;
 transition: all 1.6s linear;
}


.container {position: absolute; margin: auto; right: 0px; left:0; top: 0; bottom: 0; width: 100%; height:100%;
background-color:#;
 opacity: 0; border: 1px solid #;
 z-index: 11;
 text-align: justify;
-webkit-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;}

.tat1
{ position: absolute; margin: auto; right: 0px; left:0; top: 0; bottom: 0;
height: 145px;
width: 145px;
border: 7px solid #eee;
z-index:30;
background-image: url('https://66.media.tumblr.com/bcd7af497f2547f95c01117b6119dbf6/tumblr_nvy3mfSGMv1uxvvvzo1_500.gif');
background-repeat: no-repeat;
background-size: 270px; /*width, height*/
background-position: -80px 0px;
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
opacity:0.75;
transition:all 1.5s ease-out;
}


.tattxt
{
height: 125px;
width: 215px;
border: px solid #eee;
z-index:30;
font-size:11px;
background:#;
padding:px;
color: #8B9BA8;
letter-spacing: 0.1px;
text-align: justify;
font-family: Questrial;
overflow-y:auto;
overflow-x:hidden;
opacity:0;
-webkit-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;
}
.was:hover .tattxt{opacity:1;}


.tattxta
{
height: 145px;
width: 105px;
border: px solid #000;
z-index:30;
font-size:11px;
background:#;
padding:10px;
color: #8B9BA8;
letter-spacing: 0.1px;
text-align: justify;
font-family: Questrial;
overflow-y:auto;
overflow-x:hidden;
opacity:0;
-webkit-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;
}
.was:hover .tattxta{opacity:1;}

.sts2 {
 font-family: Questrial;
 font-size: 10px;width:95px; height: 8px;
 text-align: left;
 font-weight:100;
 color: #8B9BA8;
 background-color: #;
 padding: 3px;
 margin-bottom: px;
 margin-top: px;
 line-height: 10px;
 border-bottom: 1px solid #8B9BA8; border-right: 2px solid #8B9BA8;
}
.sts2:hover{ background-color: #000;-webkit-transition: all 0.6s ease-out;
 transition: all 0.6s ease-out;}

</style>

<a href="#1"><div class="tatami1"></div></a>
<a href="#3"><div class="tatami2"></div></a>
<a href="#4"><div class="tatami3"></div></a>
<a href="#2"><div class="tatami4"></div></a>
<a href="#5"><div class="tatami5"></div></a>

<div class="text1"><center><i>ENTER</i></center></div>


<div id="1" class="was">

<a href="profile.php?user=Punpun" title="Coded by Punpun" target="_blank"><img src="http://i.imgur.com/acD32sR.png" style="position:fixed; right:10; bottom:0;width:25;"></a>
<a href="#"><div class="tat1" ></div></a>
<div class="tattxt" style="position: absolute; margin: auto; right: 0px; left:400; top: 0; bottom: 0;"><b>/TATAMI EXPRESS/</b> &nbsp; A cafe that couldn't be missed, even if though it was at the sidelines of the bustling Shinjuku Station halls. It wasn't because it had any flashy attributes. It was quite normal:  a bar for those who wanted just a quick rest before they boarded a train, and some tables for those who wanted to enjoy the comfort of that small cafe, maybe, just for a little longer. <br><br>

There was a certain gravity that pulled people to this cafe. It wasn't the atmosphere, and it certainly wasn't the coffee. Perhaps its placement was just right, or perhaps it had to do with something supernatural. <br><br>

However, people never minded that triviality. The crowd was pleasant, and the price was right; there was nothing wrong with the ordinarily generic menu either. It didn't leave any impressions. But it was just right. </div>

<div class="tattxta" style="position: absolute; margin: auto; right: 300px; left:0; top: 20; bottom: 0;">

EMPLOYEES:
<div class="sts2">npc</div>
<div class="sts2">npc</div>
<div class="sts2">npc</div><br>
OTHER POI's:
<div class="sts2">Shinjuku Station</div>
<div class="sts2">Department Stores</div><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="#2">◄</a> / <a href="#3">▲</a> / <a href="#4">▼</a> / <a href="#5">►</a>
</div></div>

<div id="2" class="was">

<a href="profile.php?user=Punpun" title="Coded by Punpun" target="_blank"><img src="http://i.imgur.com/acD32sR.png" style="position:fixed; right:10; bottom:0;width:25;"></a>
<a href="#"><div class="tatami4"></div></a>
<div class="tattxt" style="position: absolute; margin: auto; right: 0px; left:100; top: 0; bottom: 0;"><b>/NISHI-SHINJUKU/</b> &nbsp;
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

<div class="tattxta" style="position: absolute; margin: auto; right: 12px; left:0; top: 300; bottom: 0;">

POI's:
<div class="sts2">n/a</div>
<div class="sts2">n/a</div>
<div class="sts2">n/a</div><br>
FACTIONS:
<div class="sts2">n/a</div>
<div class="sts2">n/a</div><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="#1">◥</a> / <a href="#3">▲</a> / <a href="#4">►</a> / <a href="#5">◥</a>
</div></div>


<div id="3" class="was">

<a href="profile.php?user=Punpun" title="Coded by Punpun" target="_blank"><img src="http://i.imgur.com/acD32sR.png" style="position:fixed; right:10; bottom:0;width:25;"></a>
<a href="#"><div class="tatami2"></div></a>

<div class="tattxt" style="position: absolute; margin: auto; right: 0px; left:0; top: 0; bottom: 20;"><b>/SJINJUKU GYOEN/</b> &nbsp;
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

<div class="tattxta" style="position: absolute; margin: auto; right: 350px; left:0; top: 0; bottom: 0;">

POI's:
<div class="sts2">n/a</div>
<div class="sts2">n/a</div>
<div class="sts2">n/a</div><br>
FACTIONS:
<div class="sts2">n/a</div>
<div class="sts2">n/a</div><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="#1">◢ </a> / <a href="#2">◣</a> / <a href="#4">▼</a> / <a href="#5">►</a>
</div></div>


<div id="4" class="was">

<a href="profile.php?user=Punpun" title="Coded by Punpun" target="_blank"><img src="http://i.imgur.com/acD32sR.png" style="position:fixed; right:10; bottom:0;width:25;"></a>
<a href="#"><div class="tatami3"></div></a>

<div class="tattxt" style="position: absolute; margin: auto; right: 0px; left:0; top: 0; bottom: 0;"><b>/NORTH-SJINJUKU/</b> &nbsp;
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>


<div class="tattxta" style="position: absolute; margin: auto; right: 0px; left:350; top: 20; bottom: 0;">

POI's:
<div class="sts2">n/a</div>
<div class="sts2">n/a</div>
<div class="sts2">n/a</div><br>
FACTIONS:
<div class="sts2">n/a</div>
<div class="sts2">n/a</div><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="#1">◤</a> / <a href="#2">◄</a> / <a href="#3">▲</a> / <a href="#5">◥</a>
</div></div>


<div id="5" class="was">

<a href="profile.php?user=Punpun" title="Coded by Punpun" target="_blank"><img src="http://i.imgur.com/acD32sR.png" style="position:fixed; right:10; bottom:0;width:25;"></a>
<a href="#"><div class="tatami5"></div></a>

<div class="tattxt" style="position: absolute; margin: auto; right: 80px; left:0; top: 0; bottom: 280;"><b>/NAITO-SHINJUKU/</b> &nbsp;
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

<div class="tattxta" style="position: absolute; margin: auto; right: 0px; left:30; top: 20; bottom: 0;">
POI's:
<div class="sts2">n/a</div>
<div class="sts2">n/a</div>
<div class="sts2">n/a</div><br>
FACTIONS:
<div class="sts2">n/a</div>
<div class="sts2">n/a</div><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  <a href="#2">◣</a> / <a href="#1">◄</a> / <a href="#3">◤</a> / <a href="#4">▼</a>
</div></div>


<a href="profile.php?user=Punpun" title="Coded by Punpun." target="_blank"><img src="http://i.imgur.com/acD32sR.png" style="position:fixed; left:10; bottom:0;width:25;-webkit-transform: scaleX(-1); filter: FlipH;"></a>