style.css

:root {
  --brand-gold: #e6ce9a;
  --brand-gold-light: #faf0df;
  --brand-gold-lighter: #fcfaf4;
  --brand-gold-dark: #9a6700;
}

@font-face {
  font-family: "DomD Reg";
  font-display: swap;
  src: local("DomaineDisplay-Regular"), local("Domaine Display"),
    url("fonts/DomDWeb-Regular.eot?#iefix") format("embedded-opentype"),
    url("fonts/DomDWeb-Regular.woff2") format("woff2"),
    url("fonts/DomDWeb-Regular.woff") format("woff");
}

@font-face {
  font-family: "Roboto Condensed";
  font-display: swap;
  font-style: normal;
  font-weight: 700;
  src: local("Roboto Condensed Bold"), local("RobotoCondensed-Bold"),
    url("fonts/roboto-condensed-v19-latin-700.woff2") format("woff2"),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
      url("fonts/roboto-condensed-v19-latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

body,
html,
h1,
h2,
h3,
h4,
h5,
h6 p {
  margin: 0;
  padding: 0;
}

body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 64px;
  place-items: center;
  padding: 64px;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Roboto Condensed", "Trebuchet MS", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.header-alt {
  font-family: "DomD Reg", Georgia, serif;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

a {
  color: var(--brand-gold-dark);
}

iframe {
  width: 100%;
  max-width: 900px;
}