/* styling for art.html */

#gallery details {
    padding-left: 2rem;
}

.monthContents {
    display: flex;
    flex-wrap: wrap;
    flex-basis: content;
}

.monthContents,
#gallery details details {
    border: solid #291814 0px;
    border-left-width: 1px;
    padding-left: 2rem;
}

#gallery a {
    width: fit-content;
    height: 10vh;
    display: flex;
    text-decoration: none;
    overflow: hidden;

    padding: none;
    padding-right: 1rem;
}

#gallery a img {
    max-height: 100%;
    vertical-align: middle;
    margin: 0;
}

#gallery a p {
    margin: 0;
    max-width: fit-content;
    display: none;
    position: absolute;
    color: #fff1e8;
    background-color: #291814;
}


#gallery a:hover p {
    display: inherit;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (prefers-color-scheme: dark) {

    .monthContents,
    #gallery details details {
        border-color: #fff1e8;
    }
}

/* styling for da gallery modal */

dialog {
    border: none;
    background-color: #fff1e8;
    color: #291814;
    max-width: 100vh;
    overflow: visible;
}

dialog::backdrop {
    background-color: #00000000;
    background-image: url("/images/backgrounds/modal_bg.png");
}

dialog img {
    margin: auto;
    max-height: 50vh;
}

#gallery-modal h1,
#gallery-modal p {
    margin-top: 0px;
}

#modal-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: auto;
}

#modal-header button {
    justify-self: end;
    align-self: baseline;
}

@media (prefers-color-scheme: dark) {
    dialog {
        background-color: #000000;
        color: #fff1e8;
    }
}

/* grid stuff */


#gallery-modal {
    display: grid;
    column-gap: 1rem;
    grid-template-areas:
        "header txt"
        "image txt"
    ;
}

#modal-left {
    grid-area: image;
}

#modal-header {
    grid-area: header;
}

#modal-right {
    grid-area: txt;
}

/* when screen is taller than it is wide, switch to mobile layout */

@media (max-aspect-ratio:1/1) {
    #gallery-modal {
        grid-template-areas:
            "header"
            "image"
            "txt"
        ;
    }
}