:root {
    --black: #0f1620;
    --gray100: #1b2633;
    --gray200: #303A4D;
    --gray300: #86909c;
    --gray400: #AEB9CB;
    --gray500: #F7F7FB;
    --white: #feffff;
    --accent2: #3b8fca;
    --accent: #46aef5;
    --pay: #da5c9f;
    --green: #45be88;
    --red: #FF3347;
    --yellow: #FFB841;
    --front: var(--gray100);
    --back: var(--black);
}

/*https://codepen.io/sosuke/pen/Pjoqqp*/

.img-black {
    filter: invert(0%) sepia(24%) saturate(0%) hue-rotate(83deg) brightness(91%) contrast(103%);
}

.img-white {
    filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(213deg) brightness(101%) contrast(103%);
}

.img-gray {
    filter: invert(64%) sepia(12%) saturate(353%) hue-rotate(173deg) brightness(86%) contrast(87%);
}

.img-gray100 {
    filter: invert(7%) sepia(5%) saturate(4157%) hue-rotate(192deg) brightness(96%) contrast(88%);
}

.img-gray200 {
    filter: invert(19%) sepia(46%) saturate(418%) hue-rotate(181deg) brightness(90%) contrast(87%);
}

.img-gray300 {
    filter: invert(35%) sepia(17%) saturate(622%) hue-rotate(182deg) brightness(96%) contrast(90%);
}

.img-gray400 {
    filter: invert(77%) sepia(12%) saturate(351%) hue-rotate(178deg) brightness(95%) contrast(88%);
}

.img-gray500 {
    filter: invert(95%) sepia(10%) saturate(1532%) hue-rotate(182deg) brightness(111%) contrast(96%);
}

.img-accent {
    filter: invert(67%) sepia(35%) saturate(3727%) hue-rotate(178deg) brightness(97%) contrast(104%);
}

.img-blue {
    filter: invert(34%) sepia(82%) saturate(5280%) hue-rotate(235deg) brightness(99%) contrast(98%);
}

.img-green {
    filter: invert(54%) sepia(22%) saturate(7296%) hue-rotate(124deg) brightness(100%) contrast(98%);
}

.img-red {
    filter: invert(35%) sepia(79%) saturate(2026%) hue-rotate(328deg) brightness(105%) contrast(94%);
}

.img-yellow {
    filter: invert(80%) sepia(82%) saturate(3759%) hue-rotate(327deg) brightness(108%) contrast(98%);
}