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

.modal:target {
    display: block !important;
}

.modal-backdrop {
    display: block;
    position: fixed;
    top: 0; right: 0;
    bottom: 0; left: 0;
    background: #000;
    cursor: default;
    opacity: 0.3;
}

.modal:target .modal-backdrop {
    animation: modal-backdrop-fade-in 1s cubic-bezier(0.4, 0.01, 0.165, 0.99) 1;
}

.modal-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.modal-body {
    display: flex;
    position: relative;
    z-index: 1001;
    min-width: 128px;
    max-width: 90%;
    max-height: 90%;
    overflow: auto;
    background: #fff;
    box-shadow: 0 5px 25px 0 rgb(0 0 0 / 15%), 0 3px 3px 0 rgb(0 0 0 / 5%);
}

.modal:target .modal-body {
    animation: modal-content-appear 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99) 1;
}

.modal-close {
    display: block;
    position: absolute;
    z-index: 1002;
    top: 0; right: 0;

    background: none;
	border: none;
	cursor: pointer;
	outline: inherit;

    width: 32px;
    line-height: 32px;
    height: 32px;
    font-size: 32px;
	color: #fff; /*#6a6965;*/
    transition: color .1s linear;
}

.modal-close:hover {
    color: #E5E4E4; /*#d80724;*/
}

@keyframes modal-backdrop-fade-in {
    0%      { opacity: 0; }
    100%    { opacity: 0.3; }
}

@keyframes modal-content-appear {
    0%      { transform: scale(.95) rotateX(5deg) translateY(10px); }
    100%    { transform: scale(1) rotateX(0) translateY(0); }
}