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

.typewriter {
  border-right: solid 3px rgba(0, 255, 0, 0.75);
  white-space: nowrap;
  overflow: hidden;
  font-family: "Source Code Pro", monospace;
  font-size: 38px;
  height: 38px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 auto;
}

/* Animation */
.typewriter {
  animation: animated-text 3s steps(29, end) 1s infinite alternate both,
    animated-cursor 600ms steps(29, end) infinite;
}

/* text animation */

@keyframes animated-text {
  from {
    width: 0;
  }
  to {
    width: 720px;
  }
}

/* cursor animations */

@keyframes animated-cursor {
  from {
    border-right-color: rgba(0, 255, 0, 0.75);
  }
  to {
    border-right-color: transparent;
  }
}

@media only screen and (max-width: 800px) {
  .typewriter {
    font-size: 18px;
    height: 28px;
  }
  @keyframes animated-text {
    from {
      width: 0;
    }
    to {
      width: 360px;
    }
  }
}