<h1> I am a h1 set to 3rem (48px)</h1>
<p> I copy text set to 1em (16px) and refer to te the root font-size</p>

  
 <div class="container">
   <p> I am the same copy text, still set to 1em but iside a container with the font size setting of 2em (so I am 2x16=32px)
   </p>
</div>

<p> (1rem=16px is assued as the default browser preset)</p>

/* h1 {font-size: 48px;}
h2 {font-size: 24px;}
p {font-size: 16px;} */

/* h1 {font-size: 3rem;}
h2 {font-size: 1.5rem;}
p {font-size: 1rem;}
/*  */

h1{
  font-size: 3rem;
}
p{
  font-size: 1em;
}

.container {
  font-size: 2em;
  background-color:orange;
}

.container p {
  padding: 2em;
  /*padding: 2rem;*/
}