:root {
  --text-brand: hsl(209, 100%, 26%);
  --text-primary: hsl(0, 0%, 20%);
}

@font-face {
  font-family: "FFF Hero";
  src: url("fff-hero-bold.ttf") format("TrueType");
}

@font-face {
  font-family: "FFF Equipe";
  src: url("fff-equipe-regular.ttf") format("TrueType");
}

main {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  align-items: center;
}

.illustration {
  display: flex;
  column-gap: 0.5rem;
  align-items: center;
  height: 30.375rem;
}

h1 {
  font-family: "FFF Hero";
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 100%;
  text-transform: uppercase;
  color: var(--text-brand);
  margin: 0;

  @media (width >= 400px) {
    font-size: 2.625rem;
  }

  @media (width >= 800px) {
    font-size: 3.5rem;
  }
}

p {
  font-family: "FFF Equipe";
  font-size: 0.875rem;
  line-height: 150%;
  color: var(--text-primary);
  margin: 0;

  @media (width >= 800px) {
    font-size: 1rem;
  }
}