PetPet/Games/style.css

*{
    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;
    }
}