Please check your code. In the _reset.scss you have called body tag at two places and called the same font-size fucntion at two places with two sizes.

body {
    //1rem = 10px 10px/16px = 62.5%
    font-size: 62.5%;
    //will increase or reduce the font-size based on the screen size in the future
}

You called it here with font-size and

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
 {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

You also called it here.

Try correcting it and if it stills get error. Lets try finding another.

I re-observed your code to get the font correct. You want to change the font-size from 32px to 20px, right?.. Ok, here’s what to do. You can select the class of the element in the style sheet. In this case it is in component.css. In there change the font-size of heading-primary from 2rem to 1.25rem. It will change the size of ‘Location’ from 32px to 20px..

Change the font-size from this

.heading-primary {
    font-family: "Monument Extended";
    font-size: 2rem;
    line-height: 150%;
    color: var(--color-secondary);
}

to this

.heading-primary {
    font-family: "Monument Extended";
    font-size: 1.25rem;
    line-height: 150%;
    color: var(--color-secondary);
}

If this is not your problem..don’t hesitate to say

I’m trying to implement the font-size: 62.5% for the body tag:

body {
    font-size: 62.5%;
}

I have it in my _reset.scss file but for some reason, it doesn’t work. I have two screenshots from the Chrome DevTools.

Here’s the GitHub link for my project:
https://github.com/MajesticBay/nearballard_v2

Here’s the link for the live version:
https://nearballardv2.netlify.app/