Dynamic text font size always on screen

Question

I have email form on my site. Typical "put in your email and I will contact you"

Problem is, it is connected via JS to div behind it, to put this email in background, and sometimes this text goes over windows size. Is there a way to change font size automatically when this text reaches maximum of window size?

JS CODE:

    
var input = document.getElementById("input"),
    h2 = document.getElementById("email-text");


function display(source,destination)
{
  destination.textContent = source;
}

input.onkeyup=function()
{ display(this.value,h2); };
    

HTML

<h2 id="email-text">Contact</h2>

        <div id="footer-main-scetion">
          <div class="phonix">
            <input class="c-checkbox" type="checkbox" id="checkbox">
            <div class="c-formContainer">
              <form class="c-form" action="">
                <input id="input" class="c-form__input" placeholder="E-mail" type="email" pattern="[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{1,63}$" required>
                <label class="c-form__buttonLabel" for="checkbox">
                  <button class="c-form__button" type="button">Send</button>
                </label>
                <label class="c-form__toggle" for="checkbox" data-title="Contact me "></label>
              </form>
            </div>
          </div>



        </div>    

SCREEN SHOTS OF PROBLEM

For now DIV with text is set at:

font-size: 15vw; 
width: 2000%;
margin-left: -950%;    

In hope noone will have as long email as that to make two line out of it.