@font-face {
  font-family: Manrope;
  src: url("fonts/Manrope-Light.ttf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: Manrope;
  src: url("fonts/Manrope-Bold.ttf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: Manrope;
  src: url("fonts/Manrope-ExtraBold.ttf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: Manrope;
  src: url("fonts/Manrope-ExtraLight.ttf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: Manrope;
  src: url("fonts/Manrope-Medium.ttf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: Manrope;
  src: url("fonts/Manrope-Regular.ttf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: Manrope;
  src: url("fonts/Manrope-SemiBold.ttf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: block;
}
* {
  box-sizing: border-box;
}

:root {
  @apply text-[12px] md:text-[16px];
}

html,
body {
  @apply m-0 p-0 font-[Manrope] text-[#444444] overflow-x-hidden;
  font-weight: 300;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  @apply font-[Manrope] font-bold;
}

@layer base {
  h1 {
    @apply text-h1 font-semibold text-[#444444];
  }

  h2 {
    @apply text-h2 font-medium text-[#444444];
  }

  h3 {
    @apply text-h3 text-[#444444];
  }

  oversized {
    @apply font-bold;
  }
}

.container {
  @apply mx-auto max-w-screen-xl px-10;
}

* {
  @apply box-border;
}

header#masthead.site-header {
  padding: 0 20px !important;
}

[data-balloon]:after {
  padding: 7px 8px !important;
}