@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
//  src: local('Source Code Pro'), local('SourceCodePro-Regular'), url(https://themes.googleusercontent.com/static/fonts/sourcecodepro/v4/mrl8jkM18OlOQN8JLgasDxM0YzuT7MdOe03otPbuUS0.woff) format('woff');
    src: local('Source Code Pro'), local('SourceCodePro-Regular'), url(SourceCodePro-VariableFont_wght.ttf) format('woff');
}

body {
    font-family: Source Code Pro;
    background:#000;
    color: #00FF00;
    margin:0;
    font-size: 13px;
}
canvas {
    position:absolute;
    top:0;
    left:0;
}
.bars-and-stuff{
//    left:66.6%;
    left:0%;
    width: 100%;
}

.output-console {
    position:fixed;
    top:0px !important;
    overflow:hidden;
}

.hacker-3d-shiz {
//display:none;
	width: 100%;
	height: 100%;
}
p{margin:0}


html { background: #111;
       padding: 1em;
//       font-family: Nintendoid1;
       color: #eee;
       font-size: 1em;
       line-height: 1;
       text-shadow: 0.06rem 0 0.06rem #ea36af, -0.125rem 0 0.06rem #75fa69;
//       letter-spacing: 0.125em;
       animation-duration: 0.05s;
       animation-name: textflicker;
       animation-iteration-count: infinite;
       animation-direction: alternate;
}
h1 { font-size: 5em; }

@keyframes textflicker {
  from {
    text-shadow: 1px 0 0 #ea36af, -2px 0 0 #75fa69;
  }
  to {
    text-shadow: 2px 0.5px 2px #ea36af, -1px -0.5px 2px #75fa69;
  }
}


body {
   animation: tikatika 1s step-end infinite;
}
@keyframes tikatika {
  0% { opacity: 1; }
  20% { opacity: .2; }
  25% { opacity: 1; }
  53% { opacity: 0.2; }
  55% { opacity: 1; }
  93% { opacity: 0.3; }
  99% { opacity: 1; }
}

canvas {
   animation: flash 0.5s step-end infinite;
}
@keyframes flash {
  0% { opacity: 1; }
  20% { opacity: .2; }
  25% { opacity: 1; }
  53% { opacity: 0.2; }
  55% { opacity: 1;  }
  93% { opacity: 0.3; background: #fff; }
  99% { opacity: 1; background: #fff; }
}


#video-area{
    position: fixed;
    z-index: -1;/*最背面に設定*/
    top: 0;
    right:0;
    left:0;
    bottom:0;
    overflow: hidden;
}

#video {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
//    width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
//    height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
    min-height: 100%;
    min-width: 100%;
//    width: 100%;
    height: 100%;
}

@media screen and (min-width: 960px) {
#video {
    width: 100%;
    height: auto;
}
}



.hideMe {
    -moz-animation: cssAnimation 0s ease-in 15s forwards;
    /* Firefox */
    -webkit-animation: cssAnimation 0s ease-in 15s forwards;
    /* Safari and Chrome */
    -o-animation: cssAnimation 0s ease-in 15s forwards;
    /* Opera */
    animation: cssAnimation 0s ease-in 15s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@keyframes cssAnimation {
    to {
    display: none;
        width:0;
        height:0;
        overflow:hidden;
    }
}
@-webkit-keyframes cssAnimation {
    to {
        width:0;
        height:0;
        visibility:hidden;
    }
}

.dispMe, .lastdisp {visibility:hidden;}
.dispMe {
    -moz-animation: dispAnim 0s ease-in 15s forwards;
    /* Firefox */
    -webkit-animation: dispAnim 0s ease-in 15s forwards;
    /* Safari and Chrome */
    -o-animation: dispAnim 0s ease-in 15s forwards;
    /* Opera */
    animation: dispAnim 0s ease-in 15s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.lastdisp {
    -moz-animation: dispAnim 0s ease-in 25s forwards;
    /* Firefox */
    -webkit-animation: dispAnim 0s ease-in 25s forwards;
    /* Safari and Chrome */
    -o-animation: dispAnim 0s ease-in 25s forwards;
    /* Opera */
    animation: dispAnim 0s ease-in 25s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes dispAnim {
    to {
        visibility:visible;
    }
}
@-webkit-keyframes dispAnim {
    to {
        visibility:visible;
    }
}