.modal{
    width: 100%;
    height: 100vh;
    position: fixed;
    background: rgba(0,0,0,0.8);
    top:50%;
    justify-content:center;
    align-items:center;
    left:50%;
    display: flex;
    animation: modal 1s 1s forwards;
    z-index: 2;
    visibility:hidden;
    opacity: 0;
}
.contenido {
    width: 50%;
    padding: 10em 25em 0em 0em;
    margin: auto;
    height: 30%;
    background: rgb(255 255 255 / 0,00);
    border-radius: 10px;
    z-index:3;
}
#cerrar{
    display:none;
}
    #cerrar + label {
        position: fixed;
        color: #FF000080;
        font-size: 25px;
        z-index: 50;
        background: darkred;
        height: 40px;
        width: 40px;
        line-height: 40px;
        border-radius: 50%;
        right: 10px;
        cursor: pointer;
        animation: modal 1s 1s forwards;
        visibility: hidden;
        opacity: 0;
    }
#cerrar:checked + label, #cerrar:checked ~ .modal{
    display: none;
}  
    @keyframes modal{
        100%{ 
            visibility: visible;
            opacity: 1;
        }
    }