body
    {
        margin: 0;
        background-color: rgb(34, 34, 34);
        color:rgb(255, 255, 255);
        font-family: "adobe-caslon-pro-light", serif;
    }

.greybox
    {
        border-top: 2px solid;
        border-bottom: 2px solid;
        background-color: rgb(101, 101, 101);
        margin: 0px;
        padding: 1% 2%;

    }

.photogrid
    {
        margin:0%;
        justify-content: center;
    }

.photogrid ul
    {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        list-style: none;
    }
    
.photogrid img
    {
        width: 100%;
        display: block;
    }

h1
    {
        text-align: center;
    }

hr
    {
        color: black;
    }

.container
    {
        position:relative;
    }

.text
    {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.589);
        opacity: 0;
        transition: opacity 0.3s;
    }

.container:hover .text
    {
        opacity: 1;
    }