<div id="modal"></div>

:root{
  --gutter: 10px;
  @media screen and (min-width: 1000px){
    --gutter: 40px;
  }
}

html {
    height: 100%;
}
body{
  margin: 0;
  padding: 0;
  
  background-repeat: no-repeat;
  background-attachment: fixed;
  background: rgb(255,102,51);
  background: linear-gradient(180deg, rgba(255,102,51,1) 0%, rgba(255,51,102,1) 100%);
}

#modal{
  width: 50%;
  margin: 40px auto 0 auto;
  
  padding: var(--gutter);
  
  background: white;
  border-radius: 4px;
  font:16px sans-serif;
}

let doLog = () => {
  document.getElementById('modal').innerText = 'Gutter: ' 
    + getComputedStyle(document.body).getPropertyValue('--gutter');
};

window.addEventListener('resize', doLog);
doLog();