#details-activity{
    position: fixed;
    display: none;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 100vh;
    height: 100dvh;
    width: 100%;
    background-color: rgb(0,0,0,.5);
    z-index: 5;

    & .window{
        position: relative;
        display: flex;
        flex-direction: row;
        height: 500px;
        width: 800px;
        background-color: var(--back);
        border-radius: 10px;
        overflow: hidden;

        
        
        & .img-activity{
            position: relative;
            height: 100%;
            aspect-ratio: 1/1;

            & #register-buttons{
                position: absolute;
                display: flex;
                flex-direction: row;
                gap: 5px;
                left: 15px;
                bottom: 15px;
                z-index: 1;
            }

            & img{
                height: 100%;
                width: 100%;
                object-fit: contain;
            }

            
        }

        & .info{
            display: flex;
            flex-direction: column;
            padding: 15px;
            flex-grow: 1;
            overflow: hidden;
            
            & .name{
                color: var(--first) ;
                font-size: large;
            }
            & .details{
                max-height: 220px;
                overflow-y: scroll;
                overflow-x: hidden;
                text-wrap: balance;
            font-family: 'Open Sans';
            font-size: medium;
            }

            & .time-cont{
                display: flex;
                flex-direction: column;

                & .time{
                    color: var(--first);
                }
            }

            & .url{
                text-overflow: ellipsis;
                word-break: break-all;
                text-wrap: pretty;
            }

            & .seeMore{
                display: flex;
                justify-content: flex-end;
                color: var(--first);
                margin-top: auto;
                width: 100%;
            }

        }
    }
}  



@media only screen and (max-width: 800px){
    #details-activity{
        & .window{
            width: 100%;
            border-radius: 0;

            & .img-activity{
                aspect-ratio: 3/5;
            }
        } 
    }
}

@media only screen and (max-width: 600px){
    #details-activity{
        & .window{
            flex-direction: column;
            height: 80%;
            width: 70%;
            border-radius: 10px;

            & .img-activity{
                height: 30%;
                aspect-ratio: 3/5;
            }

            & #btn-cerrar{
                z-index: 2;
            }
        }
    }
}

@media only screen and (max-width: 600px){
    #details-activity{
        & .window{
            flex-direction: column;
            height: 90%;
            width: 100%;
            border-radius: 0;
        }
    }
}