:root{
--base-h: 210;
--base-s: 50%;
--base-l: 40%;

--base-two-h: 304;
--base-two-s: 100%;
--base-two-l: 50%;

--base-three-h: 304;
--base-three-s: 100%;
--base-three-l: 50%;

--base: var(--base-h) var(--base-s) var(--base-l);
--base-two: var(--base-two-h) var(--base-two-s) var(--base-two-l);
--base-three: var(--base-three-h) var(--base-three-s) var(--base-three-l);

--base-gradient: linear-gradient(135deg, #336699 0%, #ff00f0 100%);
--base-gradient-reverse: linear-gradient(135deg, #ff00f0 0%, #336699 100%);

--base-color: #336699;
--secondary-color: #ff00f0;

--base-d-100: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l)*0.1);
--base-d-200: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l)*0.2);
--base-d-300: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l)*0.3);
--base-d-400: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l)*0.4);
--base-d-500: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l)*0.5);
--base-d-600: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l)*0.6);
--base-d-700: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l)*0.7);
--base-d-800: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l)*0.8);
--base-d-900: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l)*0.9);

--base-l-100: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + 10% - var(--base-l)*0.1);
--base-l-200: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + 20% - var(--base-l)*0.2);
--base-l-300: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + 30% - var(--base-l)*0.3);
--base-l-400: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + 40% - var(--base-l)*0.4);
--base-l-500: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + 50% - var(--base-l)*0.5);
--base-l-600: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + 60% - var(--base-l)*0.6);
--base-l-700: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + 70% - var(--base-l)*0.7);
--base-l-800: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + 80% - var(--base-l)*0.8);
--base-l-900: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + 90% - var(--base-l)*0.9);
} 

.text--base {
    color: hsl(var(--base)) !important;
}
.bg--base {
    background-color: hsl(var(--base)) !important;
}
.border--base {
    border-color: hsl(var(--base)) !important;
}
.text--gradient {
    background: linear-gradient(90deg, #336699 0%, #ff00f0 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
}