<h1 class='title'>max() and min() example</h1>
<div class='container'> 
  <p class='resize'>Resize the viewport and watch the width change</p>
  <div class='viewport-container'><p class="viewport"></p></div>
<div class="rect max">
  <p class='widthMax text'></p>
  </div>
  <p class="clamp">width: max(50vw, 450px);</p>
  <div class="rect min">
  <p class='widthMin text'></p>
  </div>
  <p class="clamp">width: min(50vw, 450px);</p>
</div>

* {
  box-sizing: border-box;
  font-family: Inconsolata, sans-serif;
}
.title {
  background-color: #20b2aa;
  color: #ffffe0;
  font-size: 40px;
  width: calc(100vw - 24px);
  height: fit-content(10vh);
  text-align: center;
  padding: 12px;
  margin: 0;
}
.container {
  background-color: #e0d4fc;
  height: 88vh;
  width: calc(100vw - 24px);
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rect {
  color: #ffffe0;
  height: 150px;
  font-weight: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px;
  margin-bottom: 0;
}

.max {
  width: max(50vw, 450px);
  background-color: #2c35e8;
}

.min {
  width: min(50vw, 450px);
  background-color: #004f5e;
}

.text {
  font-size: 30px;
}

.clamp {
  font-size: 30px;
  color: #2c35e8;
}

.viewport-container {
  /* background-color: #ff7e70;*/
  padding: 6px 12px;
  color: #ffffe0;
  font-size: 20px;
}

.viewport {
  color: #004f5e;
  font-size: 30px;
}

.resize {
  font-size: 20px;
}

const rectMax = document.querySelector('.max')
const rectMin = document.querySelector('.min')
const textMax = document.querySelector('.widthMax')
const textMin = document.querySelector('.widthMin')
const viewport = document.querySelector('.viewport')
const rectMaxStyle = window.getComputedStyle(rectMax)
const rectMinStyle = window.getComputedStyle(rectMin)
const state = {
  calculate() {
    this.widthMax = parseInt(rectMaxStyle.width).toFixed(0)
    this.widthMin = parseInt(rectMinStyle.width).toFixed(0)
    textMax.textContent = `width: ${this.widthMax}px`
    textMin.textContent = `width: ${this.widthMin}px`
    this.viewport = window.innerWidth
    viewport.textContent = `viewport: ${this.viewport}px`
  },
  widthMax: '',
  widthMin: '',
  viewport: ''
}

state.calculate()

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