/* Colors */
:root {
    --sp-gradient1: #ffffff;
    --sp-gradient2: #2696c8;
    --sp-gradient3: #1a8fc5;
    --sp-gradient4: #0083abce;
    --sp-green: #ffffff;
    --sp-white: #ffffff;
    --sp-black: #000000;
    --sp-primary-light: #fff9f9;
    --sp-primary: #dcf51d;
    --sp-primary2: #c0d809;
    --sp-secondary: #11104d;
    --sp-secondary2: #060534;
    --sp-secondary-dark: #252525;
    --sp-border-dark: #dddddd;
    --sp-border-light: #e9e9e9;
    --sp-border-extra-light: #f2f2f2;
    --sp-scrollbar-thumb: #c2c2c2;
    --sp-font-sans-serif: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --sp-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --sp-shadow: 2px 5px 20px rgba(0, 0, 0, .2);
    --sp-radius: 3px;
    --sp-transition: all .3s cubic-bezier(.645, .045, .355, 1);
}

/* ---//--- */

/* --- Selection Colors --- */
::-webkit-selection {
    background-color: var(--sp-primary);
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

::selection {
    background-color: var(--sp-primary);
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

/* ---//--- */

/* --- Scrollbar Colors --- */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: var(--sp-border-extra-light);
}

::-webkit-scrollbar-thumb {
    background-color: var(--sp-scrollbar-thumb);
    border-radius: 10px;
}

::-webkit-scrollbar-corner {
    background-color: var(--sp-border-extra-light);
}

/* ---//--- */