@keyframes fade-in{
    0%{
        opacity: 0;
    }

    100%{
        opacity: 1;
    }
}

.lightbox{

    display:none;
    flex-direction:column;
    flex-wrap:nowrap;
    justify-content:center;
    align-items:center;

    position: absolute;

    z-index: 10;
    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    background: rgba(0, 20, 87, 0.548);

    animation-name: fade-in;
    animation-timing-function:ease-in;
    animation-duration: 1s;
    animation-fill-mode:forwards;



}

#lightbox-img{

    margin-bottom: 1em;

    max-width: 90%;
    max-height: 90%;

    width:fit-content;
    height:fit-content;

    object-fit: contain;
}

#imgDesc{

    padding: 4px;

    font-family:"text-font";
    font-size:1em;

    background: rgba(2, 12, 44, 0.753);
    color: var(--accent-color1);
    text-shadow: 1px 0px 5px var(--accent-color1);

}