/* centering */
html, body {
  max-width: max-content;
  margin: auto;
  background-color: rgb(184, 217, 246);
}
canvas {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

/* change size of h1 */
h1 {
  font-size: 40px;
  text-align: center;
}

/* typewriter animation */
.typewriter {
  font-family: monospace;
  letter-spacing: .1em;
  margin: 0 auto;
  overflow: hidden;
  white-space: nowrap;
  border-right: .17em solid blue;
  animation: typing 3.5s steps(30, end), blinking-cursor .5s step-end infinite;
  animation-delay: 2s;
  /* change line item image */
  list-style-image: url('images/penguin.png');
  /* hide text */
  visibility: hidden;
  /* maintain the last key frame */
  animation-fill-mode: forwards;
}

  @keyframes typing {
    from {
      width: 0;
    }
    to {
      width: 100%;
      /* makes text visible */
      visibility: visible;
    }
  }

  @keyframes blinking-cursor {
    from,
    to {
      border-color: transparent
    }
    50% {
      border-color: blue;
    }
  }