* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #121212;
}

.mid-logo img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 50%;
  filter: drop-shadow(0 -6mm 4mm rgb(50, 50, 50));
}

.mid-logo img {
  animation-name: image-resize;
  animation-delay: 2s;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

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

html {
  min-height: 100%;
  overflow: hidden;
}


.line-1 {
  position: relative;
  top: 65%;
  width: 24em;
  margin: 0 auto;
  /*    font-size: 180%;*/
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  transform: translateY(-50%);
  color: darkred;
}

.line-2 {
  color: white !important;
  text-transform: lowercase;
  opacity: 0.8;
  font-family: 'Anonymous Pro', monospace;
}

.writer1 {
  animation: typewriter 4s steps(44) 1s 1 normal both;
  animation-delay: 4s;
}

.writer2 {
  animation: typewriter 3s steps(44) 1s 1 normal both;
  animation-delay: 5s;
}

.writer3 {
  animation: typewriter 3s steps(44) 1s 1 normal both;
  animation-delay: 7s;
}

.writer4 {
  animation: typewriter 3s steps(44) 1s 1 normal both;
  animation-delay: 9s;
}

.writer5 {
  animation: typewriter 3s steps(44) 1s 1 normal both;
  animation-delay: 11s;
}

.writer6 {
  animation: typewriter 3s steps(44) 1s 1 normal both;
  animation-delay: 13s;
}

.blink_me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

@keyframes typewriter {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

@keyframes image-resize {
  from {
    top: 0;
  }

  to {
    top: -30%;
  }

  from {
    width: 50%;
  }

  to {
    width: 30%;
  }
}