Why is fluid font sizes not working for font-size?

I am new at web development so I come up with lots of problems. The one I am facing now is font size not set to fluid. I copied the code from youtube but I am not getting the same results as the YouTuber. Apparently, the text is supposed to change size as the width of the window changes. Please have a look at the code and attached images to understand the situation more precisely.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  --header1: calc(2rem+1vw);
  --header2: calc(3.5rem+1vw);
  --header3: calc(3rem+1vw);
  --header4: calc(2.4rem+1vw);
  --text: calc(1.5rem+1vw);
  --big: calc(2.4rem+1vw);
  --special-color: #906272;
  --background-color: #414141;
  --gray-text: #525252;
}
body {
  font-family: "Roboto", sans-serif;
}
h1 {
  font-size: var(--header1);
}
li,
button,
label,
input,
p {
  font-size: calc (1rem + 1vw);
  /* font-size: var(--text); */
}
h2 {
  font-size: var(--header1);
}
h3 {
  font-size: var(--header3);
  font-weight: normal;
}
h4,
h5 {
  font-size: var(--header4);
}
a {
  text-decoration: none;
}
ul {
  list-style: none;
}
.flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,400;1,500&display=swap"
      rel="stylesheet"  />
 
<h1>This is h1</h1>
<h2>This is h2</h2>
<h3>This is h3</h3>
<h4>This is h4</h4>
<h5>This is h5</h5>
<h6>This is h6</h6>
<p>
  This is p<br />Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  Cum eos quidem sunt cumque. Eos aut sunt provident ratione quia in commodi
  nam harum, nihil soluta praesentium facilis error dolorum similique quos
  quas quam cupiditate odio pariatur animi, odit quod at mollitia? Facere
  laborum maiores illum culpa earum voluptatibus reprehenderit impedit.
</p>