.modal {
    position: fixed;
    border-radius: 1.5rem;
    margin-block-start: auto;
    z-index: 999;
    padding: 0;
    border: solid 3px hsl(var(--shadow-color));
    max-width: calc(100% - 1rem);
    box-shadow: var(--shadow-6);
    /* https://github.com/argyleink/open-props/blob/main/src/props.shadows.css */

    --shadow-color: 200 3% 15%;
    --shadow-strength: 5%;
    --shadow-6: 
        0 -1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
        0 3px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
        0 7px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
        0 12px 10px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
        0 22px 18px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
        0 41px 33px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%)),
        0 100px 80px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
}

.modal::backdrop {
    background-image: linear-gradient(132deg, 
        hsl(190deg 14% 14% / 60%), 
        hsl(210deg 15% 16% / 60%));
    cursor: pointer;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.close-button {
    border-radius: 50%;
    height: 32px;
    max-width: 32px;
    margin: 1rem 0 0 0;
    padding: 0;
    position: relative;
    vertical-align: top;
    width: 32px;

    &:active {
        background-color: #000;
        transition: none;
    }

    /* letter X made out of 2 pseudo-elements */
    &::before { height: 2px; width: 50%; }
    &::after  { height: 50%; width: 2px; }
    &::before,
    &::after {
        background-color: currentColor;
        content: "";
        display: block;
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translateX(-50%) translateY(-50%) rotate(45deg);
        transform-origin: center center;
    }

}


/*  */

.qr-code-container {
    display: grid;
    justify-items: end;
    gap: 1rem;
    margin-block-end: 3.5rem;
    margin-inline: 1rem;
}

#qr-code,
#generator-qr-code {
    width: min(500px, 90vw);
    max-width: 90%;
    margin: auto;
    display: block;
    image-rendering: pixelated;
}