* { box-sizing: border-box; } body { margin: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; width: 100%; height: 100vh; background: black; } #jackOcontainer { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } #jackOcontainer #jackOlantern { height: 90vmin; min-height: 100px; filter: url(#displacementFilter); } .fillColor_1 { fill: #df6a13; } .fillColor_2 { fill: #d86b27; } .fillColor_3 { fill: #f87b21; } .fillColor_4 { fill: #ea7321; } .fillColor_5 { fill: #a45016; } .fillColor_6 { fill: #fe994b; } .fillColor_7 { fill: #fefe82; } .fillColor_8 { fill: #eb7b34; } .fillColor_9 { fill: #cf6414; } .fillColor_10 { fill: #574429; } .fillColor_11 { fill: #bf5c17; } .fillColor_12 { fill: #fed739; } .fillColor_13 { fill: #fa8536; } .fillColor_14 { fill: #fefe66; } .fillColor_15 { fill: #fefefe; } #Glow, #Pumpkin { filter: hue-rotate(0deg) saturate(120%) contrast(120%); animation: colorCycle 7s ease-in-out infinite; } #Pumpkin { animation-direction: reverse; } @keyframes colorCycle { to { filter: hue-rotate(360deg) saturate(120%) contrast(120%); } }