:root {
    --clr-orange: hsl(19, 100%, 50%);
    --clr-yellow: hsl(24, 100%, 50%);
    --clr-purple: hsl(320, 100%, 30%);
}

.card {
    min-width: clamp(20svw, 80%, 20svw);
}

body {
    height: 100svh;
    background: linear-gradient(120deg, var(--clr-yellow), var(--clr-orange), var(--clr-purple));
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(-10%);
}

.logo {
    width: 100px;
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(10%, 100%);
}

.btn-gradient {
    color: white;
    background: linear-gradient(to right, var(--clr-yellow), var(--clr-orange), var(--clr-purple));
    border: none;
    border-radius: 100px;
    padding: .75rem 3.5rem;

    &:hover {
        background: linear-gradient(to right, var(--clr-yellow), var(--clr-orange), var(--clr-orange));
        transition: .2s ease-in-out;
    }
}

.py-3_5 {
    padding: .75rem 3.5rem;
}

.form-control {
    border: 0;
    border-bottom: var(--bs-border-width) solid var(--clr-orange);
    border-radius: 0;

    &:focus {
        outline: 0 !important;
        box-shadow: none !important;
        border-bottom: var(--bs-border-width) solid var(--clr-orange);
    }

    &:disabled {
        background-color: white;
    }
}