@import "https://unpkg.com/open-props@1.6.17/easings.min.css";

@keyframes pulse {
    50% {
        transform: scale(1.5);
    }
}

[anim="pulse"]:not(.toggled) {
    animation: pulse var(--ease-elastic-in-1) 400ms infinite alternate;
}


[anim="fill"]::after {
    content: "";
    color: var(--black);
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.75rem;
    height: 100%;
    width: 200%;
    inset: 0;
    transform: translateX(-400px);
    background-color: hsl(12, 90%, 63%);
}



:root {
    --black: hsl(0, 0%, 13%);
    --dark: hsl(12, 32%, 2%);
    --gray: hsl(0, 0%, 70%);
    --white: hsl(0, 0%, 96%);
    --red: hsl(12, 90%, 63%);
    --red-shadow: hsl(12, 100%, 60%);
    --red-sheen: linear-gradient(to bottom,
            hsl(12, 90%, 43%),
            hsla(12, 40%, 70%, 0.5) 50%,
            hsl(12, 93%, 23%));
}





.anim_btn {
    color: var(--white);
    font-family: "aglet-mono-variable", sans-serif;
    font-variation-settings: "wght" 400;
}

* {
    font-family: inherit;
    box-sizing: border-box;
}

button {
    all: unset;
    background-color: var(--black);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid var(--red);
    box-shadow: 0 0 4px var(--red-shadow);
    cursor: pointer;
    perspective: 1000px;
    position: relative;
    overflow: hidden;
}
#anim_btn{
    color: #fff;
}
.blurry {
    position: relative;
    transform-style: preserve-3d;
}

.blurry::before {
    content: "";
    position: absolute;
    inset: 0px;
    transform: translate3d(0px, 0px, -1px);
    background: var(--red-shadow);
    filter: blur(6px);
}