:root {
    --primary: #9a64c5;
    --primaryOpaque: rgba(37, 36, 90, 0.5);
}


body {
    margin: 0;
    height: 100vh;
}

@keyframes textShine {
    0% {
        background-position: 0% 50%;
    }

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

.text-rainbow {
    font-size: clamp(2.8rem, 1.5vw, 3rem);
    font-weight: bold;
    background: linear-gradient(to right, #6770cf, #f094eb, #94c4f0, #bd94f0, #94a4f0, #6678cf, #66b0cf);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    background-size: 500% auto;
    animation: textShine 5s ease-in-out infinite alternate;
}

.gradient-bar {
    height: 5px;
}

.bg-rainbow {
    background: linear-gradient(270deg, #6770cf, #f094eb, #94c4f0, #bd94f0, #94a4f0, #6678cf, #66b0cf);
    background-size: 800% 800%;
    animation: rainbowAnimation 10s ease infinite;
}

@keyframes rainbowAnimation {
    0% {
        background-position: 0% 50%
    }

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

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

body {
    color: #666;
}

.badge {
    border: 0px;
}

.btn {
    border-radius: 0.5rem;
    padding: 0.7rem 0.75rem;
    transition: 0.2s;
}

.btn-primary {
    background-color: var(--primary) !important;
    border: 0px;
    box-shadow: 0px 6px 16px var(--primaryOpaque);
}

.bg-primary,
.badge-primary {
    background-color: var(--primary) !important;
}


.text-primary {
    color: var(--primary) !important;
}

.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
}

.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show>.btn-outline-primary.dropdown-toggle,
.btn-outline-primary:hover {
    color: #fff;
    background-color: var(--primary);
    border-color: var(--primary);
}

.btn:not(:disabled):not(.disabled):active:focus,
.btn:not(:disabled):not(.disabled).active:focus,
.show>.btn.dropdown-toggle:focus,
.btn:focus,
.btn.focus {
    box-shadow: none !important;
    outline: none;
    transform: scale(1.03, 1.03);
}


.custom-control-input:checked~.custom-control-label::before {
    color: #fff;
    border-color: var(--primary);
    background-color: var(--primary);
}

.custom-control-input:focus~.custom-control-label::before {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.custom-control-input:focus:not(:checked)~.custom-control-label::before {
    border-color: var(--primaryOpaque);
}

.custom-control-input:not(:disabled):active~.custom-control-label::before {
    color: #fff;
    background-color: var(--primaryOpaque);
    border-color: var(--primaryOpaque);
}

.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    border-color: #e4e7eb;
    height: calc(2em + 0.75rem + 2px);
    padding: 0.375rem 1rem;
    transition: 0.2s;
    border-radius: 0.5rem;
    box-shadow: none !important;
}

.form-control:focus {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: #495057;
    background-color: #fff;
    border-color: var(--primaryOpaque);
    outline: 0;
    box-shadow: none;
}

.form-control:disabled,
.form-control[readonly] {
    opacity: 0.5;
}

.input-group-text {
    border-radius: 0.5rem;
    background-color: transparent;
    border-color: #e4e7eb !important;
}

.border-top {
    border-top: 5px solid var(--primary) !important;
}