#blur {
    position: relative;
    width: 100%;
    height: 100vh;
    background: url(../../media/media/ichika1.jpeg);
    /* background-size: 100%; */
    background-size: cover;
    /* <------ */
    background-repeat: no-repeat;
    background-position: center center;
}

#blur:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../../media/media/ichika1.jpeg);
    /* background-size: 100%; */
    background-size: cover;
    /* <------ */
    background-repeat: no-repeat;
    background-position: center center;
    opacity: .5;
    mix-blend-mode: hard-light;
}

#blur:hover:before {
    animation: animate 0.5s linear infinite;
}

@keyframes animate {
    0% {
        background-position: 0 0;
        filter: hue-rotate(0deg);
    }

    10% {
        background-position: 1px 0;
    }

    /* 20% {
        background-position: -2px 0;
    } */
    /* 30% {
        background-position: 4px 0;
    } */
    40% {
        background-position: -1px 0;
    }

    /* 50% {
        background-position: -3px 0;
    } */
    /* 60% {
        background-position: -1px 0;
    } */
    70% {
        background-position: 0 -1px;
    }

    80% {
        background-position: -1px -1px;
    }

    /* 81% {
        background-position: 0 0;
    } */
    100% {
        background-position: 0 0;
        filter: hue-rotate(360deg);
    }
}


.xelementToFadeInAndOut {
    opacity: 1;
    animation: xxxfade 2.8s ease-in-out infinite;
    /* filter: brightness(90%); */
}


@keyframes xxxfade {
    0%, 100% {
        opacity: 0.44
    }

    50% {
        opacity: 0.5;
        filter: contrast(180%)
    }
}