<div class="container">
<p class='resize'>Resize the viewport and watch the font size change</p>
<h1>Shores of the cosmic ocean are creatures of the cosmos </h1>

<p>Tunguska event birth great turbulent clouds Rig Veda take root and flourish the sky calls to us. A still more glorious dawn awaits emerged into consciousness rings of Uranus network of wormholes a mote of dust suspended in a sunbeam something incredible is waiting to be known. Vanquish the impossible hydrogen atoms the ash of stellar alchemy star stuff harvesting star light not a sunrise but a galaxyrise emerged into consciousness?</p>

<p>Kindling the energy hidden in matter hydrogen atoms paroxysm of global death rich in heavy atoms tingling of the spine cosmos. Invent the universe Drake Equation invent the universe something incredible is waiting to be known rich in mystery take root and flourish. Made in the interiors of collapsing stars dream of the mind's eye network of wormholes shores of the cosmic ocean bits of moving fluff a mote of dust suspended in a sunbeam.</p>
<div class="font-size"></div>
</div>

body {
  font-family: Inconsolata, sans-serif;
  color:#2c35e8;
}

.container {
  padding: 2vw;
}

h1 {
  font-size: clamp(1.414em, 5.5 * (1vw + 1vh) / 2 , 5.653em);
}

p {
  font-size: clamp(1em, 3* (1vw + 1vh) / 2 , 1.414em);
}

.font-size {
  background-color: lightseagreen;
  padding: 2vw;
  color: lightyellow;
  font-size: clamp(1em, 3* (1vw + 1vh) / 2 , 1.414em);
}

.resize {
  color: #004f5e;
}

const heading = document.querySelector('h1')
const text = document.querySelector('p')
const styleHeading = window.getComputedStyle(heading)
const styleText = window.getComputedStyle(text)
const sizes = document.querySelector('.font-size')

let state = {
  calculate() {
    this.fontSizeHeading = styleHeading.fontSize
    this.fontSizeText = styleText.fontSize
    this.viewport = window.innerWidth
    sizes.textContent = `viewport:${this.viewport}px heading:${this.fontSizeHeading} body:${this.fontSizeText}`
  },
  fontSizeHeading: '',
  fontSizeText: '',
  viewport: ''
}

window.addEventListener('load', function () {
  state.calculate()
})
window.addEventListener('resize', function(){
 state.calculate()
})