*{ margin: 0; padding: 0; box-sizing: border-box; } body{ display: flex; justify-content: center; align-content: center; align-items: center; min-height: 100vh; background: #333; flex-wrap: wrap; position: relative; overflow: hidden; } .cash{ z-index: 69; position: absolute; left: 0; top: 0; background: #222222cc; padding: .5rem; border-radius: 0 0 1rem 0; display: flex; flex-direction: row; justify-content: space-evenly; align-items: center; color: #fff; } .cash img{ margin-right: .5rem; aspect-ratio: 1/1; object-fit: contain; } #blob{ z-index: 1; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 500px; height: 500px; background: #52fd30; pointer-events: none; clip-path: polygon(48% 2%, 60% 18%, 77% 10%, 86% 14%, 91% 30%, 82% 36%, 73% 41%, 81% 51%, 90% 55%, 94% 63%, 95% 82%, 94% 86%, 81% 94%, 65% 90%, 55% 82%, 45% 85%, 25% 100%, 23% 100%, 5% 92%, 1% 82%, 0% 70%, 6% 68%, 14% 61%, 19% 60%, 25% 61%, 29% 53%, 23% 48%, 12% 48%, 6% 34%, 6% 20%, 8% 12%, 16% 5%, 22% 13%, 26% 18%, 30% 13%, 34% 6%, 40% 3%); animation: rgb 5s linear infinite; transition: .15s; } #blob::before{ content: ''; position: absolute; top: 0; left: -50%; width: 50vw; height: 50vh; background: #0b7901; z-index: 2; filter: blur(150px); } #blur{ position: absolute; z-index: 2; min-height: 100vh; min-width: 100vw; backdrop-filter: blur(125px); } @keyframes rgb{ from { filter: hue-rotate(0deg); transform: translate(-50%, -50%) rotate(0deg) scaleX(1.5); } 50% { transform: translate(-50%, -50%) rotate(180deg) scaleX(.5); } to { filter: hue-rotate(360deg); transform: translate(-50%, -50%) rotate(360deg) scaleX(1.5); } } #home{ z-index: 69; position: fixed; right: 0; bottom: 0; height: 50px; width: 50px; border-radius: 25px 0 0 0; background: #555; } .game{ z-index: 5; display: flex; justify-content: center; align-items: center; width: 200px; height: 150px; border-radius: 10px; margin: 1rem; overflow: hidden; box-shadow: inset 2.5px 2.5px 7.5px #aaaaaacc, 5px 5px 15px #555; } .game img{ transition: .5s; width: 200px; height: 150px; } .game:hover img{ transition: .25s; transform: scale(1.25); rotate: 5deg; } @media screen and (max-width: 500px){ body{ overflow: auto; } #blob{ display: none; } }