.header {
  display: flex;
  flex-direction: column;
  margin-inline: auto;
  text-align: center;
  width: min(100%, 48em);
}

.header .header__headline h1 {
  color: var(--color-green);
  font-size: var(--font-size-x-large);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}

.header .header__headline p {
  color: var(--color-terminal-cyan);
  font-size: var(--font-size-medium);
  margin-bottom: 1.25em;
  margin-top: 0.25em;
}

.header .header__command {
  align-self: center;
  transition: transform var(--transition);
  will-change: transform;
}

.header .header__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  justify-content: center;
  margin-top: 2em;
}

@media(hover: hover) {

  .header:has(.button--command:active) .header__command {
    transform: scale(1.02);
  }

}

@media(min-width: 64em) {

  .header .header__command {
    border-radius: 0.3em;
    font-size: var(--font-size-medium);
  }

}