:root {
  --dialog-translate-offset: 1rem;
  --dialog-translate-enter: 0 var(--dialog-translate-offset);
  --dialog-translate-leave: 0 calc(-1 * var(--dialog-translate-offset));
  --dialog-translate-duration: 0.4s;
  --dialog-gap: 2rem;
  --dialog-content-max-width: 1080px;
  --dialog-content-background-colour: white;
  --dialog-backdrop-colour: rgba(0, 0, 0, 0.5);
}

dialog.modal {
  border: none;
  overflow: initial;
  flex-direction: column;
  opacity: 0;
  translate: var(--dialog-translate-enter);
  background-color: transparent;
  transition-property: overlay, display, translate, opacity;
  transition-duration: var(--dialog-translate-duration);
  transition-timing-function: ease-in-out;
  transition-behavior: allow-discrete;
  margin:0;  
  z-index:999;
  min-width: 100%;
  min-height: 100%;
  place-items:center;
  place-content:center; 

  *,*::before,*::after, & {box-sizing:border-box}

  &::-webkit-backdrop {
    -webkit-transition-property: overlay, display, opacity;
    transition-property: overlay, display, opacity;
    transition-duration: var(--dialog-translate-duration);
    transition-behavior: allow-discrete;
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
    background-color: var(--dialog-backdrop-colour);
    opacity: 0;
  }

  &::backdrop {
    transition-property: overlay, display, opacity;
    transition-duration: var(--dialog-translate-duration);
    transition-behavior: allow-discrete;
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
    background-color: var(--dialog-backdrop-colour);
    opacity: 0;
  }

  .dialog\:contents {
    overflow: auto;
    direction: ltr;
    border-radius: 0.6em;
    max-height: 100dvh;
    padding: calc(0.5 * var(--dialog-gap)) var(--dialog-gap);
    background-color: var(--dialog-content-background-colour);
    width:min(100%, var(--dialog-content-max-width));
    -ms-scroll-chaining: none;
        overscroll-behavior: contain;
  }

  &[open] {
    opacity: 1;
    translate: 0 0;
    display:flex;

    @starting-style {
      opacity: 0;
      translate: var(--dialog-translate-leave);
    }

    &::-webkit-backdrop {
      opacity: 1;

      @starting-style {
        opacity: 0;
      }
    }

    &::backdrop, button.dialog\:close {
      opacity: 1;

      @starting-style {
        opacity: 0;
      }
    }
  }

  button.dialog\:close {
    all: unset;
    cursor: pointer;
    -webkit-margin-before: calc(0.5 * var(--dialog-gap));
            margin-block-start: calc(0.5 * var(--dialog-gap));
    place-content: center;
    place-items: center;
    color:white; 
    margin-inline:auto; 
    transition:opacity 0.3s ease-in-out;
    transition-delay : var(--dialog-translate-duration);
    span { transition:color 0.3s ease-in-out; }

    span:hover { color:#7FCFF3; }

    &::before {
      content: "";
      position: fixed;
      top: 50%;
      left:50%;
      border-radius: 0;
      height: calc(100dvh + var(--dialog-translate-offset));
      width: calc(100dvw + var(--dialog-translate-offset));
      translate: -50% -50%;
      z-index: -1;
      opacity: 0;
    } 
  }

  :root:has(&[open]) [data-modal] {
    pointer-events: none;
  }
}

/* Unrelated global styling. PLEASE IGNORE! */

button[command="show-modal"] { 
  padding:1em 2em; 
  border:none; 
  position:absolute;
  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3);
  border-radius:0.7ch; 
  background:white; 
  font-weight:bold;
  font-size:1em;
  text-align:center;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  transition:color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  &:hover { 
    color:crimson; 
    cursor:pointer; 
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
  }
}

iframe {
  border:none;
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
}

body { 
  background-color:#e9fcff;
  margin:0; 
  padding:0; 
  height:100%; 
  min-height:100%;
  font:normal 400 clamp(1rem, 2vw, 1.1875rem)/1.6 "Open Sans",sans-serif;
}