.btn-primary {
    border-radius: 14px;
    background-image: linear-gradient(to right,var(--tw-gradient-stops));
    --tw-gradient-from: #7b5cff var(--tw-gradient-from-position);
    --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to);
    --tw-gradient-to: #7b5cff00 var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from),#7b5cff var(--tw-gradient-via-position),var(--tw-gradient-to);
    --tw-gradient-to: #9c8bff var(--tw-gradient-to-position);
    background-size: 200% 200%;
    padding: .75rem 1.25rem;
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity));
    transition-property: background-position,transform,box-shadow;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .3s
}

@keyframes gradient-x {
    0%,to {
        background-position: 0 50%
    }

    50% {
        background-position: 100% 50%
    }
}

.btn-primary:hover {
    animation: gradient-x 6s ease infinite;
    --tw-shadow: 0 8px 24px #00000014;
    --tw-shadow-colored: 0 8px 24px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)
}

@keyframes press {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(.98)
    }

    to {
        transform: scale(1)
    }
}

.btn-primary:active {
    animation: press .16s ease-out
}

.btn-google {
    border-radius: 14px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(224 224 224/var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgb(30 30 47/var(--tw-text-opacity));
    transition-property: all;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .2s
}

    .btn-google:hover {
        --tw-shadow: 0 8px 24px #00000014;
        --tw-shadow-colored: 0 8px 24px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)
    }

    .btn-google:focus-visible {
        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
        box-shadow: var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);
        --tw-ring-opacity: 1;
        --tw-ring-color: rgb(123 92 255/var(--tw-ring-opacity));
        --tw-ring-offset-width: 2px
    }

.input-primary {
    border-radius: 14px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    --tw-shadow: inset 0 2px 6px #0000000a;
    --tw-shadow-colored: inset 0 2px 6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(224 224 224/var(--tw-ring-opacity));
    transition-property: all;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .2s
}

    .input-primary::-moz-placeholder {
        --tw-text-opacity: 1;
        color: rgb(95 106 125/var(--tw-text-opacity))
    }

    .input-primary::placeholder {
        --tw-text-opacity: 1;
        color: rgb(95 106 125/var(--tw-text-opacity))
    }

    .input-primary:focus {
        --tw-border-opacity: 1;
        border-color: rgb(123 92 255/var(--tw-border-opacity));
        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
        box-shadow: var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);
        --tw-ring-opacity: 1;
        --tw-ring-color: rgb(123 92 255/var(--tw-ring-opacity))
    }

.card-auth {
    border-radius: 20px;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity));
    padding: 1.5rem;
    --tw-shadow: 0 8px 24px #00000014;
    --tw-shadow-colored: 0 8px 24px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)
}

@media (min-width:768px) {
    .card-auth {
        padding: 2.5rem;
        --tw-shadow: 8px 8px 20px #a3b1c699,-8px -8px 20px #ffffffe6;
        --tw-shadow-colored: 8px 8px 20px var(--tw-shadow-color),-8px -8px 20px var(--tw-shadow-color);
        box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)
    }
}

.text-gradient {
    background-image: linear-gradient(to right,var(--tw-gradient-stops));
    --tw-gradient-from: #7b5cff var(--tw-gradient-from-position);
    --tw-gradient-to: #7b5cff00 var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to);
    --tw-gradient-to: #ff4f93 var(--tw-gradient-to-position);
    -webkit-background-clip: text;
    background-clip: text;
    color: #0000
}