body{
    margin: 0;
    padding: 0;
}

    
    nav{
        position: fixed;
        background-color: lightgray;
        border-bottom: 2px black solid;
        top: 0;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .logo{

        font-size: 1.5em;
        font-weight: bold;
        font-family: Arial, Helvetica, sans-serif;
        margin: 0.5rem 0 0.5rem 0.7rem;
    }

    .navigation-links{

        list-style-type: none;

    }

    .navigation-links li{

        float: left;
        margin-right: 3rem;
    }
 
    #images{

        display: grid;
        grid-template-columns: 1fr;
        row-gap: 1em;
        padding: 2rem;
        margin-top: 5rem;
    }

    .loading{
        background-color: lightgrey;
        overflow: hidden;
        height: 30vh;
        border-radius: 0.4rem;
        box-shadow: 3px 0 8px rgba(0,0,0, 0.6);
    }

    .loading img{

        object-fit: cover;
        object-position: center;
        width: 100%;
        height: 100%; 
        border-radius: 0.4rem;
    }


@media (min-width: 481px) and (max-width: 820px) {

    #images{
        grid-template-columns: 1fr 1fr;
        column-gap: 2rem;
        row-gap: 2rem;
    }
    
}

@media (min-width: 821px) {
    
    .loading{
        height: 35vh;
    }
    
    #images{

        margin: 6em 8em;
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 2em;
        row-gap: 1.5em;
    }
    
    
}