body {
    background-color: black;
    height: 100vh;
    overflow-x: hidden;
}

* {
    cursor: url('images/cursor.png'), auto;
    user-select: none;
}

#image_wrapper {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

img {
    width: auto;
    max-height: 15em;
    margin: 1em;
    border-radius: 0.5em;
    transition: transform 0.5s;
    filter: grayscale(100%);
}

img:hover {
    transform: scale(1.3);
    transition: transform 0.5s;
    animation: infinite 1s linear;
    animation-name: imageRGB;
    z-index: 1;
}

footer {
    color: violet;
    text-align: center;
    font-size: 5em;
    font-family: 'Sassy Frass';
    animation: infinite 1s linear;
    animation-name: textRGB;
}

@keyframes textRGB {
    0% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-1%);
    }
    75% {
        transform: translateX(1%);
    }
    100% {
        transform: translateX(0);
    }

}

@keyframes imageRGB {
    from {
        filter: hue-rotate(0deg);
    }
    to {
        filter: hue-rotate(360deg);
    }
}