Having problems with resizing text

Question

I've just started a project and so far I've added a header and text. I've gotten the header to resize correctly but I'm struggling to get the text and subtitle to do so.

I would like the text to resize smoothly but not sure how to go about doing this. I attempted using media queries but it's not really effective. Not really sure how to go about fixing this, any help will be greatly appreciated.

Codepen: https://codepen.io/Ayanfe/pen/oNoqoaR

HTML

<div class="container">
    <div class="glitch" data-text="Ayanfe Sanusi">Ayanfe Sanusi</div>
  <div class="glow">Ayanfe Sanusi</div>
  <hr class="solid">
  <p class="subtitle">ILLUSTRATOR & CODER</p>
  </div>
  <div class="scanlines"></div>
</div>

CSS

.container {
     position: absolute;
     transform: translate(-50%, -50%);
     margin-top: 50%;
     left: 50%;
     width: 100%;
    

}
 .glitch, .glow {
     color: #dfbfbf;
     position: absolute;
     font-size: 12rem;
     animation: glitch 5s 5s infinite;
     font-family: "Oswald", sans-serif;
     font-style: italic;
     font-weight: 200px;
     margin-top: -28.5%;
     left: 6%;
     width: 100%;
     text-size-adjust: auto;


}
 .glitch::before, .glow::before {
     content: attr(data-text);
     position: absolute;
     left: 0;
     text-shadow: -8px 0 magenta;
     background: none;
     overflow: hidden;
     top: 0;
     animation: noise-1 3s linear infinite alternate-reverse, glitch 5s 5.05s infinite;
}
 .glitch::after, .glow::after {
     content: attr(data-text);
     position: absolute;
     left: 0px;
     text-shadow: -5px 0 lightgreen;
     background: none;
     overflow: hidden;
     top: 0;
     animation: noise-2 3s linear infinite alternate-reverse, glitch 5s 5s infinite;
}
 @keyframes glitch {
     1% {
         transform: rotateX(10deg) skewX(90deg);
    }
     2% {
         transform: rotateX(0deg) skewX(0deg);
    }

}
 .scanlines {
     overflow: hidden;
     mix-blend-mode: difference;
}
}
 .scanlines::before {
     content: "";
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     background: repeating-linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.05) 0.5%, transparent 1%);
     animation: fudge 7s ease-in-out alternate infinite;
}
 @keyframes fudge {
     from {
         transform: translate(0px, 0px);
    }
     to {
         transform: translate(0px, 2%);
    }
}

.solid {
    width: 50%;
    position: relative;
    color: rgba(165, 141, 141, 1);
    opacity: 0.3;
   margin-top: -12.5%;
    left: 7%;
}
 .subtitle {
     font-family: Arial, Helvetica, sans-serif;
     font-weight: 100;
     font-size: 1rem;
     color: rgba(165, 141, 141, 1);
     text-transform: uppercase;
     letter-spacing: 1em;
     position: relative;
     margin-top: -0.6%;
     right: -58%;
     animation: glitch-2 5s 5.02s infinite;
}

Answer 1

rem is a static size for the font based on the html style for the font. For example, if the html font size is set to 18px setting a fonts size for an element to 2rem will result in a font with 36px size (regardless of the page width).

In order to achieve what you want you should use vw which is setting the size based on the view width, setting the title to 10.35vw and the subtitle to 0.85vw should do the trick