body {
    min-height: 100dvh;
    display: grid;
    place-content: center;
    gap:1em;
    padding:1em;
    width:7.5em;
    font-size: 10vmin;
	margin:0;
	--bgColor:#B55690;
	background-color:var(--bgColor);
    animation:6s infinite fadebg;
    box-sizing: border-box;
    margin:auto;
}
img {
    border-radius: 1em;
    width: 100%;
}
button {
    --gradient: #D52D00, #EF7627, #FF9A56, #fff, #D162A4, #B55690, #A30262;
    background: linear-gradient(90deg,
            var(--gradient), var(--gradient), var(--gradient));
    background-size: 600%;
    outline: 0;
    font-size:inherit;
    padding: .2em .5em;
    border-radius: .2em;
    border: none;
    color: #dfa0c6;
    opacity: 1;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    animation: scrollbg linear 6s infinite;
    transition: .1s ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    font-family:monospace;
    font-weight:bold;

    &:hover {
        color: #fff;
        animation: scrollbg linear 6s infinite, dundundun linear 1.3s infinite;
        &:after {
            opacity: 1;
        }
    }

    &:active {
        color: #fff;
        animation: scrollbg linear .5s infinite;
        filter: saturate(1);
        transform: scale(1.1);
        &:before {
            opacity: .8;
        }
        &:after {
            opacity: 1;
            filter: blur(48px);
        }
    }

    &:before {
        background-color: var(--bgColor);
        animation:6s infinite fadebg;
        content: '';
        position: absolute;
        left: .1em;
        top: .1em;
        width: calc(100% - .2em);
        height: calc(100% - .2em);
        border-radius: .1em;
        z-index: -1;
    }

    &:after {
        background: inherit;
        content: '';
        position: absolute;
        left: .2em;
        top: .2em;
        width: calc(100% - .4em);
        height: calc(100% - .4em);
        filter: blur(32px);
        opacity: 0;
        border-radius: .1em;
        z-index: -2;
    }
}

@keyframes scrollbg {
    0% {
        background-position: 33.333333333333333% 0%;
    }

    100% {
        background-position: 75% 0%;
    }
}

@keyframes fadebg {
  0%,100% {
    background-color:#B55690
  }
  50% {
    background-color:#A30262
  }
}

@keyframes dundundun {
    0% {
        transform: scale(1.05) rotate(1deg);
    }

    50% {
        transform: scale(1.0);
    }

    50.01% {
        transform: scale(1.05) rotate(-1deg);
    }

    100% {
        transform: scale(1.0);
    }
}