*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    position: relative;
    width: 100%;
    height: 100vh;
}

.main {
    display: grid;
    height: 100%;
    place-items: center;
}

.hypnotoad {
    width: 100%;
    max-width: 500px;
    z-index: 1;
}

.carpet {
    position: absolute;
    width: 100%;
    max-width: 750px;
    transform: translateY(-5%);
}

html {
    --s: 56px; /* control the size*/
    --c1: #3fb8af;
    --c2: #ff9e9d;

    --_c1: var(--c1) 99%,#0000 101%;
    --_c2: var(--c2) 99%,#0000 101%;

    --r:calc(var(--s)*.866);
    --g0:radial-gradient(var(--s),var(--_c1));
    --g1:radial-gradient(var(--s),var(--_c2));
    --f:radial-gradient(var(--s) at calc(100% + var(--r)) 50%,var(--_c1));
    --p:radial-gradient(var(--s) at 100% 50%,var(--_c2));
    background:
            var(--f) 0 calc(-5*var(--s)/2),
            var(--f) calc(-2*var(--r)) calc(var(--s)/2),
            var(--p) 0 calc(-2*var(--s)),
            var(--g0) var(--r) calc(-5*var(--s)/2),
            var(--g1) var(--r) calc( 5*var(--s)/2),
            radial-gradient(var(--s) at 100% 100%,var(--_c1)) 0 calc(-1*var(--s)),
            radial-gradient(var(--s) at 0%   50% ,var(--_c1)) 0 calc(-4*var(--s)),
            var(--g1) calc(-1*var(--r)) calc(-7*var(--s)/2),
            var(--g0) calc(-1*var(--r)) calc(-5*var(--s)/2),
            var(--p) calc(-2*var(--r)) var(--s),
            var(--g0) calc(-1*var(--r)) calc(var(--s)/ 2),
            var(--g1) calc(-1*var(--r)) calc(var(--s)/-2),
            var(--g0) 0 calc(-1*var(--s)),
            var(--g1) var(--r) calc(var(--s)/-2),
            var(--g0) var(--r) calc(var(--s)/ 2)
            var(--c2);
    background-size: calc(4*var(--r)) calc(6*var(--s));
}