body {
    background-color: rgb(44 44 44 /1);
}

nav {
    text-align: center;
    a:link {
        color: rgb(255 255 255 /1);
        padding-top: 10px;
    }
    a:visited {
        color: rgb(255 255 255 /1);
    }
    a:hover {
        color: rgb(0 0 0 /1);
    }
    a {
        text-decoration: none;
        display: inline-block;
        margin-left: 125px;
        margin-right: 125px;
        font-family: "Inria Sans", sans-serif;
    }
}

header {
    text-align: center;
     font-family: "Inria Serif", serif;
    color: rgb(255 255 255 /1);
}

#gallery {
    margin-top: 50px;
    display: grid;
}

#gallery figure {
    padding: 0 0 1.2rem 0;
}
/* top, right, bottom left (order of zeros */

#gallery img{
    width: 100%;
    max-width: 400px;
    object-fit: cover;
    aspect-ratio: 16/9;
}

figcaption {
    width: 100%;
    text-align: center;
    font-size: 0.833rem;
    color: rgb(255, 255, 255);
    font-family: "Inria Sans", sans-serif;
} 

footer {
    text-align: center;
    color: rgb(255 255 255 /1);
    font-family: "Inria Sans", sans-serif;
}


/* #gallery figcaption{
    transform: translateY(-00.482rem);
}  <--- moves the element up on the Y axis */




/* modal styles */

dialog{
    position: fixed;
    top: 5vh;
    max-width: 100vw;
    max-height: 90vh;
    margin: 0 auto; /* centers it */
}

dialog::backdrop{
    background-color: rgb(0 0 0 /0.5);
}

dialog img{
    width: 100%;
    max-height: 50vh;
}


@media screen and (min-width: 500px) {
    #gallery {
        grid-template-columns: repeat(6, 1fr);
    }
}