@font-face {
  font-family: 'firamono';
  src: url('fonts/FiraMono-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'firamono';
  src: url('fonts/FiraMono-Bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
}

html {
  background: radial-gradient(#15fe00, #15fef0);
}

body {
  margin: 0;
  font-family: 'firamono', monospace;
}

section {
  max-width: 800px;
  margin: 0 auto;
  clear: both;
}

article, h2 {
  margin: 0 10px;
}

header {
  max-width: 550px;
  margin: 10px auto 0 auto;

  div {
    margin: 10px;
    float: left;

    p {
      margin: 0;
      animation-name: header;
      animation-iteration-count: infinite;
      animation-timing-function: steps(2, jump-both);
      animation-direction: alternate;
    }

    p:nth-child(1) {
      animation-duration: 1s;
      animation-delay: 0.5s;
    }

    p:nth-child(1) {
      animation-duration: 0.9s;
      animation-delay: 0.6s;
    }

    p:nth-child(2) {
      animation-duration: 1.5s;
      animation-delay: 1s;
    }

    p:nth-child(3) {
      animation-duration: 0.6s;
      animation-delay: 0s;
    }
  }
}

@keyframes header {
  from {
    transform: translateX(-4px);
  }
  to {
    transform: translateX(4px);
  }
}

#command {
  text-align: center;
  color: gold;
  font-weight: bold;
  filter: drop-shadow(0 0 1rem blue);
  margin: 40px 0;

  span {
    padding: 10px 15px;
    background-color: black;
  }
}

hr {
  border: none;
  background-color: black;
  height: 10px;
}
