button.lightbox-caller-wrapper {
    padding: 0;
    margin: 0;
    border-style: none;

    background-color: transparent;

    transition: all 0.1s;

    &:hover {
        transform: scale(98%);
    }
}

div.lightbox {
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;

    display: none;

    grid-template-rows: 5fr 1fr;
    grid-template-areas:
        "main"
        "thumbnails";

    justify-items: center;
    align-items: center;


    box-sizing: border-box;
    padding: 3em;

    width: 100%;
    height: 100%;

    background-color: black;


    #lightbox-exit-button {
        position: fixed;
        top: 1em;
        right: 1em;

        width: 1em;
        height: 1em;
        color: var(--line-color);
        background-color: transparent;
        border-style: none;

        font-size: 2em;

        &:hover {
            color: var(--link-hover-color);
        }
    }

    #lightbox-previous-button {
        position: fixed;
        left: 5%;

        width: 1em;
        height: 1em;
        color: var(--line-color);
        background-color: transparent;
        border-style: none;

        font-size: 3em;

        transition: all 0.1s;

        &:hover {
            color: var(--link-hover-color);
        }
    }
    
    #lightbox-next-button {
        position: fixed;
        right: 5%;

        width: 1em;
        height: 1em;
        color: var(--line-color);
        background-color: transparent;
        border-style: none;

        font-size: 3em;

        &:hover {
            color: var(--link-hover-color);
        }
    }

    #lightbox-main-display {
        grid-area: main;

        max-width: 65vw;
        max-height: 65vh;

        width: auto;
        height: auto;

        object-fit: scale-down;
    }

    #lightbox-thumbnails {
        grid-area: thumbnails;
        
        display: flex;
        flex-direction: row;
        align-items: start;
        margin: 1%;
        
        min-width: 0;
        min-height: 0;

        height: 100%;

        >.lightbox-thumbnail {
            border-style: none;
            background-color: transparent;

            height: 100%;

            filter: brightness(60%);

            transition: all 0.2s;

            &.highlighted-thumbnail {
                blah-blah-blah
            }

            >img {
                box-sizing: border-box;

                border-style: solid;
                border-color: transparent;
                max-width: 100%;
                max-height: 100%;
                object-fit:scale-down;
            }

            &:hover {
                transform: scale(98%);
                filter: brightness(80%);
               
                img {
                    border-style: solid;
                    border-color: var(--link-hover-color);

                }
            }
        }
    }
}