@import url(https://fonts.googleapis.com/css?family=PT+Mono);

* {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

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

body {
  font: 17px "PT Mono", Inconsolata, monospace;
  background: #2C2E38;
  color: #f8f8f8;
}

.container{
  height: 100%;
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}


.terminal {
  background: transparent;
  margin-left: 25px;
  width: 490px;
  height: 100px;
  font: inherit;
  border: none;
  outline: none;
  color: inherit;
}

.greeny{
  width: 27px;
  text-align: center;
  color: #E5F04C;
  -webkit-animation:notgreeny 30s infinite alternate-reverse;
          animation:notgreeny 30s infinite alternate-reverse;
}

@keyframes notgreeny { /* CSS3 */
  0%   { color: #68BCDD; }
  50%  { color: #6FE3BC; }
  100% { color: #E5F04C; }
}

.love{
  color: #FF6B6B;
}

.home {
  color: #e28d47;
  padding-bottom: 3px;
}

a{
  color: #E5F04C;
  text-decoration: none;
}

a:hover{
  text-decoration: underline;
}




.glitch {
  position: relative;
  width: 400px;
  margin: 0 auto;
}

@keyframes noise-anim {
  0% {
    clip: rect(84px, 9999px, 56px, 0);
  }
  5% {
    clip: rect(91px, 9999px, 9px, 0);
  }
  10% {
    clip: rect(66px, 9999px, 48px, 0);
  }
  15.0% {
    clip: rect(1px, 9999px, 69px, 0);
  }
  20% {
    clip: rect(71px, 9999px, 8px, 0);
  }
  25% {
    clip: rect(11px, 9999px, 83px, 0);
  }
  30.0% {
    clip: rect(73px, 9999px, 80px, 0);
  }
  35% {
    clip: rect(78px, 9999px, 73px, 0);
  }
  40% {
    clip: rect(9px, 9999px, 98px, 0);
  }
  45% {
    clip: rect(57px, 9999px, 45px, 0);
  }
  50% {
    clip: rect(25px, 9999px, 62px, 0);
  }
  55.0% {
    clip: rect(57px, 9999px, 95px, 0);
  }
  60.0% {
    clip: rect(9px, 9999px, 10px, 0);
  }
  65% {
    clip: rect(66px, 9999px, 14px, 0);
  }
  70% {
    clip: rect(84px, 9999px, 6px, 0);
  }
  75% {
    clip: rect(33px, 9999px, 68px, 0);
  }
  80% {
    clip: rect(95px, 9999px, 40px, 0);
  }
  85.0% {
    clip: rect(2px, 9999px, 73px, 0);
  }
  90% {
    clip: rect(70px, 9999px, 38px, 0);
  }
  95% {
    clip: rect(57px, 9999px, 69px, 0);
  }
  100% {
    clip: rect(23px, 9999px, 96px, 0);
  }
}
.glitch:after {
  content: attr(data-text);
  position: absolute;
  left: 2px;
  text-shadow: -1px 0 red;
  top: 0;
  color: white;
  background: #2C2E38;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim 2s infinite linear alternate-reverse;
}

@keyframes noise-anim-2 {
  0% {
    clip: rect(80px, 9999px, 56px, 0);
  }
  5% {
    clip: rect(10px, 9999px, 64px, 0);
  }
  10% {
    clip: rect(15px, 9999px, 3px, 0);
  }
  15.0% {
    clip: rect(80px, 9999px, 17px, 0);
  }
  20% {
    clip: rect(18px, 9999px, 17px, 0);
  }
  25% {
    clip: rect(90px, 9999px, 28px, 0);
  }
  30.0% {
    clip: rect(54px, 9999px, 29px, 0);
  }
  35% {
    clip: rect(15px, 9999px, 13px, 0);
  }
  40% {
    clip: rect(80px, 9999px, 91px, 0);
  }
  45% {
    clip: rect(44px, 9999px, 76px, 0);
  }
  50% {
    clip: rect(36px, 9999px, 97px, 0);
  }
  55.0% {
    clip: rect(95px, 9999px, 34px, 0);
  }
  60.0% {
    clip: rect(16px, 9999px, 65px, 0);
  }
  65% {
    clip: rect(30px, 9999px, 10px, 0);
  }
  70% {
    clip: rect(88px, 9999px, 81px, 0);
  }
  75% {
    clip: rect(8px, 9999px, 7px, 0);
  }
  80% {
    clip: rect(71px, 9999px, 95px, 0);
  }
  85.0% {
    clip: rect(28px, 9999px, 72px, 0);
  }
  90% {
    clip: rect(27px, 9999px, 51px, 0);
  }
  95% {
    clip: rect(87px, 9999px, 29px, 0);
  }
  100% {
    clip: rect(42px, 9999px, 46px, 0);
  }
}
.glitch:before {
  content: attr(data-text);
  position: absolute;
  left: -2px;
  text-shadow: 1px 0 blue;
  top: 0;
  color: white;
  background: #2C2E38;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim-2 3s infinite linear alternate-reverse;
}


.pulse{
  -webkit-animation-name: color-pulse;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
  padding-left:1px;
  padding-right:1px;
  animation-name: color-pulse;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
  -moz-animation: none;
}

@-webkit-keyframes color-pulse {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
@keyframes color-pulse {
  0% { 
    opacity: 1;
  }
  100% { 
    opacity:0; 
  }
}