body {
    
    --bs-light : #fefefe;
    --bs-light-80 : #fefefedc;
    --bs-light-60 : #fefefea5;
    --bs-light-50 : #fefefe7b;

    --bs-light-shadow : #f3f3f3;

    --bs-primary : #3d3d3d;
    --bs-primary-50 : #3d3d3d82;
    --bs-primary-bold : #232323;
    
    --bs-neon-1 : #f2f2f2;
    --bs-neon-2 : #ff00de;
    --bs-neon-3 : #8800ff;
    --bs-neon-4 : #0800ff;
    
    --bs-shadow-header : #1414147b;
    --bs-shadow-box-light : #525252;
    --bs-shadow-box-dark : #141414;

    --bs-g-h1-primary : #00ffff;
    --bs-g-h1-secondary : #ff00c3;

    background-color: var(--bs-primary);
    color: var (--bs-light-80);
}

@media (min-width:1199px) {
    body {
        padding-left: 10rem !important; 
        padding-right: 10rem !important;
    }
}

body.light {
    --bs-light : #2c2c2e;
    --bs-light-80 : #2c2c2edc;
    --bs-light-60 : #2c2c2ea5;
    --bs-light-50 : #2c2c2e7b;

    --bs-light-shadow : #2c2c2e2e;

    --bs-primary : #f4f4f4;
    --bs-primary-bold : #f3f3f3;
    
    --bs-neon-1 : #2c2c2e14;
    --bs-neon-2 : #2c2c2e14;
    --bs-neon-3 : #2c2c2e14;
    --bs-neon-4 : #2c2c2e14;
    
    --bs-shadow-header : #2c2c2e2e;

    --bs-g-h1-primary : #3b00ba;
    --bs-g-h1-secondary : #b700ff;
}

.bg-box {
    background-color: var(--bs-primary) !important;
    box-shadow: -4px -4px 20px var(--bs-shadow-box-light), 4px 4px 20px var(--bs-shadow-box-dark);
    color: var(--bs-light-60) !important;
    text-decoration: none;
}

.bg-box.bg-box-btn {
    display: inline-flex;
    justify-content: center;
    gap: 0.5rem;
    transition: calc(0.5s);
}

.bg-box.bg-box-btn:hover, .bg-box-btn.active {
    transition: calc(0.3s);
    box-shadow: -8px -8px 20px var(--bs-shadow-box-light), 8px 8px 20px var(--bs-shadow-box-dark);
    color: var(--bs-light) !important;
}

.btn-outline-light {
    color: var(--bs-light-50) !important;
    background-color: transparent;
    border-color: var(--bs-light-50) !important;
    display: flex;
    align-items: center;
    gap: .5rem;
    border-radius: 50rem;
    text-wrap: nowrap;
}

.btn-outline-light:hover, .btn-outline-light.active {
    color: var(--bs-light) !important;
    border-color: var(--bs-light-80) !important;
    background-color: transparent;
}

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

.text-light-80 {
    color: var(--bs-light-80) !important;
}

.text-light-60 {
    color: var(--bs-light-60) !important;
}

.text-light-50 {
    color: var(--bs-light-50) !important;
}

.text-blue {
    color: var(--bs-primary);
}
.bg-blue {
    background-color: var(--bs-primary);
}

.g-h1 {
    background: linear-gradient(90deg,var(--bs-g-h1-primary), var(--bs-g-h1-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.profile:hover {
    transition: calc(0.7s);
    filter: drop-shadow(1px 7px 20px #ffffff);
}

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--bs-light-50);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--bs-light-80);
}

.shadow-light {
    box-shadow: 0 0 1px 2px var(--bs-light-50);
}

.input {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.input label {
    font-size: 14px;
    margin-left: 4px;
    color : var(--bs-light-50)
}

.input input, .input select, .input textarea {
    outline: none;
    appearance: none;
    background-color: var(--bs-primary);
    border : 1px solid var(--bs-primary);
    border-radius: 16px;
    font-size: 14px;
    color: var(--bs-light-60);
    padding: 10px 20px;
    box-shadow: 4px 4px 10px var(--bs-shadow-box-dark) inset, -4px -4px 10px var(--bs-shadow-box-light) inset;
}

.input input:focus, .input select:focus {
    color: var(--bs-light-80);
}

.input-btn {
    outline: none;
    text-decoration: none;
    width: 100%;
    font-size: 14px;
    background-color: var(--bs-primary);
    color: var(--bs-light-50);
    border: 1px solid var(--bs-light-50);
    border-radius: 16px;
    padding: 10px 20px;
    transition: 0.3s;
}

.input-btn:hover {
    color: var(--bs-light-80);
    border-color: var(--bs-light-80);
    transition: 0.3s;
}

.w-fit-content {
    width: fit-content;
}

@media (min-width:1199px) {
    .w-lg-fit-content {
        width: fit-content;
    }
}