@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  /* Font Sizes and Line Heights */
  --font-size-h1: 56px;
  --line-height-h1: 64px;
  
  --font-size-h2: 40px;
  --line-height-h2: 48px;
  
  --font-size-h3: 30px;
  --line-height-h3: 40px;
  
  --font-size-h4: 24px;
  --line-height-h4: 32px;
  
  --font-size-h5: 20px;
  --line-height-h5: 24px;
  
  --font-size-body: 16px;
  --line-height-body: 24px;
  
  --font-size-small: 14px;
  --line-height-small: 20px;
}

/* H1 */
.h1 {
  font-family: 'Manrope', sans-serif;
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  font-weight: 800;
}

/* H2 */
.h2 {
  font-family: 'Manrope', sans-serif;
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  font-weight: 800;
}

/* H3 */
.h3 {
  font-family: 'Manrope', sans-serif;
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  font-weight: 800;
}

/* H4 */
.h4 {
  font-family: 'Manrope', sans-serif;
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  font-weight: 800;
}

/* H5 */
.h5 {
  font-family: 'Manrope', sans-serif;
  font-size: var(--font-size-h5);
  line-height: var(--line-height-h5);
  font-weight: 800;
}

/* H5 Medium */
.h5-medium {
  font-family: 'Manrope', sans-serif;
  font-size: var(--font-size-h5);
  line-height: var(--line-height-h5);
  font-weight: 500;
}

/* Body Bold */
.body-bold {
  font-family: 'Manrope', sans-serif;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: 700;
}

/* Body Semibold */
.body-semibold {
  font-family: 'Manrope', sans-serif;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: 600;
}

/* Body */
.body {
  font-family: 'Manrope', sans-serif;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: 400;
}

/* Small Bold */
.small-bold {
  font-family: 'Manrope', sans-serif;
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  font-weight: 700;
}

/* Small Semibold */
.small-semibold {
  font-family: 'Manrope', sans-serif;
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  font-weight: 600;
}

/* Small */
.small {
  font-family: 'Manrope', sans-serif;
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  font-weight: 400;
}