/* Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");

.modal{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    background-color: #111111bd;
    display: flex;
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s .9s;
    --transform: translateY(-100vh);
    --transition: transform .8s;
}

.modal--show{
    opacity: 1;
    pointer-events: unset;
    transition: opacity .6s;
    --transform: translateY(0);
    --transition: transform .8s .8s;
}

.modal .modal__container{
    position: relative;
    margin: auto;
    width: 90vw;
    height: 75vh;
    *max-width: 600px;
    *max-height: 90%;
    background-color: #fff;
    border-radius: 15px;
    *padding: 1em ;
    display: grid;
    gap: 1em;
    place-items: center;
    grid-auto-columns: 100%;
    overflow: hidden;
    transform: var(--transform);
    transition:var(--transition);
}


.modal .modal__x{
    position: absolute;
    background-color: transparent;
    color: black;
    top: 15px;
    right: 15px;
    *border: 1px solid red;
}

.modal .modal__title{
    position: absolute;
    top: 0px;
    font-size: 2em;
    color: black;
    width:100%;  
    padding: 0.2em  0.2em  0 0.2em;
    text-shadow:  white 0.1em 0.1em 0.2em;
    padding-right: 50px;
    *border: 1px solid grey;
}

.modal .modal__body{
    position: absolute;
    *display:contents;
    display: flex;
    flex-direction: column;
    
    width: 100%;
    height: 100%;
    *justify-content: center;
    *align-items: center;
    *margin-bottom: 10px;
    color: black;
    *border: 2px solid red;
    *height: 60vh;
    padding: 10%;

}

.modal .modal__img{
    width: 90%;
    *max-width: 300px;
}

.modal .modal__footer{
    position: absolute;
    display: flex;
    bottom: 10px;
    right:10px;
    width:100%; 
    height: 3em; 

    align-items: center; 
    justify-content: flex-end; 
    *padding: 1em;

    *border: 1px solid grey;
}

.modal .modal__close, .modal .modal__aceptar{
    text-decoration: none;
    color: var(--text-color);
    background-color: var(--main-color);
    min-height: 30px;
    min-width: 70px;
    padding: 0.1em 0.3em;
    margin: 0.5em;
    border: none;
    border-radius: 0.3em;
    display: inline-block;
    text-align: center;
    *font-weight: 300;
    transition: background-color .3s;
}

.modal .modal__close:hover, .modal .modal__aceptar:hover{
    color: var(--text-color);
    background-color: var(--hover-color);
}


@media (max-width:800px) {


    .modal .modal__container{
        *padding: 2em 1.5em;
    }

    .modal .modal__title{
        font-size: 2rem;
    }
}