:root {
  font-size: 16px;
  --box-shadow-base: #555 2px 4px 7px;
  --border-radius: 10px;

  --font-size-xxs: 0.667rem; /* 10.67px */
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-s: 0.857rem; /* 13.71px */
  --font-size-m: 1rem; /* 16px */
  --font-size-l: 1.2rem; /* 19.2px */
  --font-size-xl: 1.5rem; /* 24px */
  --font-size-xxl: 2rem; /* 32px */

  /* ref: https://www.w3schools.com/css/css_rwd_mediaqueries.asp */
  /* Extra small devices (phones, 600px and down) */
  @media only screen and (max-width: 600px) {
  }

  /* Small devices (portrait tablets and large phones, 600px and up) */
  @media only screen and (min-width: 600px) {
  }

  /* Medium devices (landscape tablets, 768px and up) */
  @media only screen and (min-width: 768px) {
  }

  /* Large devices (laptops/desktops, 992px and up) */
  @media only screen and (min-width: 992px) {
  }

  /* Extra large devices (large laptops and desktops, 1200px and up) */
  @media only screen and (min-width: 1200px) {
  }

  h1 {
    font-size: var(--font-size-xxl);
  }
  h2 {
    font-size: var(--font-size-xl);
  }
  h3 {
    font-size: var(--font-size-l);
  }
  h4 {
    font-size: var(--font-size-m);
  }
  h5 {
    font-size: var(--font-size-s);
  }
  h6 {
    font-size: var(--font-size-xs);
  }
  p {
    font-size: var(--font-size-m);
    line-height: 1.5rem;
  }
}