<h1 class='title'>max() with multiple parameters</h1>
<div class='container'> 
  <p class='resize'>Resize the viewport and watch the width change</p>
  <div class='size-container'><p class="size px-viewport"></p></div>
  <div class='size-container'><p class="size px-container"></p></div>
<div class="rect">
  <p class='width'></p>
  </div>
  <p class="clamp">width: max(50vw, 60%, 12rem);</p>
</div>

* {
  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: min(1000px, calc(70% + 100px));;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
}

.rect {
  background-color: #2c35e8;
  color:  #FFFFE0;
  width: max(50vw, 60%, 12rem);
  height: 150px;
  font-weight: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px;
}

.width {
  font-size: 30px;
}

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

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

.resize {
  font-size: 20px;
}

const rect = document.querySelector('.rect')
const text = document.querySelector('.width')
const viewportText = document.querySelector('.px-viewport')
const containerText = document.querySelector('.px-container')
const container = document.querySelector('.container')
const containerStyle = window.getComputedStyle(container)
const rectStyle = window.getComputedStyle(rect)
const state = {
  calculate() {
    this.width = parseInt(rectStyle.width).toFixed(0)
    text.textContent = `width: ${this.width}px`
    this.viewport = window.innerWidth
    this.container = parseInt(containerStyle.width).toFixed(0)
    viewportText.textContent = `viewport: ${this.viewport}px`
    containerText.textContent = `container: ${this.container}px`
    if(parseInt(this.width) == 192){
      rect.style.backgroundColor = '#ff7e70'
    } else if(parseInt(this.width) > 192 && parseInt(this.width) < 285){
      rect.style.backgroundColor =  '#004f5e'
    } else {
      rect.style.backgroundColor = '#2c35e8'
    }
              
              
  },
  width: '',
  viewport: '', 
  container: ''
}

state.calculate()

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