<h1>FitText in CSS</h1>

<article>
<p>Simple demonstration of <a href="http://fittextjs.com/">FitText</a> in CSS</p>

<style style="display: block;" contenteditable>h1 {
  --minFontSize: 32px;
  --maxFontSize: 200px;
  --scaler: 10vw;
  font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
}
</style>
  
  
<small>Requires Chromium 79+</small>

</article>

body {
  background: #c44032;
  color: #f4f1de;
  margin: 1em;
}

a {
  color: #f4f1de;
  
  &:hover {
    color: #863027;
  }
}

article {
  max-width: 66ch;
  margin: auto;
}

h1 {
  font-family: 'Sniglet', cursive;
  text-align: center;
  line-height: 1;
  text-shadow: #863027 0.01em 0.01em 0, #863027 0.02em 0.02em 0, #863027 0.03em 0.03em 0, #863027 0.04em 0.04em 0, #863027 0.05em 0.05em 0, #863027 0.06em 0.06em 0, #863027 0.07em 0.07em 0, #863027 0.08em 0.08em 0, #863027 0.09em 0.09em 0, #863027 0.1em 0.1em 0;
}

style {
  white-space: pre;
  padding: 1em;
  margin: 1em 0;
  font-family: monospace;
  background: #863027;
  overflow: auto;
}