@font-face {
  font-family: "Six Caps";
  src: url("../fonts/six-caps-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Mono";
  src: url("../fonts/roboto-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--colore-sfondo);
  color: var(--colore-testo);
  font-family: var(--font-testi);
  font-size: 1rem;
  line-height: 1.6;
}

.hero {
  max-width: var(--larghezza-pagina);
  margin: 0 auto;
  padding: var(--spazio-5) var(--margine-laterale);
}

.hero__titolo {
  margin: 0;
  font-family: var(--font-titoli);
  font-weight: 400;
  font-size: clamp(6rem, 17vw, 17rem);
  line-height: 0.85;
}

.hero__riga {
  display: block;
}

.hero__viola {
  color: var(--colore-viola);
}

.hero__linea {
  display: inline-block;
  width: 0.9em;
  height: 0.06em;
  margin-left: 0.15em;
  vertical-align: middle;
  background: var(--colore-corallo);
}

.hero__nota {
  margin: var(--spazio-4) 0 0;
  max-width: 40ch;
  font-size: 0.875rem;
}