body {
  /* colors */
  --bg-color-1: #d92b4d;
  --bg-color-2: #f3f1e9;
  --bg-color-3: #008273;
  --bg-color-4: #416ad9;

  --logo-header-color: white;
  --logo-footer-color: black;
  --bg-color-navbar-container: #fff;

  --button-color: #ffffff00;
  --button-border-color-1: #ffff;
  --button-border-color-2: #000000;
  --button-hover-color: #0000003c;

  --shadow-button-hover: 0 0 5px rgb(74, 74, 74);

  /* fonts colors */
  --font-color-colored-bg: #ffff;
  --font-color-white-bg: #190b34;
  --font-color-subtext: #706a7c;

  --anchor-hover-effect: 2px solid rgb(0, 0, 0);

  --publisher-figure-color: #ff335a;

  --border-bottom-color: #ffce00;
}

/* h2 headings fonts */
@font-face {
  font-family: "gilroy heading";
  src: url(../Assets/fonts/gilroy/gilroy-bold.woff2);
}
/* anchor */
@font-face {
  font-family: "gilroy anchor";
  src: url(../Assets/fonts/gilroy/gilroy-bold.woff2);
}
/* navbar items */
@font-face {
  font-family: "gilroy navbar";
  src: url(../Assets/fonts/gilroy/gilroy-bold.woff2);
}

/* paragraphs */
@font-face {
  font-family: "gilroy p";
  src: url(../Assets/fonts/gilroy/gilroy-regular.woff2);
}

/* figcaptions */
@font-face {
  font-family: "gilroy figcaption";
  src: url(../Assets/fonts/gilroy/gilroy-semi-bold.woff2);
}

/* the round buttons font like the experience button */
@font-face {
  font-family: "gilroy button";
  src: url(../Assets/fonts/gilroy/gilroy-semi-bold.woff2);
}

/* timestamp */
@font-face {
  font-family: "gilroy timestamp";
  src: url(../Assets/fonts/gilroy/gilroy-ultra-light.woff2);
}

@font-face {
  font-family: "gilroy italic-paragraph";
  src: url(../Assets/fonts/gilroy/gilroy-ultra-light.woff2);
}

/* headings */

h1 {
  font-family: "gilroy heading";
  font-size: clamp(40px, 5vw, 9vw);
  /* font-size: 40px; */
}

h2 {
  font-family: "gilroy heading";
  font-size: clamp(30px, 40px, 60px);
  /* font-size: 40px; */
}

h3 {
  font-family: "gilroy heading";
  /* font-size: 35px; */
  font-size: clamp(35px, 5vw, 3rem);
}

h4 {
  font-family: "gilroy heading";
  font-size: clamp(0.5em, 22px, 1rem);
}

h5 {
  font-family: "gilroy heading";
  font-size: 12px;
}

.time {
  font-family: "gilroy timestamp";
  font-size: 10px;
}

p {
  font-family: "gilroy p";
  font-size: larger;
  letter-spacing: 1px;
  line-height: 1.5;
}

a {
  font-family: "gilroy anchor";
  text-decoration: none;
  border: none;
  letter-spacing: 2px;
  color: var(--font-color-white-bg);
}

.navbar-item {
  font-family: "gilroy navbar";
  font-size: x-small;
  color: var(--font-color-white-bg);
}

.title-block-3 {
  font-family: "gilroy heading";
  font-size: clamp(35px, 3.7vw, 4rem);
}

.title-block-6 {
  font-family: "gilroy heading";
  font-size: clamp(35px, 3vw, 3rem);
}

.image-sub-text {
  font-family: "gilroy p";
  font-size: small;
}

li {
  list-style-type: none;
}

.figcaption {
  font-family: "gilroy figcaption";
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--font-color-subtext);
}

.italic-paragraph {
  font-family: "gilroy italic-paragraph";
  font-size: 15px;
  line-height: 1.6;
}

/* button bij witte achtergrond */
.all-experiences-button {
  font-family: "gilroy button";
  border-radius: 30px;
  border: 2px solid var(--button-border-color-2);
  background-color: var(--button-color);
  letter-spacing: 2px;
  font-size: 15px;

  &:hover {
    transform: scale(1.01);
  }
}

button {
  cursor: pointer;
}

address {
  font-family: "gilroy timestamp";
  font-size: clamp(0.875rem, 1.5vw, 0.875rem);
}

/* button bij gekleurde achtergrond */
.button-basic-white {
  border-radius: 30px;
  border: 2px solid var(--button-border-color-1);
  background-color: var(--button-color);
  letter-spacing: 2px;
  font-size: 15px;
  font-weight: 500;
  color: var(--font-color-colored-bg);

  &:hover {
    background-color: var(--button-hover-color);
  }
}

/* media button play/pauze */
.media-button {
  border-radius: 100%;
  background-color: var(--font-color-colored-bg);
  border: none;
  justify-content: center;
  align-items: center;

  &:hover {
    box-shadow: var(--shadow-button-hover);
  }
}

.scroll-button {
  border-radius: 10px 10px 0px 0px;
  border: 2px solid black;
  background-color: black;
  letter-spacing: 2px;
  font-size: 15px;
  font-weight: 500;
  color: var(--font-color-colored-bg);
}

header {
  background-color: var(--bg-color-1);
}