/*ction12: min() - Calculating the Minimum Value */
.min-demo {
  font-size: min(2rem, 3vw); /* Responsive font size */
  margin: 20px;
  display: inline-block;
}
/* Function 13: max() - Calculating the Maximum Value */
.max-demo {
  font-size: max(1rem, 5vh); /* Responsive font size */
  margin: 20px;
  display: inline-block;
}
/* Function 14: clamp() - Restricting Values */
.clamp-demo {
  font-size: clamp(1rem, 2vw + 1rem, 3rem);
  margin: 20px;
  display: inline-block;
}

.title {
  font-weight: bold;
}
.txt {
  max-width: 70ch;
  padding: 3em 1em;
  margin: auto;
  line-height: 1.75;
  text-wrap: pretty;
}

.txt-small {
  font-size: var(--font-size-small);
}

.center-txt {
  text-align: center;
}

.brief {
  font-size: var(--font-size-small);
  opacity: 0.5;
}
.brief::before {
  font-size: var(--font-size-small);
  opacity: 0.5;
  content: "» ";
}

/* <p class="info" title="I'm a Popover! I should animate."> */
.info {
  cursor: help;
}

.info::after {
  content: "?";
  font-size: 12px;
  color: red;
  vertical-align: top;
}

[popover]:popover-open {
  opacity: 1;
  transform: scaleX(1);
}

[popover] {
  padding: 10px;

  /* Final state of the exit animation */
  opacity: 0;
  transform: scaleX(0);

  transition: opacity 0.7s, transform 0.7s, overlay 0.7s allow-discrete,
    display 0.7s allow-discrete;
  /* Equivalent to
  transition: all 0.7s allow-discrete; */

  margin: auto;
  border: none;
  border-radius: 5px;
}

/* Include after the [popover]:popover-open rule */
@starting-style {
  [popover]:popover-open {
    opacity: 0;
    transform: scaleX(0);
  }
}

/* Transition for the popover's backdrop */
[popover]::backdrop {
  background-color: rgb(0 0 0 / 0%);
  transition: display 0.7s allow-discrete, overlay 0.7s allow-discrete,
    background-color 0.7s;
  /* Equivalent to
  transition: all 0.7s allow-discrete; */
}

[popover]:popover-open::backdrop {
  background-color: rgb(0 0 0 / 25%);
}

/* Nesting (&) is not supported for pseudo-elements
so specify a standalone starting-style block. */
@starting-style {
  [popover]:popover-open::backdrop {
    background-color: rgb(0 0 0 / 0%);
  }
}

@media screen and (max-width: 639px) {
  html {
    font-size: 12px;
  }
}

@media screen and (min-width: 640px) {
  html {
    font-size: 14px;
  }
}

@media screen and (min-width: 800px) {
  html {
    font-size: 16px;
  }
}

@media screen and (min-width: 1400px) {
  html {
    font-size: 18px;
  }
}
@media screen and (min-width: 1600px) {
  html {
    font-size: 22px;
  }
}