:root {
  font-size: 62.5%;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: "Droid Serif", "Times New Roman", Times, serif; }

body { margin: 4rem; max-width: 1000px; }

h1, h2, h3 { margin-bottom: 3rem; font-weight: normal; font-family: ChangaOne; }
h1 { font-size: clamp(4rem, 2rem + 5vw, 6rem); }
h2 { font-size: clamp(3rem, 2rem + 2.5vw, 4rem); }
h3 { margin-top: 16rem; font-size: 3rem; }
h2 + h3 { margin-top: 6rem; }

p { margin-bottom: 4rem; font-size: clamp(2rem, 1.4rem + 1.5vw, 2.6rem); }
li { font-size: clamp(2rem, 1.4rem + 1.5vw, 2.6rem); }
ul, ol { margin-bottom: 4rem; margin-left: 4rem; }
ul li { position: relative; background-size: 2rem 2rem; }

a { color: Crimson; text-decoration: underline; }
a:hover, a:focus { text-decoration: none; }

hr { margin: 6rem 0; }

baseline-status { margin-bottom: 16rem; padding: 2rem; }

body { counter-reset: count 0; }
.counted { counter-increment: count 1; }

.counted::before {
  display: inline-block;
  margin-right: 2rem; 
  border-radius: 200px;
  background: Crimson;
  padding: 10px;
  aspect-ratio: 1;
  width: 30px;
  height: 30px;
  content: "";
  content: counter(count, decimal);
  color: white;
  font-weight: normal;
  font-size: 2.4rem;
  line-height: 3rem;
  font-family: 'ChangaOne';
  text-align: center;
}

@media (max-width: 600px) {
  h1, h2, h3{ text-align: center; }
  .counted::before {
    margin: 0 auto;
    display: block;
    margin-bottom: 1rem;
  }
}