/* gradient-btn.css */
/*
@layer components {
    @property --btn-color-1 {
        syntax: '<color>';
        initial-value: #B04EFF;
        inherits: false;
    }

    @property --btn-color-2 {
        syntax: '<color>';
        initial-value: #C174FF;
        inherits: false;
    }
    
    
    .btn, form input[type="submit"]{
        display:flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border-radius:60px;
        padding:15px 30px;
        min-width: 180px;
        position:relative;

        background: radial-gradient(40% 100% at 50% 50%, var(--btn-color-2) 0%, var(--btn-color-1) 100%);
        transition: --btn-color-1 .3s, --btn-color-2 .3s;


        color:white;
        font-size:18px;
        line-height:18px;
        cursor:pointer;
        flex-shrink:0;
        border:none;
    }
    .btn:hover, form input[type="submit"]:hover{
        color:white;
        --btn-color-1: #C174FF;
        --btn-color-2: #C174FF;
        background: radial-gradient(40% 100% at 50% 50%, var(--btn-color-2) 0%, var(--btn-color-1) 100%);

    }
    .btn:active,  form input[type="submit"]:active{
        color:white;
        --btn-color-1: #991BFF;
        --btn-color-2: #991BFF;
        background: radial-gradient(40% 100% at 50% 50%, var(--btn-color-2) 0%, var(--btn-color-1) 100%);
    }
}
*/