.modal_p {margin: 5px;}

/* Кнопка для открытия */
.css-modal-open {
    display: inline-flex;
    text-decoration: none;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    z-index: 1;    
}
.css-modal-open:hover,
.css-modal-open:active,
.css-modal-open:focus {
    color: red;
}

a.css-modal-open {text-decoration: none; border-bottom: 1px dotted #363535; color: #363535; transition: color 0.7s ease; cursor: help;}

a.css-modal-open:hover {padding-bottom: 1px; text-decoration:none; border-bottom: none; color: #363535; transition: color 0.7s ease;}
 
/* Контейнер, который затемняет страницу */
.css-modal-target {
    display: none;
}
.css-modal-target:target {
    display:flex;
    align-items:center;
    justify-content:center;    
    z-index: 4;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    animation: bg 0.5s ease;
    background: rgba(66, 170, 255, 0.5);
}
 
/* Модальное окно */
.css-modal-target .cmt {
    padding: 5px;
    color: black;
    width: 80%;
    z-index: 11;
    max-width: 600px;
    max-height: 70%;
    transition: 0.5s;
    border: 6px solid #BFE2FF;
    border-radius: 12px;
    background: white;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
    text-align: justify;
    overflow: auto;
    animation: scale 0.5s ease;
}
 
/* Кнопка с крестиком закрывающая окно */
.css-modal-close {
    position: relative;
    display: block;
}
.css-modal-close:after {
    content: "";
    width: 50px;
    height: 50px;
    border: 6px solid #BFE2FF;
    border-radius: 12px;
    position: fixed;
    z-index: 10;
    top: 50px;
    right: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23337AB7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");
    background-color: #FFF;
    background-size: cover;
    animation: move 0.5s ease;
}
.css-modal-close:before {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    content: "";
    cursor: default;
}
 
/* Анимации */
@keyframes scale {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes move {
    0% {
        right: -80px;
    }
    100% {
        right: 20px;
    }
}
@keyframes bg {
    0% {
        background: rgba(66, 170, 255, 0);
    }
    100% {
        background: rgba(66, 170, 255, 0.5);
    }
}