body {
  text-align: center;
  font-family: sans-serif;
  margin: 0;
  }

.modal{
   width: 100%;
   height: 100vh;
   background: rgb(0,0,0,0.8);
   
   position: absolute;
   top: 0%;
   left: 0;

   display: flex;


animation: modal 2s 3s forwards;
visibility: hidden;
opacity: 0;


}

.contenido {
    margin: auto;
    width: 40%;
    height: 40%;

    position:absolute;
    border-radius: 10px;
}



#cerrar {
   display: none;

}

#cerrar + label{
 position: absolute;
 color: #fff;
 font-size: 25px;
 z-index: 50;
 background: darkred;
 width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
right: 10px;
cursor: pointer;

animation: modal 2s 3s forwards;
visibility: hidden;
opacity: 0;

}

#cerrar:checked + label, #cerrar:checked ~ .modal{
display: none;
}
@keyframes modal {
100%{
visibility: visible;
opacity: 1;
}
}