<main>
  <h2>Review CSS comments about min() and max()</h2>
  <p>Review the MDN docs for <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/min()">min()</a> and <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/max()">max()</a>, and see support on <a target="_blank" href="https://caniuse.com/css-math-functions">CanIUse</a>. For more ideas on how to use them, catch the replay of my talk at <a target="_blank" href="https://5t3ph.dev/css-cafe">CSS Cafe</a>. Also check out a full review of <a href="https://moderncss.dev/practical-uses-of-css-math-functions-calc-clamp-min-max/" target="_blank">the four best supported CSS math functions</a> over on ModernCSS.dev</p>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quisquam error deserunt obcaecati maiores impedit ipsa sed inventore culpa, hic placeat qui fugit! Ipsam accusamus et dicta, quisquam quibusdam voluptatum aliquid!</p>
</main>

* {
  box-sizing: border-box;
}

body {
  font-size: 1.25rem;
  font-family: system-ui, sans-serif;
}

main {
  // Responsively cap width
  width: min(60ch, 100vw - 2rem);
  // Responsively allow a greater distance on taller viewports
  margin-top: max(8vh, 2rem);
  margin-right: auto;
  margin-left: auto;
}

h2 {
  // Responsively adjust border width relative to fluid type size
  border: min(6px, 0.15em) solid purple;
  font-size: clamp(1.5rem, 6vw + 1rem, 3rem);
  // Relative padding, no less than 1rem
  padding: max(5%, 1rem);
}

p {
  line-height: 1.5;
}

a {
  color: blue;
}