.modal {
width: 100%;
height: 200%;
background: rgba(0,0,0,0.8);

position: absolute;
top:0;
left: 0;

display: flex;

animation: modal 1s 1s forwards;
visibility: hidden;
opacity: 0;
}

.contenido {
text-aling: center;
margin: auto;
width: 40%;
height: 70%;
background: white;
border-radius:10px
}

#cerrar {
display: none;
}

#cerrar + label {
position: fixed;
color: #fff;
font-size: 25px;
z-index: 50;
background: darkred;
height: 30px;
width: 30px;
line-height: 30px;
border-radius: 50%;
right: 15px;
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;
}
}