<div class="wrapper">
  <div class="card">
    Change ME
  </div>
  <button class="btnFontColor">Toggle Color</button>
  <button class="btnFontSize">Toggle Font-Size</button>
</div>

:root {
  --font-size: 2rem;
  --font-color: red;
}

.card {
  font-size: var(--font-size);
  color: var(--font-color);
}

.wrapper{
  height: 100vh;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

const styles = getComputedStyle(document.documentElement);

// Change Color by accessing and setting CSS-Properties
document.querySelector(".btnFontColor").addEventListener('click', ()=>{
  let fontColor = styles.getPropertyValue('--font-color');
  if(fontColor==="red"){
    document.documentElement.style.setProperty('--font-color', "green");
  } else {
    document.documentElement.style.setProperty('--font-color', "red");
  }
});


// Change Font-Size by accessing and setting CSS-Properties
document.querySelector(".btnFontSize").addEventListener('click', ()=>{
  let fontSize = styles.getPropertyValue('--font-size');
  if(fontSize==="2rem"){
    document.documentElement.style.setProperty('--font-size', "5rem");
  } else {
    document.documentElement.style.setProperty('--font-size', "2rem");
  }
})