@font-face {
  font-family: 'leet';
  src: url('./normal.ttf') format('truetype');
}

@-webkit-keyframes acidmove {
  0%   {left:-10px; opacity: 0.3;}
  5%  {left:-5px; opacity: 0.4;}
  10%  {left:-8px; opacity: 0.3;}
  15%  {left:-4px; opacity: 0.1;}
  20%  {left:-5px; opacity: 0.1;}
  25%  {left:-4px; opacity: 0.1;}
  30%  {left:-9px; opacity: 0.2;}
  35%  {left:-6px; opacity: 0.4;}
  40%  {left:-3px; opacity: 0.2;}
  45%  {left:-8px; opacity: 0.2;}
  100% {left:-4px; opacity: 0.2;}
}

@-webkit-keyframes acidmove-retina {
    0%   {left:-11px; opacity: 0.3;}
    5%  {left:-6px; opacity: 0.4;}
    10%  {left:-9px; opacity: 0.3;}
    15%  {left:-6px; opacity: 0.1;}
    20%  {left:-4px; opacity: 0.1;}
    25%  {left:-4px; opacity: 0.1;}
    30%  {left:-9px; opacity: 0.2;}
    35%  {left:-6px; opacity: 0.4;}
    40%  {left:-3px; opacity: 0.2;}
    45%  {left:-8px; opacity: 0.2;}
    100% {left:-4px; opacity: 0.2;}
}

@-webkit-keyframes static {
  0%   {top: 0; height: 0; opacity: 0.5;}
  10%  {top: 0; height: 10%;}
  11%  {opacity: 0.8;}
  12%  {opacity: 0.5;}
  20%  {opacity: 0.3;}
  21%  {opacity: 0.8;}
  23%  {opacity: 0.3;}
  41%  {opacity: 0.7;}
  44%  {opacity: 0.6;}
  50%  {opacity: 0.4;}
  60%  {opacity: 0.3;}
  61%  {opacity: 0.5;}
  63%  {opacity: 0.6;}
  90%  {top: 90%; height: 10%;}
  100% {top: 100%; height: 0; opacity: 0.5;}
}

@-webkit-keyframes static-retina {
    0%   {top: 0; height: 0; opacity: 0.5;}
    10%  {top: 0; height: 10%;}
    11%  {opacity: 0.7;}
    12%  {opacity: 0.6;}
    20%  {opacity: 0.3;}
    21%  {opacity: 0.7;}
    23%  {opacity: 0.3;}
    41%  {opacity: 0.7;}
    44%  {opacity: 0.5;}
    50%  {opacity: 0.4;}
    60%  {opacity: 0.3;}
    61%  {opacity: 0.5;}
    63%  {opacity: 0.7;}
    90%  {top: 90%; height: 10%;}
    100% {top: 100%; height: 0; opacity: 0.5;}
}

@font-face {
  font-family: 'VT323';
  font-style: normal;
  font-weight: 400;
  src: url('./vt323.ttf') format('truetype');
}



html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  background-color: black;
  background-image: url('./bg-noise.png');

  color: #e00000;
  font-family : monospace;
}

pre {
  margin: 0;
}

::selection {
  background: #e00000; /* Safari */
  color: black;
}
::-moz-selection {
  background: #ffb7b7; /* Firefox */
}
.content {
  z-index: 100;
  background-image: url('./line.png');
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  min-height: 100%;
  padding-bottom: 100px;
}
.content:last-child {
  z-index: 1;
  left: -2px;
  opacity: 0.3;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@media (-webkit-min-device-pixel-ratio: 1) {
.content:last-child {
  -webkit-animation: acidmove 8s ease-in;
  -webkit-animation-delay: 2s;
  -webkit-animation-iteration-count: infinite;
}

.fuzz {
  -webkit-animation: static 40s linear;
  -webkit-animation-delay: 2s;
  -webkit-animation-iteration-count: infinite;
}
}


@media (-webkit-min-device-pixel-ratio: 2) {
.content:last-child {
  -webkit-animation: acidmove-retina 8s ease-in;
  -webkit-animation-delay: 2s;
  -webkit-animation-iteration-count: infinite;
}
.fuzz {
  -webkit-animation: static-retina 40s linear;
  -webkit-animation-delay: 2s;
  -webkit-animation-iteration-count: infinite;
}



}

.fuzz {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: rgba(80,80,80,0.2);
  z-index: 20;
  height: 0;
  transform: translate3d(0,0,0);
  pointer-events: none;
}

.content:last-child .fuzz {
  display: none;
}

.logo-area {
  text-align: center;
  margin-top: 60px;
  text-shadow: 0 0 20px #e00000;
}
.logo {
  font-size: 26px;
  display: inline-block;
  text-align: left;
}
.logo-area-quote {
  font-family: 'VT323';
  font-size: 28px;
  margin-top: 0;
  margin-bottom: 0;
}

.info-wrapper {
  font-family: 'VT323';
  font-size: 25px;
  text-align: center;
  margin-top: 50px;
  margin-bottom: 10px;
}
.info {
  display: inline-block;
  width: 40em;
  text-align: left;
}
.green {
  color: #e00000;
  text-shadow: 0 0 20px #e00000;
}
.white{
  color: #e6e6e6;
  text-shadow: 0 0 20px rgba(230,230,230,0.5);
}
.cyan {
  color: #e65151;
  text-shadow: 0 0 20px #e65151;
}
.yellow {
  color: #ff4d94;
  text-shadow: 0 0 20px #ff4d94;
}
.magenta {
  color: #d76f30;
  text-shadow: 0 0 20px #d76f30;
}
ul,
ol {
  list-style: none;
}

.blink_me {
    animation: blinker 2s linear alternate;
}

@keyframes blinker {
    0% {
      opacity: 0
    }
    69% {
      opacity: 0
    }
    70% {
        opacity: 1;
    }
    74% {
        opacity: 0;
    }
    77% {
        opacity: 1;
    }
}

.blink_you {
    color: #ff4d94;
    text-shadow: 0 0 20px #ff4d94;
    animation: blinkery 4s linear alternate;
}

@keyframes blinkery {
    0% {
      opacity: 0
    }
    69% {
      opacity: 0
    }
    70% {
        opacity: 1;
    }
    73% {
        opacity: 0;
    }
    75% {
        opacity: 1;
    }
}

.blink_us {
    color: #ff4d94;
    text-shadow: 0 0 20px #ff4d94;
    animation: blinkeru 6s linear alternate;
}

@keyframes blinkeru {
    0% {
      opacity: 0
    }
    69% {
      opacity: 0
    }
    70% {
        opacity: 1;
    }
    72% {
        opacity: 0;
    }
    74% {
        opacity: 1;
    }
}

.blink_we {
    color: #ff4d94;
    text-shadow: 0 0 20px #ff4d94;
    animation: blinkere 8s linear alternate;
}

@keyframes blinkere {
    0% {
      opacity: 0
    }
    69% {
      opacity: 0
    }
    70% {
        opacity: 1;
    }
    71% {
        opacity: 0;
    }
    72% {
        opacity: 1;
    }
}

/* The sidebar menu */
.sidenav {
    height: 100%;
    width: 100px;
    position: fixed;
    text-align: center;
    z-index: 1;
    top: 0;
    left: 0;
    overflow-x: hidden;
    padding-top: 20px;
}

/* Style the navigation menu links */
.sidenav a {
    font-family: 'VT323';
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 20px;
    color: #e65151;
    display: block;
}

/* Change link color on hover */
.sidenav a:hover {
    color: #ee8787;
}

.lastblink {
    animation: blinkere 10s linear alternate;
}

@keyframes blinkere {
    0% {
      opacity: 0
    }
    69% {
      opacity: 0
    }
    70% {
        opacity: 1;
    }
    71% {
        opacity: 0;
    }
    72% {
        opacity: 1;
    }
}