<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<link rel="icon" href="images/bunbun.gif" sizes="16x16 32x32 48x48 150x150" type="image/vnd.microsoft.icon" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<title>☀️</title>

<div id="header">
<div id="side">

<div id="tfsearch">
    <form id="tfnewsearch" method="get" action="https://duckduckgo.com/?q=">
            <input type="" id="sbox-query" name="q" size="21" maxlength="120" placeholder="ayy lmao" autofocus="autofocus">
    </form>
  </div>

</header>
</div>  

<div class="search">    
     <img src="images/boop/search.png"></a>
</div>   

<div class="button">   
<button><img src="images/boop/menu.png"></a></button>
</div>
<div class="slide">     
<p style="display: none">  
<a href="http://mokocchi.cf/" target="_blank">Home</a> <br />
<a href="http://mokocchi.cf/rice" target="_blank">Rice</a> <br />
<a href="http://mokocchi.cf/homepages" target="_blank">Homepages</a> <br />
<a href="http://mokocchi.cf/snow" target="_blank">Let it snow</a> <br />
<a href="mailto:moko@mokocchi.cf" target="_blank">Contact</a> <br />
</div>

<script>
$( "button" ).click(function() {
  $( "p" ).toggle( "slow" );
});
</script>
 
<script>
var flip = 0;
$( "button" ).click(function() {
  $( "p" ).toggle( flip++ % 2 === 0 );
});
</script>


<style type="text/css">

html, body {
    /*background: url('images/bg/streetblur.png') fixed center;
    background-size: cover; /*repeat or cover*/
    width: 80%; height: 97%;
    font-family: open sans;
    font-weight: 600;
    font-size: 14px;
    background-color: #d9d9d9;
    color: #aaa; 
}

a, a:link, a:visited, a:hover, a:active { 
    color: #000;    
}

a:hover, a:active, #sbox-query { 
     color: #fff !important;
 }

 a:hover, a:active, a, a:link, a:visited, a:hover, a:active { 
  text-decoration: none;
    transition: .2s ease-out; 
  }

#content {
 background-color: #f0f0f0;
  /*background: url('images/bg/leaves.png');
  background-size: cover;*/
  /*height: 330px;
  width: 1027px;*/
 height: 60%;
  width: 54%;
   /*margin-left: 405px;  
  margin-top: 160px;  */
  left: 23%;
  top: 26.5%;
  /*margin-top: 226px;  */
    position: fixed; 
}  

#bar {
  background-color: #000;
  /*height: 355px;
  width: 1027px;*/
  height: 64%;
  width: 54%;
  left: 23%;
  top: 21.5%;
  /*margin-top: 180px;*/
  box-shadow: 2px 2px 4px 2px rgba(0,0,0,0.3);
  z-index: 0;
  position: fixed;     
}

h20 {
  font-size: 15px;
  left: 23.8%;
  top: 22.6%;
  z-index: 20;
  position: fixed; 
}

#header {
  background-color: #000;
  width: 100%;
  height: 47px;
  margin-left: -8px;
  top: 0;
  position:fixed;
  box-shadow: 2px 2px 4px 2px rgba(0,0,0,0.2);
  z-index: 15;
}

#side {
  background-color: transparent;
  /*width: 5%;
  height: 920px;
  position:absolute;
  left:0;
  top:0;*/
  box-shadow: 3px 3px 8px 4px rgba(0,0,0,0);
  z-index: -1;
  position: fixed;
  width: 100px;
  height: 100%;
  top: 0;
  left: 0;
}

/*#tfsearch {
  margin: auto 0;
  margin-left: 41%;  
  margin-top: 240px;  
}*/

#sbox-query {
  height: 30px;
  width: 370px;  
  text-align: left;
  margin-left: 144px;  
  margin-top: 6px;  
  background-color: #000;
  border: none;
    z-index: 5;
}

/*div.menu {
opacity: 0.9;
margin-left: 30px;  
margin-top: 25px;  
cursor: pointer;
}*/

#button, .button > button:nth-child(1) {
  cursor: pointer;
  top: 0;
  z-index: 5;
  opacity: 1;
  margin-left: 15px;
  margin-top: 10px;
  position: fixed; 
  background: #000;
  border: none;
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}

#slide, p {
background-color: #f0f0f0;
margin-left: 0px;
height: 100px;
width: 85px;
padding: 15px;
 margin-top: 59px;
 position: fixed; 
 box-shadow: 2px 2px 4px 2px rgba(0,0,0,0.2);
}

.user > a:nth-child(1) > img:nth-child(1) {
opacity: 0.6;
/*margin-left: 97%;  */
margin-left: 900px;
margin-top: 5px;  
width: 43px;
height: 42px;
float: right; 
z-index: 5;
/*width: 43px;
height: 42px;
position: fixed; 
top: 0.5%;*/
}

div.search, .search > img:nth-child(1) {
opacity: 1;
margin-left: 43px;  
margin-top: 7px;  
width: 20px;
height: 20px;
position: fixed; 
-webkit-filter: grayscale(1);
  filter: grayscale(1);
}

div.notif, .notif > img:nth-child(1) {
opacity: 1;
/*margin-top: 400px;  */
width: 24px;
height: 26px;
float: right; 
margin-top: -20px;
z-index: 6;
}

div.count {
opacity: 1;
left: 98.5%; 
float: right; 
top: 0.6%;
margin-top: 3px;
color: #000;
z-index: 7;
}

#tbuttons {
  width: 100px;
  height: 20px;
  margin-top: 6px;
  margin-right: 7px;
  float: right;
  opacity: 0;
}

#tbuttons:hover {
  opacity: 0;
}

img {
  opacity: 0.7;
}

img:hover {
   opacity: 0.5;
}

/*.img { 
   position: relative; 
   display: inline-block;   
}*/

#content > div:nth-child(1) {
  opacity: 0.7;
   top: 105px; 
   left: 170px; 
   float: left;
   padding: 5px;
}

h1 { 
   position: absolute; 
   top: 295px; 
   left: 235px; 
   font-size: 20px;
   cursor: pointer;
   text-shadow: 2px 2px 6px #000;
   background-color: rgba(29,30,42,0.7);
   padding: 3px;  
}

#media, #music, #rice {
 top: 38%;
}

#chanlinks, #medialinks, #musiclinks, #vidyalinks, #ricelinks, #buylinks {
 top: 49%;
}

#content > div:nth-child(1) {
 position: fixed; 
 left: 27.7%;
 opacity: 1;
  top: 37.5%;
   font-size: 20px;
}

#chanlinks {
 position: fixed; 
 left: 27.4%;
  text-align: center;
}

#media {
 position: fixed; 
 left: 36.5%;
 font-size: 20px;
}

#medialinks {
 position: fixed; 
 left: 37.3%;
  text-align: center;
}

#music {
 position: fixed; 
 left: 45%;
  font-size: 20px;
}

#musiclinks {
 position: fixed; 
 left: 45.4%;
 text-align: center;
}

#vidya {
 position: fixed; 
 left: 53.4%;
  font-size: 20px;
 top: 39%;
}

#vidyalinks {
 position: fixed; 
 left: 53.5%;
 text-align: center;
}

#rice {
 position: fixed; 
 left: 62.3%;
  font-size: 20px;
}

#ricelinks {
 position: fixed; 
 left: 63.6%;
  text-align: center;
}

#buy {
 position: fixed; 
 left: 70.4%;
  font-size: 20px;
 top: 37.6%;
}

#buylinks {
 position: fixed; 
 left: 71.2%;
  text-align: center;
}

</style>

<h20 id="message">
    <script>
        var d = new Date();
        var n = d.getHours();

        if ( n == 23 || n == 0) {
            message = "Good evening, Moko~";
        } else if ( n >= 1 && n <= 4 ) {
            message = "Good evening, Moko~";
        } else if ( n >= 5 && n <= 11 ) {
            message = "Good morning, Moko~";
        } else if ( n >= 12 && n <= 16 ) {
            message = "Good afternoon, Moko~";
        } else if ( n >= 17 && n <= 22 ) {
            message = "Good evening, Moko~";
        }
        document.getElementById("message").innerHTML = message;
    </script>
  </h20>

<!--
<div class="menu">    
     <img src="menu.png"></a>
</div>    
-->

<!--
<div class="slide">    
Home <br />
Contact <br />
</div>
--> 

<div class="user">    
     <a href="http://mail.google.com/" target="_blank"><img src="images/boop/usersmoke.png"></a>
</div> 

<!--
<div class="notif">    
     <img src="images/boop/notif.png"></a>
</div> 

<div class="count">    
0
</div> 
-->

<div id="bar"> 

<div id="tbuttons">
 <img src="images/nbuttons.png">
</div>

</div>

<div id="content"> 


<div id="chan">    
<img src="images/icons/4chin.png">
</div> 

<div id="chanlinks">    
<a href="http://boards.4chan.org/w/#s=desktop">/w/ destap</a><br/>
<a href="http://boards.4chan.org/wg/#s=desktop">/wg/ destap</a><br/>
<a href="http://boards.4chan.org/g/#s=desktop">/g/ destap</a><br/>
<a href="http://boards.4chan.org/mu/">/mu/</a><br/>
</div> 

<div id="media">    
<img src="images/icons/video.png">
</div> 

<div id="medialinks">    
  <a href="https://www.youtube.com/feed/subscriptions">YT</a><br/>  
  <a href="http://tumblr.com">Tmblr</a><br/>  
  <a href="http://myanimelist.net/">Mal</a><br/>
<a href="http://anichart.net/">Ani</a><br/>
<a href="http://nyaa.se/">Nyaa</a><br/>
</div> 

<div id="music">    
<img src="images/icons/headphones.png">
</div> 

<div id="musiclinks">    
<a href="http://newalbumreleases.net/">Nar</a><br/>
<a href="http://www.last.fm/">Last.fm</a><br/>
<a href="http://www.youtube-mp3.org/">YT dler</a><br/>
<a href="http://scdownloader.net/">SC dler</a><br/>
</div> 

<div id="vidya">    
<img src="images/icons/PS3.png">
</div> 

<div id="vidyalinks">    
<a href="http://www.gog.com/">Gog</a><br/>
<a href="http://store.steampowered.com/">Steam</a><br/>
<a href="https://secure.square-enix.com/account/app/svc/mogstation">Mogstation</a><br/>
</div> 

<div id="rice">    
<img src="images/icons/setting.png">
</div> 

<div id="ricelinks">    
<a href="https://userstyles.org/users/268662">US</a><br/>
<a href="http://decagonal.deviantart.com/">DA</a><br/>
<a href="https://github.com/decagonal/">Git</a><br/>
</div> 

<div id="buy">    
<img src="images/icons/basket.png">
</div> 

<div id="buylinks">    
<a href="http://ebay.com.au">eBay</a><br/>
<a href="http://www.boohoo.com/aus/page/home">BH</a><br/>
<a href="http://asos.com">Asos</a><br/>
<a href="https://github.com/decagonal/">/f/</a><br/>
</div> 


</div>  

</body>
</html>