.galleryTile {
        width: 260px;
        height: 260px;
        margin: 10px;
        display: flex;
        overflow: hidden;
        justify-content: center;
        align-items: center;
    }
    
    .galleryTile:hover {
        cursor: pointer;
    }
    
    div.galleryTile>img {
        object-fit: cover;
        min-height: 260px;
        min-width: 260px;
        flex-shrink: 1;
        align-self: center;
        animation-name: fadeout;
        animation-duration: 0.4s;
    }
    
    @keyframes fadein {
        from {
            min-height: 260px;
            min-width: 260px;
        }
        to {
            min-height: 300px;
            min-width: 300px;
        }
    }
    
    @keyframes fadeout {
        from {
            min-height: 300px;
            min-width: 300px;
        }
        to {
            min-height: 260px;
            min-width: 260px;
        }
    }
    
    @keyframes fadeinLarge {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
    
    @keyframes fadeoutLarge {
        from {
            opacity: 1;
        }
        to {
            opacity: 0;
        }
    }
    
    div#gallery>div.galleryTile:hover>img {
        animation-name: fadein;
        animation-duration: 0.4s;
        min-height: 300px;
        min-width: 300px;
    }
    
    div#gallery {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    div#imageLarge {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #000000AA;
        z-index: 10;
    }
    
    div#imageLarge.fadein {
        display: flex;
        animation-name: fadeinLarge;
        animation-duration: 0.25s;
    }
    
    div#imageLarge.fadeout {
        display: none;
    }
    
    img#imageLargeImg {
        position: relative;
        max-width: 100%;
        max-height: 100%;
        flex-shrink: 1;
        z-index: 11;
        cursor: pointer;
    }
    
    div#imageLargeImgContainer {
        position: relative;
        height: calc(100% - 50px);
        width: calc(100% - 50px);
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    #imageLargeLeft {
        height: 100%;
        width: 25%;
        position: absolute;
        left: 0px;
        z-index: 20;
        display: flex;
        align-items: center;
        justify-content: left;
    }

    #imageLargeRight {
        height: 100%;
        width: 25%;
        position: absolute;
        right: 0px;
        z-index: 20;
        display: flex;
        align-items: center;
        justify-content: right;
    }

    .chevronLeft {
        background-color: #006666FF;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 13.1l-8-8 2.1-2.2 5.9 5.9 5.9-5.9 2.1 2.2z'/%3E%3C/svg%3E");
        height: 10vw;
        width: 10vw;
        transform: rotate(90deg) ;
    }

    .chevronRight {
        background-color: #006666FF;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 13.1l-8-8 2.1-2.2 5.9 5.9 5.9-5.9 2.1 2.2z'/%3E%3C/svg%3E");
        height: 10vw;
        width: 10vw;
        transform: rotate(-90deg);
    }