/* crt effect */
      .crt::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 5;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

@keyframes flicker {
  0% {
  opacity: 0.00001;
  }
  5% {
  opacity: 0.00009;
  }
  10% {
  opacity: 0.00004;
  }
  15% {
  opacity: 0.00006;
  }
  20% {
  opacity: 0.00008;
  }
  25% {
  opacity: 0.0006;
  }
  30% {
  opacity: 0.10008;
  }
  35% {
  opacity: 0.10004;
  }
}

.crt::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flicker 0.15s infinite;
}
    
    
/* basic */
* {
	font-family: "MS PGothic", "Meiryo", メイリオ, "Hiragino Kaku Gothic ProN", ヒラギノ角ゴ Pro W3, sans-serif;
	font-size: 13px;
	letter-spacing: 0.8px;
}
html {
    cursor: url("patchicur.png"), auto;
    
    background: radial-gradient(circle at top left, #575363 0%, #3b3747 15%, #161321 35%, #09070f 100%);
    background-repeat: no-repeat;
    height: 100%;
    overflow: hidden;
}
::selection {
  background-color: #8d8791;
    text-shadow: none;
}

#grid1 {
 position: fixed;
top: 0;
    bottom: 0;
    right: 0;
    left;
    height: 100%;
    width: 100%;
    z-index: -2;
    
  background-size: 15px 15px;
  background-image:
    linear-gradient(to right, #120f1c 1px, transparent 1px),
    linear-gradient(to bottom, #120f1c 1px, transparent 1px);
    
    opacity: 0.2;
    animation: scrollingBg 5s infinite linear;
}
#grid2 {
 position: fixed;
top: 0;
    bottom: 0;
    right: 0;
    left;
    height: 100%;
    width: 100%;
    z-index: -1;
    
  background-size: 50px 50px;
  background-image:
    linear-gradient(to right, #120f1c 1px, transparent 1px),
    linear-gradient(to bottom, #120f1c 1px, transparent 1px);
    
    opacity: 0.1;
}
@keyframes scrollingBg {
        from { background-position: 0px 0px; }

        to { background-position: 25px -25px; }
    }

    @media (prefers-reduced-motion: reduce) {
        .animatedBg { animation: none; }
    }

main {
    margin: 50px 0px 0px 50px;
    position: relative;
    width: 600px;
        height: 900px;
}

li {
        margin: 12px;
        position: relative;
        list-style: none;
        color: white;
    }
a {
        color: white;
        text-decoration: none;
    }
    .title {
        color: white;
    }
    .outer::before {
        content: '';
        display: block;
        border-bottom: 1px #c4b7c3 solid;
        width: 42px;
        
        position: absolute;
        left: -48px;
        bottom: 8px;
    }
        .inner::before {
            content: '';
            display: block;
            border-bottom: 1px #c4b7c3 solid;
            border-left: 1px #c4b7c3 solid;
            width: 43px;
            height: 28px;
        
            position: absolute;
            left: -50px;
            bottom: 8px;
        }
ul::before {
        content: "";
        position: absolute;
        left: 3px;
        top: 7px;

        height: 139px;
        border-left: 1px solid #c4b7c3;
    }
iframe {
    width: 995px;
    height: 660px;
    -ms-zoom: 0.30;
        -moz-transform: scale(0.30);
        -moz-transform-origin: 0 0;
        -o-transform: scale(0.30);
        -o-transform-origin: 0 0;
        -webkit-transform: scale(0.30);
        -webkit-transform-origin: 0 0;
    border: none;
}
.show {
    display: none;
    position: absolute;
    left: -50px;
    
    z-index: 4;
}
#webmaster {
    top: 280px;
}
#blog {
    top: 252px;
}
#gamelog {
    top: 224px;
}
#photos {
    top: 196px;
}
#photos iframe {
    width: 1075px;
    height: 700px;
    -ms-zoom: 0.35;
        -moz-transform: scale(0.28);
        -moz-transform-origin: 0 0;
        -o-transform: scale(0.28);
        -o-transform-origin: 0 0;
        -webkit-transform: scale(0.28);
        -webkit-transform-origin: 0 0;
}
#links {
    top: 168px;
}
li:hover div.show {
    display: block;
}
li span {
    color: #c4b7c3;
}

#preview {
    border: 3px #161321 ridge;
    width: 299px;
    height: 195px;
    
    position: absolute;
    left: -1px;
    top: 277px;
    
    background-image: url('images/pixels/anachdruk28background.gif');
    opacity: 0.5;
    
    z-index: 3;
}

#len {
    height: 360px;
    position: absolute;
    left: 62%;
    bottom: 25%;
    filter: sepia(5%)
        grayscale(15%) 
        hue-rotate(-10deg)
        brightness(105%)
        contrast(92%);
}
h1 {
    color: #c4b7c3;
    font-size: 16px !important;
}