@import url(https://fonts.googleapis.com/css2?family=Jura:wght@300..700&display=swap);

@import url(https://fonts.googleapis.com/css2?family=Pridi:wght@200;300;400;500;600;700&display=swap);

@import url(https://fonts.googleapis.com/css2?family=Rhodium+Libre&display=swap);

:root {
  --branding-font-family: Jura;
  --heading-font-family: Pridi;
  --body-font-family: Rhodium Libre;
}

.branding {
  font-family: var(--branding-font-family);
  font-size: 5em;
  font-weight: 700;
  color: var(--neutral-tint-2);
  letter-spacing: 0.1em;
  text-align: justify;
}

div {
  font-family: var(--body-font-family);
  font-size: 1em;
  color: var(--neutral-tint-3);
  letter-spacing: 2px;
}

h1 {
  font-family: var(--heading-font-family);
  font-size: 5em;
  font-weight: 600;
  letter-spacing: 5px;
  color: var(--neutral-tint-3);
}

h2 {
  font-family: var(--heading-font-family);
  font-size: 4em;
  font-weight: 600;
  letter-spacing: 4px;
  color: var(--neutral-tint-3);
}

h3 {
  font-family: var(--heading-font-family);
  font-size: 3em;
  font-weight: 500;
  letter-spacing: 3px;
  color: var(--neutral-tint-3);
}

h4 {
  font-family: var(--heading-font-family);
  font-size: 2em;
  font-weight: 500;
  letter-spacing: 2px;
  color: var(--neutral-tint-3);
}

h5 {
  font-family: var(--heading-font-family);
  font-size: 1em;
  font-weight: 400;
  letter-spacing: 2px;
  color: var(--neutral-tint-3);
}
