.modal {
    display: none;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    z-index: 1000;
}

.modal-overlay {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(var(--color-black-rgb), 0.9);
    z-index: 1001;
}

.modal-content {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: stretch;
    align-items: stretch;
    align-content: stretch;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1002;
}

.modal-iframe iframe {
    border: 0 none;
    width: 100%;
    height: 100%;
}

html:has(.modal.open) {
    overflow-y: hidden;
}

.modal-close-button {
    /* Resets */
    outline: 0;
    cursor: pointer;
    appearance: none;
    user-select: none;

    /* Appearance */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    position: absolute;
    background-color: transparent;
    border: 0 none;
    box-shadow: none;
    top: clamp(1.5rem, 5vh, 4.8rem);
    right: clamp(1.5rem, 5vh, 4.8rem);
    z-index: 1009;
    color: var(--color-white);
    transition: .3s ease-in-out;
}

/* 
    Hover 
*/
@media (-moz-touch-enabled: 0), (pointer: fine) {
    .modal-close-button:hover {
        color: rgba(var(--color-white), 0.8);
        rotate: -180deg;
    }
}