:root {
    --color-white: rgb(248, 248, 248);
    --color-deep-outer-space: rgb(69, 69, 69);
    --color-outer-space: rgb(89, 89, 89);
    --color-outer-space-light: rgb(149, 149, 149);
    --color-outer-space-light-li: rgb(230, 230, 230);
    --color-outer-space-light-light: rgb(245, 245, 245);
    --color-payne-gray: rgb(75, 85, 115);
    --color-red: rgb(230, 20, 20);
    --color-maroon: rgb(128, 0, 0);
    --color-maroon-li: rgb(168, 40, 40);
    --color-maroon-light: rgb(188, 60, 60);
    --color-tangerine: rgb(112, 84, 0);
    --color-olive: rgb(128, 128, 0);
    --color-navy: rgb(0, 0, 128);
    --color-navy-light: rgb(30, 30, 158);
    --color-ndigo: rgb(75, 0, 128);
    --color-ndigo-light: rgb(105, 30, 158);
    --color-sepia: rgb(112, 66, 20);
    --color-burgundy: rgb(89, 0, 44);
    --color-orenge: rgb(248, 147, 31);
    --color-orenge-light: rgb(247, 201, 148);
    --color-green: rgb(140, 197, 64);
    --color-deep-green: rgb(34, 102, 34);
    --color-alice-blue: rgb(238, 248, 251);
    --color-azureish-white: rgb(223, 242, 248);
    --color-pewter-blue: rgb(155, 207, 214);
    --color-deep-dark-slate-gray: rgb(11, 53, 66);
    --color-dark-slate-gray: rgb(41, 83, 96);
    --color-deep-lapis-lazuli: rgb(0, 75, 119);
    --color-lapis-lazuli: rgb(29, 106, 150);
    --color-golden: rgb(255, 215, 0);
    --color-persion-rose: rgb(255, 50, 177);
    --color-mauve: rgb(228, 197, 255);
    --color-deep-mauve: rgb(218, 187, 246);
    --color-mauve-light: rgb(248, 217, 255);
    --color-logitech: rgb(0, 220, 255);
}

/*background-color*/

@media all {
    .background {
        background-color: inherit;
    }
    .background[data-color="white"] {
        background-color: var(--color-white);
        color: var(--color-outer-space);
    }
    .background[data-color="deep-outer-space"] {
        background-color: var(--color-deep-outer-space);
        color: white;
    }
    .background[data-color="outer-space"] {
        background-color: var(--color-outer-space);
        color: white;
    }
    .background[data-color="outer-space-light"] {
        background-color: var(--color-outer-space-light);
        color: white;
    }
    .background[data-color="outer-space-light-light"] {
        background-color: var(--color-outer-space-light-light);
        /*color: white;*/
    }
    .background[data-color="payne-gray"] {
        background-color: var(--color-payne-gray);
        color: white;
    }
    .background[data-color="red"] {
        background-color: var(--color-red);
        color: white;
    }
    .background[data-color="maroon"] {
        background-color: var(--color-maroon);
        color: white;
    }
    .background[data-color="maroon-light"] {
        background-color: var(--color-maroon-light);
        color: white;
    }
    .background[data-color="tangerine"] {
        background-color: var(--color-tangerine);
        color: white;
    }
    .background[data-color="olive"] {
        background-color: var(--color-olive);
        color: white;
    }
    .background[data-color="navy"] {
        background-color: var(--color-navy);
        color: white;
    }
    .background[data-color="navy-light"] {
        background-color: var(--color-navy-light);
        color: white;
    }
    .background[data-color="ndigo"] {
        background-color: var(--color-ndigo);
        color: white;
    }
    .background[data-color="ndigo-light"] {
        background-color: var(--color-ndigo-light);
        color: white;
    }
    .background[data-color="sepia"] {
        background-color: var(--color-sepia);
        color: white;
    }
    .background[data-color="burgundy"] {
        background-color: var(--color-burgundy);
        color: white;
    }
    .background[data-color="orenge"] {
        background-color: var(--color-orenge);
        color: #202020;
    }
    .background[data-color="orenge-light"] {
        background-color: var(--color-orenge-light);
        color: #202020;
    }
    .background[data-color="green"] {
        background-color: var(--color-green);
        color: #202020;
    }
    .background[data-color="deep-green"] {
        background-color: var(--color-deep-green);
        color: white;
    }
    .background[data-color="pewter-blue"] {
        background-color: var(--color-pewter-blue);
        color: #1E1E1E;
    }
    .background[data-color="dark-slate-gray"] {
        background-color: var(--color-dark-slate-gray);
        color: white;
    }
    .background[data-color="lapis-lazuli"] {
        background-color: var(--color-lapis-lazuli);
        color: white;
    }
    .background[data-color="mauve-light"] {
        background-color: var(--color-mauve-light);
        color: #414141;
    }
    .background[data-color="azureish-white"] {
        background-color: var(--color-azureish-white);
        color: #414141;
    }
}

/*background-color*/

/*text-color*/

@media all {
    .text {
        color: inherit;
    }
    .text[data-color="white"] {
        color: #F8F8F8;
    }
    .text[data-color="deep-outer-space"] {
        color: var(--color-deep-outer-space);
    }
    .text[data-color="outer-space"] {
        color: var(--color-outer-space);
    }
    .text[data-color="outer-space-light"] {
        color: var(--color-outer-space-light);
    }
    .text[data-color="outer-space-light-light"] {
        color: var(--color-outer-space-light-light);
    }
    .text[data-color="payne-gray"] {
        color: var(--color-payne-gray);
    }
    .text[data-color="red"] {
        color: var(--color-red);
    }
    .text[data-color="maroon"] {
        color: var(--color-maroon);
    }
    .text[data-color="maroon-light"] {
        color: var(--color-maroon-light);
    }
    .text[data-color="tangerine"] {
        color: var(--color-tangerine);
    }
    .text[data-color="olive"] {
        color: var(--color-olive);
    }
    .text[data-color="navy"] {
        color: var(--color-navy);
    }
    .text[data-color="navy-light"] {
        color: var(--color-navy-light);
    }
    .text[data-color="ndigo"] {
        color: var(--color-ndigo);
    }
    .text[data-color="ndigo-light"] {
        color: var(--color-ndigo-light);
    }
    .text[data-color="sepia"] {
        color: var(--color-sepia);
    }
    .text[data-color="burgundy"] {
        color: var(--color-burgundy);
    }
    .text[data-color="orenge"] {
        color: var(--color-orenge);
    }
    .text[data-color="orenge-light"] {
        color: var(--color-orenge-light);
    }
    .text[data-color="green"] {
        color: var(--color-green);
    }
    .text[data-color="deep-green"] {
        color: var(--color-deep-green);
    }
    .text[data-color="dark-slate-gray"] {
        color: var(--color-dark-slate-gray);
    }
    .text[data-color="lapis-lazuli"] {
        color: var(--color-lapis-lazuli);
    }
}

/*text-color*/

/*border-color*/

@media all {
    .border {
        border-color: inherit;
    }
    .border[data-color="white"] {
        border-color: #F8F8F8;
    }
    .border[data-color="deep-outer-space"] {
        border-color: var(--color-deep-outer-space);
    }
    .border[data-color="outer-space"] {
        border-color: var(--color-outer-space);
    }
    .border[data-color="outer-space-light"] {
        border-color: var(--color-outer-space-light);
    }
    .border[data-color="outer-space-light-light"] {
        border-color: var(--color-outer-space-light-light);
    }
    .border[data-color="payne-gray"] {
        border-color: var(--color-payne-gray);
    }
    .border[data-color="red"] {
        border-color: var(--color-red);
    }
    .border[data-color="maroon"] {
        border-color: var(--color-maroon);
    }
    .border[data-color="maroon-light"] {
        border-color: var(--color-maroon-light);
    }
    .border[data-color="tangerine"] {
        border-color: var(--color-tangerine);
    }
    .border[data-color="olive"] {
        border-color: var(--color-olive);
    }
    .border[data-color="navy"] {
        border-color: var(--color-navy);
    }
    .border[data-color="navy-light"] {
        border-color: var(--color-navy-light);
    }
    .border[data-color="ndigo"] {
        border-color: var(--color-ndigo);
    }
    .border[data-color="ndigo-light"] {
        border-color: var(--color-ndigo-light);
    }
    .border[data-color="sepia"] {
        border-color: var(--color-sepia);
    }
    .border[data-color="burgundy"] {
        border-color: var(--color-burgundy);
    }
    .border[data-color="orenge"] {
        border-color: var(--color-orenge);
    }
    .border[data-color="orenge-light"] {
        border-color: var(--color-orenge-light);
    }
    .border[data-color="green"] {
        border-color: var(--color-green);
    }
    .border[data-color="deep-green"] {
        border-color: var(--color-deep-green);
    }
    .border[data-color="pewter-blue"] {
        border-color: var(--color-pewter-blue);
    }
    .border[data-color="dark-slate-gray"] {
        border-color: var(--color-dark-slate-gray);
    }
    .border[data-color="lapis-lazuli"] {
        border-color: var(--color-lapis-lazuli);
    }
    .border[data-color="mauve-light"] {
        border-color: var(--color-mauve-light);
    }
    .border[data-color="azureish-white"] {
        border-color: var(--color-azureish-white);
    }
}

/*border-color*/