body,html {
    margin: 0;
    padding: 0;
    background: #240f36;
    color: #fff8ff
}

body {
    font: 13px/1.35"DejaVu Sans Mono","Lucida Console","Courier New",monospace
}

img {
    border: 0;
    vertical-align: middle
}

table {
    border-collapse: collapse
}

td {
    vertical-align: top
}

#site {
    width: 100%;
    min-width: 1024px;
    table-layout: fixed
}

#site,h1,h2,h3,p {
    margin: 0
}

a {
    color: #c494f2
}

a:focus,a:hover {
    color: #f8d9ff
}

#sidebar {
    width: 155px;
    border: 1px solid #3b2050;
    vertical-align: top;
    font-size: 10px
}

#status {
    padding-top: 5px;
}

.server-icon {
    display: block;
    margin: 0 auto
}

#status h2 {
    font-size: 17px;
    font-weight: 400;
    text-align: center;
    margin: 3px 0 5px
}

.meters {
    width: 100%;
    text-align: center;
    line-height: 13px
}

.meters td {
    width: 50%;
    padding: 2px 0 4px
}

.meters .second {
    border-left: 2px solid #3a1254
}

.details {
    width: 100%;
    margin: 16px 0 14px
}

.details th {
    text-align: left;
    padding: 3px 3px 3px 6px;
    color: #d4cbdc
}

.details td {
    padding: 3px 4px 3px 0;
    font-size: 9px
}

.divider {
    width: 106px;
    height: 2px;
    overflow: hidden;
    background: #3a1254;
    margin: 15px auto 10px
}

.divider.wide {
    width: 132px;
    margin: 0 auto 9px
}

.divider.short {
    width: 69px;
    margin: 8px auto 14px
}

.details th,.side-heading {
    font-weight: 400;
    white-space: nowrap
}

.side-heading {
    font-size: 17px;
    text-align: center;
    margin-bottom: 10px
}

#navigation {
    list-style: none
}

#navigation,#navigation li {
    margin: 0;
    padding: 0
}

#navigation a,#navigation span {
    display: block;
    padding: 6px 10px;
    color: #fff8ff;
    text-decoration: none;
    font-size: 9px
}

#navigation .selected,#navigation a:focus,#navigation a:hover {
    background: #35124e
}

.widget {
    text-align: center;
    margin-top: 14px
}

.widget h3 {
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 10px
}

.widget p {
    margin: 9px 4px 0;
    line-height: 13px
}

.widget .cover {
    border: 1px solid #3b2050
}

#banner {
    height: 140px;
    background: #635563 url(/static/assets/banner.png)center center no-repeat;
    background-size: cover;
    vertical-align: bottom
}

#banner h1 {
    float: left;
    color: #dcecf5;
    font-size: 22px;
    font-weight: 400;
    padding: 5px 9px 3px;
    letter-spacing: 1px;
    text-shadow: 2px 2px 4px rgba(0,0,0,.5)
}

#banner p {
    float: right;
    color: #e0d9dc;
    letter-spacing: 1px;
    padding: 9px 9px 0px;
    margin-top: 6px;
}

#main {
    padding: 0;
    vertical-align: top
}

#columns {
    width: 100%;
    table-layout: fixed
}

.camera-list th,.column {
    vertical-align: top
}

.left-column {
    padding: 29px 24px 4px 30px
}

.right-column {
    padding: 29px 28px 0 9px
}

.project-list-wrap {
    margin-left: 18px
}

.project-list {
    width: 100%;
    margin: 0;
    font-size: 15px
}

.section h2 {
    font-size: 15px;
    font-weight: 700;
    color: #fff3d1;
    margin: 0 0 17px;
    white-space: nowrap
}

.section h2 img {
    margin-right: 8px
}

.section-body {
    margin-left: 18px
}

.section-body p {
    margin: 0 0 20px
}

.welcome p {
    line-height: 18px
}

.projects {
    margin-top: 0
}

.project-list td {
    padding: 14px 0 18px;
    vertical-align: middle
}

.project-icon {
    width: 49px
}

.project-name {
    width: 96px
}

.project-name span {
    color: #c494f2;
    text-decoration: underline
}

#badges {
    margin-top: 13px
}

#badges img {
    margin-right: 12px
}

.photography .section-body p {
    line-height: 18px;
    margin-bottom: 12px
}

.camera-list {
    width: 100%;
    font-size: 12px
}

.camera-list th {
    width: 99px;
    text-align: left;
    font-weight: 400;
    padding: 0 0 9px;
    white-space: nowrap
}

.camera-list td {
    padding-bottom: 9px
}

.camera-list td span {
    font-size: 11px;
    line-height: 21px;
    color: #ede3ef
}

.main-camera {
    color: #fff2d2
}

.second-camera {
    color: #d6ffe6
}

.travel-camera {
    color: #ffd6f2
}

#friends {
    width: 379px;
    height: 265px;
    margin: 0 0 0 5px;
    padding: 0;
    background: #f0f0f0 url(/static/assets/friends-frame-no-count.png)no-repeat;
    background-size: cover;
    color: #080808;
    font: 12px/1.3"Courier New",monospace
}

.lower-column {
    padding-top: 24px
}

.friend-area {
    padding: 25px 8px 0
}

.titlebar,.titlebar-top-span {
    height: 19.37px;
    border-bottom: 1px solid #666;
    position: relative;
    overflow: hidden
}

.titlebar {
    width: auto;
    background: #aaa url(/static/assets/titlebar-left-piece.png);
    background-size: contain
}

.titlebar-top-span {
    margin-left: 103px;
    background: #aaa url(/static/assets/titlebar-top-span.png)repeat-x
}

.titlebar h2 {
    display: inline;
    color: #fff;
    background: #282828;
    font-size: 10px;
    font-weight: 400;
    line-height: 16px;
    padding: 1px 5px;
    letter-spacing: 1px
}

.window-mark {
    float: left;
    width: 12px;
    height: 12px;
    border: 2px outset #777;
    background: #333
}

.window-controls {
    position: absolute;
    right: 1px;
    top: 0
}

.window-controls span {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px outset #ddd;
    background: silver;
    font: 700 11px/12px Arial,sans-serif;
    text-align: center;
    margin-left: 1px
}

.friend-grid {
    width: 100%;
    table-layout: fixed
}

.friend-grid td {
    width: 33%;
    text-align: center;
    padding: 5px 0 12px
}

.friend-card {
    display: block;
    color: #080808;
    text-decoration: none
}

.friend-card strong {
    display: block;
    font-size: 13px
}

.friend-card small {
    display: block;
    font-size: 10px;
    color: #555;
    margin-top: 2px
}

a.friend-card:focus,a.friend-card:hover {
    background: #d6d6e4;
    color: #080808
}

.statusbar {
    border: 2px inset #ddd;
    font-size: 10px;
    line-height: 14px;
    padding-left: 2px;
    position: relative
}

.resize-grip {
    position: absolute;
    right: 0;
    top: 0;
    color: #777
}

.no-style {
    color: inherit;
    text-decoration: inherit;
}<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>yzu.moe</title>
  <link rel="stylesheet" type="text/css" href="/static/css/style.css">
</head>

<body>
  <table id="site" cellspacing="0" cellpadding="0" border="0" summary="Page layout">
    <tr>
      <td id="sidebar" rowspan="2">
        <div id="status">
          <img class="server-icon" src="/static/assets/server-icon.png" width="64" height="64" alt="">
          <h2>status</h2>
          <table class="meters" cellspacing="0" cellpadding="0" summary="Server status">
            <tr>
              <td><img src="/static/assets/gnome-dev-memory.png" width="24" height="24" alt=""><br>mem<br><span>56G/64G</span>
              </td>
              <td class="second"><img src="/static/assets/hdd_win_mount.png" width="24" height="24" alt=""><br>disk<br><span>435G/465G</span></td>
            </tr>
            <tr>
              <td><img src="/static/assets/gnome-gnomine.png" width="24" height="24" alt=""><br>temp<br><span>43C|59C</span></td>
              <td class="second"><img src="/static/assets/gnome-monitor.png" width="24" height="24"
                  alt=""><br>uptime<br><span>11d</span></td>
            </tr>
          </table>
          <table class="details" cellspacing="0" cellpadding="0" summary="Server location and time">
            <tr>
              <th>location :</th>
              <td>2459115</td>
            </tr>
            <tr>
              <th>time&nbsp;&nbsp;&nbsp;&nbsp; :</th>
              <td>2026.9.11<br>18:39:57</td>
            </tr>
          </table>
        </div>
        <div class="divider"></div>
        <h2 class="side-heading"><img src="/static/assets/emblem-web.png" width="26" height="26" alt=""> Links</h2>
        <ul id="navigation">
          <li class="selected"><a href="index.html">&gt; home</a></li>
          <li><a href="http://itaru.moe">&gt; archives</a></li>
          <li><a href="https://github.com/electimon">&gt; github</a></li>
        </ul>
        <div class="divider wide"></div>
        <h2 class="side-heading"><img src="/static/assets/multimedia.png" width="24" height="24" alt=""> Currently</h2>
        <div class="widget">
          <h3><img src="/static/assets/gnome-dev-cdrom-audio.png" width="24" height="24" alt=""> <a href="https://last.fm/user/electimon">Listened to</h3></a>
          <img class="cover" src="https://lastfm-img.freetls.fastly.net/i/u/174s/02ca876558c345c58d5a01f257b7cdc6.jpg" width="64" height="64" alt="Album artwork placeholder">
          <a href="https://www.last.fm/music/DJ+Sharpnel/_/Follow+You"><p>Follow You<br>By: DJ Sharpnel</p></a>
        </div>
        <div class="divider short"></div>
        <div class="widget">
          <h3><img src="/static/assets/package_multimedia.png" width="24" height="24" alt=""> <a href="https://kitsu.app/users/1767898">Watching</h3></a>
          <a href="https://kitsu.app/anime/flcl"><img class="cover" src="https://media.kitsu.app/anime/202/poster_image/medium-f261ccc182544a2d6f9702af68f4bf8a.jpeg" width="64" height="64" alt="Series artwork placeholder">
          <p>FLCL<br>Episode 0/6</p></a>
        </div>
      </td>
      <td id="banner">
        <h1><a href="https://yzu.moe" class="no-style">yzu.moe</a></h1>
        <p>insert tagline here...</p>
      </td>
    </tr>
    <tr>
      <td id="main">
		<div>
            <h3>Hanami has encountered an error...</h3>
            <div>Status: 404, Error: Not Found</div>
        </div>

  <!-- evil devilish script to fuck up ur web bowser !!!! -->
  <script type="text/javascript">
    (function () {
      var baseWidth = 1024;

      function resizeSite() {
        var width = document.documentElement.clientWidth;

        var scale = (width - 4) / baseWidth;

        if (scale < 1) {
          scale = 1;
        }

        var site = document.getElementById("site");

        if (site) {
          site.style.zoom = scale;
        }
      }

      if (window.addEventListener) {
        window.addEventListener("resize", resizeSite, false);
      } else if (window.attachEvent) {
        window.attachEvent("onresize", resizeSite);
      }

      resizeSite();
    })();
  </script>
</body>

</html>