body:has(.modal.shown) {
    overflow : hidden;
}

.modal {
    backdrop-filter : blur(2px);
    background      : rgba(0, 0, 0, 0.5);
    display         : none;
    height          : 100vh;
    left            : 0;
    position        : fixed;
    top             : 0;
    width           : 100vw;
    z-index         : 100;
}

.modal.shown {
    display : block;
}

.modal-container {
    background          : #f7f7f7;
    border-radius       : 0.75rem;
    box-shadow          : 0 15px 25px rgba(0, 0, 0, 0.15);
    color               : #222;
    left                : 0;
    margin              : auto;
    max-width           : 90%;
    opacity             : 0;
    position            : fixed;
    right               : 0;
    top                 : 0;
    transition-duration : 0.3s;
    transition-property : all;
    visibility          : hidden;
    z-index             : 101;
}

.modal-container.shown {
    opacity    : 1;
    top        : 5vh;
    visibility : visible;
}

.modal-header {
    align-items     : center;
    border-bottom   : 1px solid #ddd;
    display         : flex;
    justify-content : space-between;
    padding         : 1rem;
}

.modal-header .fa-xmark {
    color               : #ccc;
    cursor              : pointer;
    font-size           : 1.25rem;
    transition-duration : 0.3s;
    transition-property : all;
}

.modal-header .fa-xmark:hover {
    color : #222;
}


.modal-body {
    padding : 1.5rem 1rem;
}

.modal-footer {
    background                 : #eee;
    border-bottom-left-radius  : 0.75rem;
    border-bottom-right-radius : 0.75rem;
    padding                    : 1rem;
    text-align                 : center;
}