/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */



h1 {
  color: pink;
  font-family: courier;
}
p {
  color: red;
}

/*img {
  width: 100%;
  max-width: 500px;
}*/
.picture {
  width: 200px;
  /*max-width: 300px;*/
}

/*i* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}*/

body {
  font-family: system-ui;
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
  padding: 80px 40px;
  background-color: #030303;
}

.typewriter {
  display: flex;
  justify-content: center;
}

.typewriter p {
  font-family: monospace;
  font-size: 1.5rem;
  /*margin-inline: auto;*/
  overflow: hidden;
  /* Keeps on a single line */
  white-space: nowrap;
  /* The cursor */
  border-right: 1px solid;
  /* steps = number of characters */
  animation: typing 3s steps(21) forwards, blink 1s 3s step-end infinite;
}

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink {
  50% { border-color: transparent; }
}