@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
html{
  min-height: 100%;
  overflow: hidden;
}
body{
  color: rgb(38, 63, 169);
  font-family: 'Roboto Mono', monospace;  
  background-color: rgb(255, 255, 255);  
}
h1{
    font-size: 3em;
    text-align: center;
}
img {
    width: 21em;
    margin: auto;
    display: block;
}
.blue {
  filter: invert(16%) sepia(65%) saturate(2100%) hue-rotate(220deg) brightness(82%) contrast(102%);
}
.text-block{
    display: block;
    margin: auto;
    width: 21.381em;
}
.line{
    position: relative;
    width: 24em;
    border-right: .4em solid rgb(38, 63, 169);
    font-size: 2em;
    white-space: nowrap;
    overflow: hidden;
}
.typing{
  animation: typingAnimation 1.5s steps(14) 1.5s 1 normal both,
             cursorBlink 750ms steps(14) infinite normal;
}
@keyframes typingAnimation{
  from{width: 1.8em;}
  to{width: 10.3em;}
}
@keyframes cursorBlink{
  from{border-right-color: rgb(38, 63, 169);}
  to{border-right-color: transparent;}
}