@import url("https://fonts.bunny.net/css?family=kode-mono:400,700|recursive:400,700");

* {
  font-family: "Recursive", system-ui, sans-serif;
}

pre, code {
  font-family: "Kode Mono", monospace;
  font-size: 1em;
}

dialog {
  --duration: 150ms;
  --start-opacity: 0.5;
  --start-scale: scale(0.8);
  border: none;
  margin: auto;
  box-shadow:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);

  /* End values for fade out. */
  opacity: var(--start-opacity);
  transform: var(--start-scale);
  transition:
    opacity var(--duration) ease-out,
    transform var(--duration) cubic-bezier(0, 0, 0.2, 1),
    overlay var(--duration) allow-discrete,
    display var(--duration) allow-discrete;

  section {
    padding: 2rem;
  }
}

dialog[open] {
  /* End values for fade in; start values for fade out. */
  opacity: 1;
  transform: scale(1);

  @starting-style {
    /* Start values vor fade in. */
    opacity: var(--start-opacity);
    transform: var(--start-scale);
  }
}

/* Styling for backdrop behind the dialog */
dialog::backdrop {
  background: rgb(0 0 0 / 0.32);
  /* End value for fade out. */
  opacity: 0;
  transition:
    opacity var(--duration),
    overlay var(--duration) allow-discrete,
    display var(--duration) allow-discrete;
}

dialog[open]::backdrop {
  /* End value for fade in; start value for fade out. */
  opacity: 1;
}

/* This starting-style rule cannot be nested inside the above selector because the nesting selector cannot represent pseudo-elements. */
@starting-style {
  dialog[open]::backdrop {
    /* Start value vor fade in. */
    opacity: 0;
  }
}