dialog {
  --background-color: #444;
  --spacing: 3vmin;
  --spacing-half: calc(3vmin/2);
  --text-color: #fff;
  --muted-color: #888;
  --dialog-max-height: calc(100vh - 2* var(--spacing) - 7px);

  padding: var(--spacing) calc(1.5* var(--spacing));
  background-color: var(--background-color);
  border: .3vmin solid var(--muted-color);
  border-radius: 2vmin;
  overflow-x: clip;

  max-width: min(calc(100svw - 2* var(--spacing) - 6px));
  max-height: var(--dialog-max-height);
}

dialog.character-size {
  text-align: center;
  max-width: 768px;
  height: 95vh;
}


::backdrop {
  backdrop-filter: blur(3px);
}

.dialog-close {
  cursor: pointer;
  border-radius: 20px;
  line-height: 34px;
  width: 40px;
  height: 40px;
  font-size: 35px;
  font-family: verdana, monospace;
  text-align: center;
  position: absolute;
  top: 0;
  right: 15px;
  &:hover {
    background-color: var(--ui-color);
  }
}


/* NEW dialog (modal) element */
dialog:not([open]) {
  inset-block-start: auto;
  inset-block-end: auto;
}

#modal-scroll {
  --margin-top: calc(1.5* var(--spacing));
  margin-top: var(--margin-top);
  padding-bottom: var(--spacing);
  box-sizing: border-box;
  background-color: var(--background-color);
  overflow-y: auto;
  overflow-x: hidden;
  padding-inline: var(--spacing-half);
  max-height: calc(var(--dialog-max-height) -  var(--margin-top));
  scrollbar-color: var(--ui-color) color-mix(in lch, var(--background-color), 10% white);
}

@media (min-height: 767px) {
  dialog.character-size div span.desc.d1 {
    margin-top: 30px;
    margin-bottom: 20px;
  }
}

dialog article {
  padding: var(--spacing-half);
  background-color: var(--background-color);
  margin: calc(0 - var(--spacing-half)) 0 0 0
}


dialog h2 {
  color: var(--ui-color);
}
dialog button {
  display: block;
  padding: var(--spacing-half) var(--spacing);
  margin-top: var(--spacing);
  color: var(--ui-color);
  background-color: transparent;
  border-radius: 10px;
  font-family: var(--ui-font-family);
}