/*Selectores desarrollados por M. en C. Ángel Salvador López Vásquez*/

body{
   /* text-align: center;
    font-family: sans-serif;*/
}
.modal{
    width: 100%;
    height: 100vh; /*alto del viewport*/
    background:rgba(0, 0, 0, 0.8);
    /*background-color:rgb(5, 2, 2);*/
    position:relative; /*el original es absolute*/
    top:0;
    left:0;
    display: flex;
    /*Animaciones*/
    animation:modal 2s 1s forwards; 
   /* animation:modal 2s; /*V a durar 2 segundos*/
    
  /*  animation-delay:3s;
        /*Después de cuanto tiempo de que se cargó la página la animación inicia*/
  /*  animation-fill-mode:forwards; /*Esta propiedad le decimos al elemento que se quede cuando termine la animación*/
    visibility:hidden; /*La viisibilidad es esconderse*/
    opacity:0;
    
    /*deshabilita el scroll */
    /*overflow-y: scroll; 
    overflow-x: hidden;*/
}

.contenidomodal{
    margin: auto;
    width: 70%;
    height: 50%;
    background:rgba(0, 0, 0, 0.8);
    border-radius:10px;
    margin:0 auto;
    margin-top: 5%;
}


#cerrar{
    display:none;
}

/*El símbolo "+" me selecciona el elemento que está inmediatamente después de cerrar*/
#cerrar + label{
    position:fixed;
    color:white;
    font-size: 20px;
    z-index:50; /*Por encima del modal o por delante*/
    background: darkred;
    height: 45px;
    width: 45px;
    line-height: 40px;
    border-radius:50%;
    right: 10px;
    cursor:pointer;
    text-align: center;
    margin-top:5px;;
    
    
    /*Animaciones*/
    animation:modal 2s 1s forwards; /*V a durar 2 segundos*/
   /* animation-delay:3s;
        /*Después de cuanto tiempo de que se cargó la página la animación inicia*/
    /*  animation-fill-mode:forwards; /*Esta propiedad le decimos al elemento que se quede cuando termine la animación*/
    visibility:hidden; /*La viisibilidad es esconderse*/
    opacity:0;
}

#cerrar:checked + label, #cerrar:checked ~ .modal {
    display:none;
    /*Cuando cerrar tenga el checked va a seleccionar al checked y va a seleccionar a la clase modal "este simbolo es para seleccionar ~"*/
}

@keyframes modal{
    /*cuando llegue al 100% va a ser visible*/
    100%{
        visibility: visible;
        opacity:1;
    }
}