body{
    font-family: "Outfit";
    background: url("images/ArtGalleryBG.jpg");
    background-position: cover;
    color:rgb(255, 255, 255);
}
.heading {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    animation: slideIn both;
    animation-duration: 700ms;
    color: #fff;
}
@keyframes slideIn {
    from{
        transform: translateY(-100%);
        scale: 0.5;
    }
    to{
        transform: translateY(0%);
        scale: 1;
    }
}
h1{
    font-size: 110px;
    text-shadow: 2px 2px 2px #fff;
}
.images, .images2 {
    display: flex;
    justify-content: space-between;
}
.img {
    padding: 2em;
    margin: 70px;
    height: 600px;
    background: transparent;
    backdrop-filter: blur(50px);
    cursor: pointer;
    --gap: 20px;
    gap: var(--gap);
}
.img:hover{
    scale: 1.01;
    backdrop-filter: none;
    transition: all 700ms;  
}
.img img {
    margin: 20px;
    width: 400px;
    height: 400px;
}
.img, .img img {
    border-radius: 5%;  
}
.slideUp {
    animation: slideUp;
    animation-duration: 700ms;
}
@keyframes slideUp {
    from{
        transform: translateY(100%);
        scale: 0.5;
    }
    to{
        transform: translateY(0%);
        scale: 1;
    }
}
.images .img {
    animation: scrollR 15s linear infinite;
}
@keyframes scrollR {
    from{
        transform: translateX(-500%);
    }
    to{
        transform: translateX(0);
    }
}
.images2 .img {
    animation: scroll 15s linear infinite;
}
@keyframes scroll {
    to{
        transform: translateX(calc(-500% - var(--gap)));
    }
}
.images2 .img {
    animation-delay: 500ms;
}
.images{
    overflow-x: hidden;
    overflow-y: hidden;
}
.images2{
    overflow-x: hidden;
    overflow-y: hidden;
}