:root {
  --zilla-bold: "Zilla-Slab-Bold", sans-serif;
	--zilla-semibold: "Zilla-Slab-Semibold", sans-serif;
  --zilla-regular: "Zilla-Slab-Regular", sans-serif;
  --oxygen-light: "Oxygen-Light", sans-serif;
  --oxygen-regular: "Oxygen-Regular", sans-serif;
  --oxygen-bold: "Oxygen-Bold", sans-serif;
}

p, a {
 font-family: var(--oxygen-regular);
 margin: 0;

}
p {
  font-size: 1rem;
  font-size: clamp(1rem, 2vw, 1.1rem);
}

h1, h2 {
 font-family: var(--zilla-bold);

}

h3, h4  {
  font-family: var(--zilla-semibold);
}

h5, h6,  {
  font-family: var(--oxygen-bold);
}

h1 {
  font-size: clamp(2.1rem, 7vw, 2.5rem);
  margin-bottom: 4rem;
}

#projekt h1 {
  margin-bottom: 2rem;
}

#dienstleistungen h1 {
  margin-bottom: 5rem;
}

h2 {
  font-size: clamp(1.7rem, 10vw, 2rem);
  margin-bottom: 1.2rem;
}

h3 {
  font-size: clamp(1.5rem, 7vw, 1.8rem);
  margin-bottom: 1rem;
}

h4 {
  font-size: clamp(1.2rem, 4vw, 1.4rem);
}

h5 {
  font-size: clamp(1rem, 4vw, 1.2rem);
}

footer h4 {
  font-family: var(--zilla-semibold);
  text-transform: uppercase;
}

footer p, footer ul a {
  font-size: 1rem;
  font-size: clamp(0.85rem, 1vw, 1rem);
}

footer li, footer p {
  margin-bottom: 0.2rem;
}

/* Navigation */

.nav-desktop ul li a {
	font-family: var(--zilla-semibold);
  color: black;
  font-size: 1.25rem;
  font-size: clamp(1.2rem, 1.5vw, 1.3rem);
}


.nav-mobile li  {
  margin-bottom: 1rem;

}

.nav-mobile  li a {
  font-family: var(--zilla-semibold);
  color: black;
  font-size: 2rem;
    font-size: clamp(1.9rem, 6vw, 2.2rem);
}

 .nav-mobile .sub-menu li a {
   font-family: var(--zilla-regular);
  font-size: 1.9rem;
  font-size: clamp(1.5rem, 5vw, 1.7rem);
}

 .nav-mobile .sub-menu  {

   margin-top: 1rem;
   margin-botom: 1.5rem;
  padding-left: 0px;
}

@media only screen and (max-width: 992px) {
  h1 {
    margin-bottom: 2rem;
  }

  #dienstleistungen h1 {
    margin-bottom: 5rem;
  }

  #multimedia-production h1, #sprecherin h1 {
    margin-bottom: 3rem;
  }
}