.container {
    width: 100%;
    height: 100%;
    /* background: radial-gradient(125% 125% at -2% 101%,
            rgba(245, 87, 2, 1) 10.5%,
            rgba(245, 120, 2, 1) 16%,
            rgba(245, 140, 2, 1) 17.5%,
            rgba(245, 170, 100, 1) 25%,
            rgba(238, 174, 202, 1) 40%,
            rgba(202, 179, 214, 1) 65%,
            rgba(148, 201, 233, 1) 100%); */
}

.button-shadow {
    --shadow-cuttoff-fix: 2em;
    position: absolute;
    width: calc(100% + var(--shadow-cuttoff-fix));
    height: calc(100% + var(--shadow-cuttoff-fix));
    top: calc(0% - var(--shadow-cuttoff-fix) / 2);
    left: calc(0% - var(--shadow-cuttoff-fix) / 2);
    filter: blur(clamp(2px, 0.125em, 12px));
    -webkit-filter: blur(clamp(2px, 0.125em, 12px));
    -moz-filter: blur(clamp(2px, 0.125em, 12px));
    -ms-filter: blur(clamp(2px, 0.125em, 12px));
    overflow: visible;
    pointer-events: none;
}

.button-shadow::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    border-radius: 999vw;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));
    width: calc(100% - var(--shadow-cuttoff-fix) - 0.25em);
    height: calc(100% - var(--shadow-cuttoff-fix) - 0.25em);
    top: calc(var(--shadow-cuttoff-fix) - 0.5em);
    left: calc(var(--shadow-cuttoff-fix) - 0.875em);
    padding: 0.125em;
    box-sizing: border-box;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    transition: all var(--anim--hover-time) var(--anim--hover-ease);
    overflow: visible;
    opacity: 1;
}

.button-wrap {
    position: relative;
    z-index: 2;
    background: transparent;
    transition: all var(--anim--hover-time) var(--anim--hover-ease);
}