@font-face {
  font-family: "Gotham";
  src: url("./fonts/Gotham-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: url("./fonts/Gotham-Book.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: url("./fonts/Gotham-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: url("./fonts/Gotham-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Gotham";
  src: url("./fonts/Gotham-LightItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: url("./fonts/Gotham-BookItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: url("./fonts/Gotham-MediumItalic.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: url("./fonts/Gotham-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Tangerine";
  src: url("./fonts/Tangerine.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  font-family: "Gotham", Arial, sans-serif;
}



main {
  width: min(900px, calc(100% - 48px));
  padding: 48px 0;
}

h1 {
  font-size: clamp(42px, 7vw, 80px);
  font-weight: 700;
  margin: 0 0 12px;
}

.subtitle {
  font-family: "Tangerine", cursive;
  font-size: clamp(42px, 6vw, 72px);
  margin: 0 0 48px;
}

.samples {
  display: grid;
  gap: 24px;
}

.sample {
  padding: 24px;
  background: white;
  border: 1px solid #ddd;
}

.weight-300 { font-weight: 300; }
.weight-400 { font-weight: 400; }
.weight-500 { font-weight: 500; }
.weight-700 { font-weight: 700; }
.italic { font-style: italic; }

small {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .55;
}