@font-face {
  font-family: 'Harpagan';
  src: url('../fonts/harpagantest-bold.otf') format('opentype'),
    url('../fonts/harpagantest-medium.otf') format('opentype'),
    url('../fonts/harpagantest-regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Commuters Sans';
  src: url('/fonts/Fontspring-DEMO-commuterssans-extrabold.otf')
      format('opentype'),
    url('../fonts/Fontspring-DEMO-commuterssans-light.otf') format('opentype'),
    url('../fonts/Fontspring-DEMO-commuterssans-bold.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Aktiv Grotesk Ex';
  src: url('../fonts/AktivGrotesk-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

html {
  font-size: 62.5%;
  --primary-color: #9a9f94;
  --secondary-color: #f3e0cd;
  --third-color: #ba6f58;

  --background-color: var(--secondary-color);
  --text-color: var(--third-color);
  --secondary-text-color: var(--primary-color);
}

/* Génériques */
.font-harpagan {
  font-family: 'Harpagan', sans-serif;
}

.font-aktiv {
  font-family: 'Aktiv Grotesk Ex', sans-serif;
}

.font-commuter {
  font-family: 'Commuters Sans', sans-serif;
}

body {
  background-color: var(--background-color);
  height: 100vh;
  width: 100vw;

  text-align: center;
}

h2 {
  color: var(--text-color);
  font-size: 5rem;
}
.city {
  font-size: 3.5rem;
}

p {
  color: var(--secondary-text-color);
  font-size: 2rem;
  margin: 1rem 0;
}

a {
  color: var(--text-color);
  text-decoration: none;
  font-size: 3rem;
  margin: 1rem 0;
}

a:hover {
  color: var(--primary-color);
}

.container {
  height: 70vh;
  background-image: url(../images/tinywow_ART05183_82676707.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  overflow: hidden;
}