Why font-size jumps from very small to very large when I change px or rem?

[Matthew100]

Hi everyone, I'm new here. I have a problem, I am building a mobile first website. Here is the problem. Let's say I have a container with a H3 and a paragraph. When I set the size of the paragraph let's say to 20 or 25 px (or 1.5, 1.7 rem), the paragraph remains very little, but when I change it to 30 px or 2rem it becomes very large, like there's no intermediate size. Why?
Here the html and css
I also saw that in the inspector the root size is striked through. How come? The page is empty, there's nothing overriding it.
Thank you very much!

<div class="seguicisui">

      <div class="suisocial">
        <h3 class="titleseguici">Seguici sui social</h3>
        <p class="nonperdertistorie">Non perderti nuove storie e nuovi pelosetti da adottare</p>
      </div>
      <br><br>

      <div class="facebookandinstagram">
        <div class="facebook">
          <h5>Facebook</h5>
          <img src="#" alt="icona facebook">
        </div><br>

        <div class="instagram">
          <h5>Instagram</h5>
          <img src="#" alt="icona instagram">
        </div>
      </div>

.seguicisui {
  width: 95vw;
  margin: auto;
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: 'Varela Round', sans-serif;
  text-align: center;
}


.titleseguici {
  width: 95vw;
  margin: auto;
  font-size: 3.7rem;
  margin-bottom: 10px;
}

.nonperdertistorie {
  width: inherit;
  font-size: 30px;
}

.facebook {
  text-align: center;
  font-size: 25px;
}

.instagram {
  text-align: center;
  font-size: 25px;
}