body {
  margin: 0;
  background-color: #333;
}

/* centering container */
.container {
   display: flex;
   justify-content: center;
   align-items: center;
}

@keyframes colorcyc {
  0%   {filter: invert(0%)  sepia(0%)  saturate(0%)    hue-rotate(0deg)   brightness(100%) contrast(100%);)}
  50%  {filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(360deg) brightness(100%) contrast(100%);)}
  100% {filter: invert(0%)  sepia(0%)  saturate(0%)    hue-rotate(0deg)   brightness(100%) contrast(100%);)}
}

img.recolor {

    width: 61.803398875%;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    animation-name: colorcyc;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;

}