@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

:root {
  --font-sans: 'Rubik', sans-serif !important;
  --font-mono: 'Rubik', sans-serif !important;
  --font-serif: 'Rubik', sans-serif !important;
  --font-display: 'Rubik', sans-serif !important;
  --font-body: 'Rubik', sans-serif !important;
}

*, *::before, *::after, body, html, h1, h2, h3, h4, h5, h6, p, a, span, div, li, ul, ol, button, input {
  font-family: 'Rubik', sans-serif !important;
}

#artikel article {
  --article-paragraph-gap: 1.25rem;
  --article-heading-gap: 2.5rem;
  line-height: 1.85;
}

#artikel article :is(h2, h3, h4) {
  margin-top: var(--article-heading-gap);
  margin-bottom: 1rem;
  line-height: 1.35;
  scroll-margin-top: 6rem;
}

#artikel article p {
  margin-top: 0;
  margin-bottom: var(--article-paragraph-gap);
  line-height: 1.85;
}

#artikel article :is(ul, ol) {
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
  line-height: 1.85;
}

#artikel article li {
  margin-top: 0.625rem;
  padding-left: 0.25rem;
}

#artikel article li > p {
  margin-bottom: 0.625rem;
}

#artikel article > :first-child {
  margin-top: 0;
}

#artikel article > :last-child {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  #artikel article {
    --article-heading-gap: 2rem;
  }
}