modals.css

dialog {
    /* Override some builtins that limit us: */
    max-height: 100vh;
    max-width: 100vw;

    /* Positioning */
    box-sizing: border-box;
    width: calc(100vw - 40px);
    height: calc(100vh - 40px);
    top: 20px;
    left: 20px;
    position: fixed;
    margin: 0;

    /* Styling */
    border: 0;
    border-top: 2px solid #888;
    padding: 20px;

    /* Fade in: */
    display: flex;  /* for some reason, display: block disables the transition. */
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none; /* necessary or the main page becomes inaccessible after closing dialog */
}

dialog[open] {
    opacity: 1;
    pointer-events: inherit;
}

dialog::backdrop {
    background-color: #0008;
}