@font-face {
  font-family: "Voltaire";
  src: url("/wp-content/themes/smaakverkenners-theme/fonts/Voltaire-Regular.ttf")
    format("truetype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lora";
  src: url("/wp-content/themes/smaakverkenners-theme/fonts/Lora-VariableFont_wght.ttf")
    format("truetype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Volkhove";
  src: url("/wp-content/themes/smaakverkenners-theme/fonts/Volkhov-Regular.ttf")
    format("truetype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* CSS Variables voor fonts */
:root {
  --font-voltaire: "Voltaire", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-lora: "Lora", Georgia, "Times New Roman", Times, serif;
  --font-volkhov: "Volkhov", Georgia, "Times New Roman", Times, serif;
}

.weight-400 {
  font-weight: 400;
}

.font-voltaire {
  font-family: var(--font-voltaire);
}

.font-lora {
  font-family: var(--font-lora);
}

.font-volkhov {
  font-family: var(--font-volkhov);
}

.font-xxl {
  font-size: 100px;
  font-family: var(--font-voltaire);

  line-height: 1.2em;
}

h1 {
  font-size: 64px;
  font-family: var(--font-voltaire);

  line-height: 1.2em;
}

h2 {
  font-size: 48px;
  line-height: 60px;
  font-family: var(--font-voltaire);
}

h3 {
  font-size: 32px;
  font-family: var(--font-voltaire);
  margin-bottom: 20px;
}

h4 {
  font-size: 26px;
  font-family: var(--font-voltaire);
}

h4 {
  font-family: var(--font-volkhov);
}

.font-36 {
  font-size: 36px;
}

.font-26 {
  font-size: 26px;
}

.font-18 {
  font-size: 18px;
}

.font-16 {
  font-size: 16px;
}

body {
  font-size: 18px;
  font-family: var(--font-lora);
  color: var(--darkblue);
  line-height: 30px;
}

.text-white {
  color: #fff;
}

.text-dark {
  color: var(--darkblue);
}

@media (max-width: 980px) {
  h1 {
    font-size: 40px;
  }

  h2 {
    font-size: 32px;
  }

  .font-xxl {
    font-size: 40px;

    line-height: 1.2em;
  }
}