:root {
  --main-color: #374151;
  --title-color: #111827;
  --base-size: 18px;
}

@media (min-width: 640px) {
  :root {
    --base-size: 20px;
  }
}

@media (min-width: 1024px) {
  :root {
    --base-size: 24px;
  }
}

html {
  font-size: var(--base-size);
  color: var(--main-color);
}

body {
  margin: 1rem;
  max-width: 37rem;
}

article {
  font-size: 1rem;
}

h1,
h2,
h3 {
  margin: 0;
  margin-top: 1rem;
  line-height: 1.5;
  font-weight: bold;
  color: var(--title-color);
}

h1 {
  font-size: 1.5rem;
}

h2 {
  font-size: 1.2rem;
}

h3 {
  font-size: 1rem;
}

p {
  margin: 0;
  margin-top: 1rem;
  line-height: 1.5;
}

hr {
  margin: 2rem;
  color: var(--main-color);
}