<div class="rem-div"> 
  <h2>Using Rem in CSS</h2>
  
  <p>Rem units are relative to the font-size of the root element. Therefore, 1rem is equal to the px value of the set root font-size which is 16px by default in most browsers.</p> 

  <p>But in the example we have changed the root font-size value to 32px as you can see in the css.</p> 
</div>

/* By 1rem is equal to the font-size of the root element. By default, most browsers have a default font size of 16p. therefore, 1rem is equal to 16px unless another value is specified */

/* If you wanted to change the defualt root font-size from 16px to 32px, below are the two ways you can do so */
html {
  font-size: 32px;
}

:root {
  font-size: 32px; /* recommended */
}

/* This removes all default padding */
* {
    margin: 0;
    padding: 0;
}

/* font */
body {
  font-family: roboto;
}

/* center rem div */
.rem-div {
  position: absolute;
  width: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid 
#2d68b8; 
  
  border-radius: .5rem; /*This is equivalent to 16px given that the root font-size is 32px */
  padding: 1.75rem;/* This is equivalent to 56px given that the root font-size is 32px */
}

.rem-div h2 {
  font-size: 1.5rem; /* This is equivalent to 48px given that the root font-size is 32px */
  margin-bottom: .75rem; /* This is equivalent to 16px given that the root font-size is 32px */
}

.rem-div p {
  font-size: .75rem; /*This is equivalent to 24px given that the root font-size is 32px */
  margin-bottom: .5rem; /* This is equivalent to 16px given that the root font-size is 32px */
}