rpg-cards/generator/css/colors.css

/* black */
.color-black {
    background-color: black;
    border-color: black;
}
.color-black .ruler {
    background-color: black;
}
.color-black h3{
    border-color: black;
    color: black;
}
.color-black .card-back {
    background: radial-gradient(ellipse at center, white 20%, black 120%);
}
.color-black .back-icon {
    background-color: black;
}

/* navy */
.color-navy {
    background-color: navy;
    border-color: navy;
}
.color-navy .ruler {
    background-color: navy;
}
.color-navy h3{
    border-color: navy;
    color: navy;
}
.color-navy .card-back {
    background: radial-gradient(ellipse at center, white 20%, navy 120%);
}
.color-navy .back-icon {
    background-color: navy;
}

/* darkblue */
.color-darkblue {
    background-color: darkblue;
    border-color: darkblue;
}
.color-darkblue .ruler {
    background-color: darkblue;
}
.color-darkblue h3{
    border-color: darkblue;
    color: darkblue;
}
.color-darkblue .card-back {
    background: radial-gradient(ellipse at center, white 20%, darkblue 120%);
}
.color-darkblue .back-icon {
    background-color: darkblue;
}

/* mediumblue */
.color-mediumblue {
    background-color: mediumblue;
    border-color: mediumblue;
}
.color-mediumblue .ruler {
    background-color: mediumblue;
}
.color-mediumblue h3{
    border-color: mediumblue;
    color: mediumblue;
}
.color-mediumblue .card-back {
    background: radial-gradient(ellipse at center, white 20%, mediumblue 120%);
}
.color-mediumblue .back-icon {
    background-color: mediumblue;
}

/* blue */
.color-blue {
    background-color: blue;
    border-color: blue;
}
.color-blue .ruler {
    background-color: blue;
}
.color-blue h3{
    border-color: blue;
    color: blue;
}
.color-blue .card-back {
    background: radial-gradient(ellipse at center, white 20%, blue 120%);
}
.color-blue .back-icon {
    background-color: blue;
}

/* darkgreen */
.color-darkgreen {
    background-color: darkgreen;
    border-color: darkgreen;
}
.color-darkgreen .ruler {
    background-color: darkgreen;
}
.color-darkgreen h3{
    border-color: darkgreen;
    color: darkgreen;
}
.color-darkgreen .card-back {
    background: radial-gradient(ellipse at center, white 20%, darkgreen 120%);
}
.color-darkgreen .back-icon {
    background-color: darkgreen;
}

/* green */
.color-green {
    background-color: green;
    border-color: green;
}
.color-green .ruler {
    background-color: green;
}
.color-green h3{
    border-color: green;
    color: green;
}
.color-green .card-back {
    background: radial-gradient(ellipse at center, white 20%, green 120%);
}
.color-green .back-icon {
    background-color: green;
}

/* teal */
.color-teal {
    background-color: teal;
    border-color: teal;
}
.color-teal .ruler {
    background-color: teal;
}
.color-teal h3{
    border-color: teal;
    color: teal;
}
.color-teal .card-back {
    background: radial-gradient(ellipse at center, white 20%, teal 120%);
}
.color-teal .back-icon {
    background-color: teal;
}

/* darkcyan */
.color-darkcyan {
    background-color: darkcyan;
    border-color: darkcyan;
}
.color-darkcyan .ruler {
    background-color: darkcyan;
}
.color-darkcyan h3{
    border-color: darkcyan;
    color: darkcyan;
}
.color-darkcyan .card-back {
    background: radial-gradient(ellipse at center, white 20%, darkcyan 120%);
}
.color-darkcyan .back-icon {
    background-color: darkcyan;
}

/* deepskyblue */
.color-deepskyblue {
    background-color: deepskyblue;
    border-color: deepskyblue;
}
.color-deepskyblue .ruler {
    background-color: deepskyblue;
}
.color-deepskyblue h3{
    border-color: deepskyblue;
    color: deepskyblue;
}
.color-deepskyblue .card-back {
    background: radial-gradient(ellipse at center, white 20%, deepskyblue 120%);
}
.color-deepskyblue .back-icon {
    background-color: deepskyblue;
}

/* darkturquoise */
.color-darkturquoise {
    background-color: darkturquoise;
    border-color: darkturquoise;
}
.color-darkturquoise .ruler {
    background-color: darkturquoise;
}
.color-darkturquoise h3{
    border-color: darkturquoise;
    color: darkturquoise;
}
.color-darkturquoise .card-back {
    background: radial-gradient(ellipse at center, white 20%, darkturquoise 120%);
}
.color-darkturquoise .back-icon {
    background-color: darkturquoise;
}

/* mediumspringgreen */
.color-mediumspringgreen {
    background-color: mediumspringgreen;
    border-color: mediumspringgreen;
}
.color-mediumspringgreen .ruler {
    background-color: mediumspringgreen;
}
.color-mediumspringgreen h3{
    border-color: mediumspringgreen;
    color: mediumspringgreen;
}
.color-mediumspringgreen .card-back {
    background: radial-gradient(ellipse at center, white 20%, mediumspringgreen 120%);
}
.color-mediumspringgreen .back-icon {
    background-color: mediumspringgreen;
}

/* lime */
.color-lime {
    background-color: lime;
    border-color: lime;
}
.color-lime .ruler {
    background-color: lime;
}
.color-lime h3{
    border-color: lime;
    color: lime;
}
.color-lime .card-back {
    background: radial-gradient(ellipse at center, white 20%, lime 120%);
}
.color-lime .back-icon {
    background-color: lime;
}

/* springgreen */
.color-springgreen {
    background-color: springgreen;
    border-color: springgreen;
}
.color-springgreen .ruler {
    background-color: springgreen;
}
.color-springgreen h3{
    border-color: springgreen;
    color: springgreen;
}
.color-springgreen .card-back {
    background: radial-gradient(ellipse at center, white 20%, springgreen 120%);
}
.color-springgreen .back-icon {
    background-color: springgreen;
}

/* aqua */
.color-aqua {
    background-color: aqua;
    border-color: aqua;
}
.color-aqua .ruler {
    background-color: aqua;
}
.color-aqua h3{
    border-color: aqua;
    color: aqua;
}
.color-aqua .card-back {
    background: radial-gradient(ellipse at center, white 20%, aqua 120%);
}
.color-aqua .back-icon {
    background-color: aqua;
}

/* cyan */
.color-cyan {
    background-color: cyan;
    border-color: cyan;
}
.color-cyan .ruler {
    background-color: cyan;
}
.color-cyan h3{
    border-color: cyan;
    color: cyan;
}
.color-cyan .card-back {
    background: radial-gradient(ellipse at center, white 20%, cyan 120%);
}
.color-cyan .back-icon {
    background-color: cyan;
}

/* midnightblue */
.color-midnightblue {
    background-color: midnightblue;
    border-color: midnightblue;
}
.color-midnightblue .ruler {
    background-color: midnightblue;
}
.color-midnightblue h3{
    border-color: midnightblue;
    color: midnightblue;
}
.color-midnightblue .card-back {
    background: radial-gradient(ellipse at center, white 20%, midnightblue 120%);
}
.color-midnightblue .back-icon {
    background-color: midnightblue;
}

/* dodgerblue */
.color-dodgerblue {
    background-color: dodgerblue;
    border-color: dodgerblue;
}
.color-dodgerblue .ruler {
    background-color: dodgerblue;
}
.color-dodgerblue h3{
    border-color: dodgerblue;
    color: dodgerblue;
}
.color-dodgerblue .card-back {
    background: radial-gradient(ellipse at center, white 20%, dodgerblue 120%);
}
.color-dodgerblue .back-icon {
    background-color: dodgerblue;
}

/* lightseagreen */
.color-lightseagreen {
    background-color: lightseagreen;
    border-color: lightseagreen;
}
.color-lightseagreen .ruler {
    background-color: lightseagreen;
}
.color-lightseagreen h3{
    border-color: lightseagreen;
    color: lightseagreen;
}
.color-lightseagreen .card-back {
    background: radial-gradient(ellipse at center, white 20%, lightseagreen 120%);
}
.color-lightseagreen .back-icon {
    background-color: lightseagreen;
}

/* forestgreen */
.color-forestgreen {
    background-color: forestgreen;
    border-color: forestgreen;
}
.color-forestgreen .ruler {
    background-color: forestgreen;
}
.color-forestgreen h3{
    border-color: forestgreen;
    color: forestgreen;
}
.color-forestgreen .card-back {
    background: radial-gradient(ellipse at center, white 20%, forestgreen 120%);
}
.color-forestgreen .back-icon {
    background-color: forestgreen;
}

/* seagreen */
.color-seagreen {
    background-color: seagreen;
    border-color: seagreen;
}
.color-seagreen .ruler {
    background-color: seagreen;
}
.color-seagreen h3{
    border-color: seagreen;
    color: seagreen;
}
.color-seagreen .card-back {
    background: radial-gradient(ellipse at center, white 20%, seagreen 120%);
}
.color-seagreen .back-icon {
    background-color: seagreen;
}

/* darkslategray */
.color-darkslategray {
    background-color: darkslategray;
    border-color: darkslategray;
}
.color-darkslategray .ruler {
    background-color: darkslategray;
}
.color-darkslategray h3{
    border-color: darkslategray;
    color: darkslategray;
}
.color-darkslategray .card-back {
    background: radial-gradient(ellipse at center, white 20%, darkslategray 120%);
}
.color-darkslategray .back-icon {
    background-color: darkslategray;
}

/* limegreen */
.color-limegreen {
    background-color: limegreen;
    border-color: limegreen;
}
.color-limegreen .ruler {
    background-color: limegreen;
}
.color-limegreen h3{
    border-color: limegreen;
    color: limegreen;
}
.color-limegreen .card-back {
    background: radial-gradient(ellipse at center, white 20%, limegreen 120%);
}
.color-limegreen .back-icon {
    background-color: limegreen;
}

/* mediumseagreen */
.color-mediumseagreen {
    background-color: mediumseagreen;
    border-color: mediumseagreen;
}
.color-mediumseagreen .ruler {
    background-color: mediumseagreen;
}
.color-mediumseagreen h3{
    border-color: mediumseagreen;
    color: mediumseagreen;
}
.color-mediumseagreen .card-back {
    background: radial-gradient(ellipse at center, white 20%, mediumseagreen 120%);
}
.color-mediumseagreen .back-icon {
    background-color: mediumseagreen;
}

/* turquoise */
.color-turquoise {
    background-color: turquoise;
    border-color: turquoise;
}
.color-turquoise .ruler {
    background-color: turquoise;
}
.color-turquoise h3{
    border-color: turquoise;
    color: turquoise;
}
.color-turquoise .card-back {
    background: radial-gradient(ellipse at center, white 20%, turquoise 120%);
}
.color-turquoise .back-icon {
    background-color: turquoise;
}

/* royalblue */
.color-royalblue {
    background-color: royalblue;
    border-color: royalblue;
}
.color-royalblue .ruler {
    background-color: royalblue;
}
.color-royalblue h3{
    border-color: royalblue;
    color: royalblue;
}
.color-royalblue .card-back {
    background: radial-gradient(ellipse at center, white 20%, royalblue 120%);
}
.color-royalblue .back-icon {
    background-color: royalblue;
}

/* steelblue */
.color-steelblue {
    background-color: steelblue;
    border-color: steelblue;
}
.color-steelblue .ruler {
    background-color: steelblue;
}
.color-steelblue h3{
    border-color: steelblue;
    color: steelblue;
}
.color-steelblue .card-back {
    background: radial-gradient(ellipse at center, white 20%, steelblue 120%);
}
.color-steelblue .back-icon {
    background-color: steelblue;
}

/* darkslateblue */
.color-darkslateblue {
    background-color: darkslateblue;
    border-color: darkslateblue;
}
.color-darkslateblue .ruler {
    background-color: darkslateblue;
}
.color-darkslateblue h3{
    border-color: darkslateblue;
    color: darkslateblue;
}
.color-darkslateblue .card-back {
    background: radial-gradient(ellipse at center, white 20%, darkslateblue 120%);
}
.color-darkslateblue .back-icon {
    background-color: darkslateblue;
}

/* mediumturquoise */
.color-mediumturquoise {
    background-color: mediumturquoise;
    border-color: mediumturquoise;
}
.color-mediumturquoise .ruler {
    background-color: mediumturquoise;
}
.color-mediumturquoise h3{
    border-color: mediumturquoise;
    color: mediumturquoise;
}
.color-mediumturquoise .card-back {
    background: radial-gradient(ellipse at center, white 20%, mediumturquoise 120%);
}
.color-mediumturquoise .back-icon {
    background-color: mediumturquoise;
}

/* indigo */
.color-indigo {
    background-color: indigo;
    border-color: indigo;
}
.color-indigo .ruler {
    background-color: indigo;
}
.color-indigo h3{
    border-color: indigo;
    color: indigo;
}
.color-indigo .card-back {
    background: radial-gradient(ellipse at center, white 20%, indigo 120%);
}
.color-indigo .back-icon {
    background-color: indigo;
}

/* darkolivegreen */
.color-darkolivegreen {
    background-color: darkolivegreen;
    border-color: darkolivegreen;
}
.color-darkolivegreen .ruler {
    background-color: darkolivegreen;
}
.color-darkolivegreen h3{
    border-color: darkolivegreen;
    color: darkolivegreen;
}
.color-darkolivegreen .card-back {
    background: radial-gradient(ellipse at center, white 20%, darkolivegreen 120%);
}
.color-darkolivegreen .back-icon {
    background-color: darkolivegreen;
}

/* cadetblue */
.color-cadetblue {
    background-color: cadetblue;
    border-color: cadetblue;
}
.color-cadetblue .ruler {
    background-color: cadetblue;
}
.color-cadetblue h3{
    border-color: cadetblue;
    color: cadetblue;
}
.color-cadetblue .card-back {
    background: radial-gradient(ellipse at center, white 20%, cadetblue 120%);
}
.color-cadetblue .back-icon {
    background-color: cadetblue;
}

/* cornflowerblue */
.color-cornflowerblue {
    background-color: cornflowerblue;
    border-color: cornflowerblue;
}
.color-cornflowerblue .ruler {
    background-color: cornflowerblue;
}
.color-cornflowerblue h3{
    border-color: cornflowerblue;
    color: cornflowerblue;
}
.color-cornflowerblue .card-back {
    background: radial-gradient(ellipse at center, white 20%, cornflowerblue 120%);
}
.color-cornflowerblue .back-icon {
    background-color: cornflowerblue;
}

/* mediumaquamarine */
.color-mediumaquamarine {
    background-color: mediumaquamarine;
    border-color: mediumaquamarine;
}
.color-mediumaquamarine .ruler {
    background-color: mediumaquamarine;
}
.color-mediumaquamarine h3{
    border-color: mediumaquamarine;
    color: mediumaquamarine;
}
.color-mediumaquamarine .card-back {
    background: radial-gradient(ellipse at center, white 20%, mediumaquamarine 120%);
}
.color-mediumaquamarine .back-icon {
    background-color: mediumaquamarine;
}

/* dimgray */
.color-dimgray {
    background-color: dimgray;
    border-color: dimgray;
}
.color-dimgray .ruler {
    background-color: dimgray;
}
.color-dimgray h3{
    border-color: dimgray;
    color: dimgray;
}
.color-dimgray .card-back {
    background: radial-gradient(ellipse at center, white 20%, dimgray 120%);
}
.color-dimgray .back-icon {
    background-color: dimgray;
}

/* slateblue */
.color-slateblue {
    background-color: slateblue;
    border-color: slateblue;
}
.color-slateblue .ruler {
    background-color: slateblue;
}
.color-slateblue h3{
    border-color: slateblue;
    color: slateblue;
}
.color-slateblue .card-back {
    background: radial-gradient(ellipse at center, white 20%, slateblue 120%);
}
.color-slateblue .back-icon {
    background-color: slateblue;
}

/* olivedrab */
.color-olivedrab {
    background-color: olivedrab;
    border-color: olivedrab;
}
.color-olivedrab .ruler {
    background-color: olivedrab;
}
.color-olivedrab h3{
    border-color: olivedrab;
    color: olivedrab;
}
.color-olivedrab .card-back {
    background: radial-gradient(ellipse at center, white 20%, olivedrab 120%);
}
.color-olivedrab .back-icon {
    background-color: olivedrab;
}

/* slategray */
.color-slategray {
    background-color: slategray;
    border-color: slategray;
}
.color-slategray .ruler {
    background-color: slategray;
}
.color-slategray h3{
    border-color: slategray;
    color: slategray;
}
.color-slategray .card-back {
    background: radial-gradient(ellipse at center, white 20%, slategray 120%);
}
.color-slategray .back-icon {
    background-color: slategray;
}

/* lightslategray */
.color-lightslategray {
    background-color: lightslategray;
    border-color: lightslategray;
}
.color-lightslategray .ruler {
    background-color: lightslategray;
}
.color-lightslategray h3{
    border-color: lightslategray;
    color: lightslategray;
}
.color-lightslategray .card-back {
    background: radial-gradient(ellipse at center, white 20%, lightslategray 120%);
}
.color-lightslategray .back-icon {
    background-color: lightslategray;
}

/* mediumslateblue */
.color-mediumslateblue {
    background-color: mediumslateblue;
    border-color: mediumslateblue;
}
.color-mediumslateblue .ruler {
    background-color: mediumslateblue;
}
.color-mediumslateblue h3{
    border-color: mediumslateblue;
    color: mediumslateblue;
}
.color-mediumslateblue .card-back {
    background: radial-gradient(ellipse at center, white 20%, mediumslateblue 120%);
}
.color-mediumslateblue .back-icon {
    background-color: mediumslateblue;
}

/* lawngreen */
.color-lawngreen {
    background-color: lawngreen;
    border-color: lawngreen;
}
.color-lawngreen .ruler {
    background-color: lawngreen;
}
.color-lawngreen h3{
    border-color: lawngreen;
    color: lawngreen;
}
.color-lawngreen .card-back {
    background: radial-gradient(ellipse at center, white 20%, lawngreen 120%);
}
.color-lawngreen .back-icon {
    background-color: lawngreen;
}

/* chartreuse */
.color-chartreuse {
    background-color: chartreuse;
    border-color: chartreuse;
}
.color-chartreuse .ruler {
    background-color: chartreuse;
}
.color-chartreuse h3{
    border-color: chartreuse;
    color: chartreuse;
}
.color-chartreuse .card-back {
    background: radial-gradient(ellipse at center, white 20%, chartreuse 120%);
}
.color-chartreuse .back-icon {
    background-color: chartreuse;
}

/* aquamarine */
.color-aquamarine {
    background-color: aquamarine;
    border-color: aquamarine;
}
.color-aquamarine .ruler {
    background-color: aquamarine;
}
.color-aquamarine h3{
    border-color: aquamarine;
    color: aquamarine;
}
.color-aquamarine .card-back {
    background: radial-gradient(ellipse at center, white 20%, aquamarine 120%);
}
.color-aquamarine .back-icon {
    background-color: aquamarine;
}

/* maroon */
.color-maroon {
    background-color: maroon;
    border-color: maroon;
}
.color-maroon .ruler {
    background-color: maroon;
}
.color-maroon h3{
    border-color: maroon;
    color: maroon;
}
.color-maroon .card-back {
    background: radial-gradient(ellipse at center, white 20%, maroon 120%);
}
.color-maroon .back-icon {
    background-color: maroon;
}

/* purple */
.color-purple {
    background-color: purple;
    border-color: purple;
}
.color-purple .ruler {
    background-color: purple;
}
.color-purple h3{
    border-color: purple;
    color: purple;
}
.color-purple .card-back {
    background: radial-gradient(ellipse at center, white 20%, purple 120%);
}
.color-purple .back-icon {
    background-color: purple;
}

/* olive */
.color-olive {
    background-color: olive;
    border-color: olive;
}
.color-olive .ruler {
    background-color: olive;
}
.color-olive h3{
    border-color: olive;
    color: olive;
}
.color-olive .card-back {
    background: radial-gradient(ellipse at center, white 20%, olive 120%);
}
.color-olive .back-icon {
    background-color: olive;
}

/* gray */
.color-gray {
    background-color: gray;
    border-color: gray;
}
.color-gray .ruler {
    background-color: gray;
}
.color-gray h3{
    border-color: gray;
    color: gray;
}
.color-gray .card-back {
    background: radial-gradient(ellipse at center, white 20%, gray 120%);
}
.color-gray .back-icon {
    background-color: gray;
}

/* skyblue */
.color-skyblue {
    background-color: skyblue;
    border-color: skyblue;
}
.color-skyblue .ruler {
    background-color: skyblue;
}
.color-skyblue h3{
    border-color: skyblue;
    color: skyblue;
}
.color-skyblue .card-back {
    background: radial-gradient(ellipse at center, white 20%, skyblue 120%);
}
.color-skyblue .back-icon {
    background-color: skyblue;
}

/* lightskyblue */
.color-lightskyblue {
    background-color: lightskyblue;
    border-color: lightskyblue;
}
.color-lightskyblue .ruler {
    background-color: lightskyblue;
}
.color-lightskyblue h3{
    border-color: lightskyblue;
    color: lightskyblue;
}
.color-lightskyblue .card-back {
    background: radial-gradient(ellipse at center, white 20%, lightskyblue 120%);
}
.color-lightskyblue .back-icon {
    background-color: lightskyblue;
}

/* blueviolet */
.color-blueviolet {
    background-color: blueviolet;
    border-color: blueviolet;
}
.color-blueviolet .ruler {
    background-color: blueviolet;
}
.color-blueviolet h3{
    border-color: blueviolet;
    color: blueviolet;
}
.color-blueviolet .card-back {
    background: radial-gradient(ellipse at center, white 20%, blueviolet 120%);
}
.color-blueviolet .back-icon {
    background-color: blueviolet;
}

/* darkred */
.color-darkred {
    background-color: darkred;
    border-color: darkred;
}
.color-darkred .ruler {
    background-color: darkred;
}
.color-darkred h3{
    border-color: darkred;
    color: darkred;
}
.color-darkred .card-back {
    background: radial-gradient(ellipse at center, white 20%, darkred 120%);
}
.color-darkred .back-icon {
    background-color: darkred;
}

/* darkmagenta */
.color-darkmagenta {
    background-color: darkmagenta;
    border-color: darkmagenta;
}
.color-darkmagenta .ruler {
    background-color: darkmagenta;
}
.color-darkmagenta h3{
    border-color: darkmagenta;
    color: darkmagenta;
}
.color-darkmagenta .card-back {
    background: radial-gradient(ellipse at center, white 20%, darkmagenta 120%);
}
.color-darkmagenta .back-icon {
    background-color: darkmagenta;
}

/* saddlebrown */
.color-saddlebrown {
    background-color: saddlebrown;
    border-color: saddlebrown;
}
.color-saddlebrown .ruler {
    background-color: saddlebrown;
}
.color-saddlebrown h3{
    border-color: saddlebrown;
    color: saddlebrown;
}
.color-saddlebrown .card-back {
    background: radial-gradient(ellipse at center, white 20%, saddlebrown 120%);
}
.color-saddlebrown .back-icon {
    background-color: saddlebrown;
}

/* darkseagreen */
.color-darkseagreen {
    background-color: darkseagreen;
    border-color: darkseagreen;
}
.color-darkseagreen .ruler {
    background-color: darkseagreen;
}
.color-darkseagreen h3{
    border-color: darkseagreen;
    color: darkseagreen;
}
.color-darkseagreen .card-back {
    background: radial-gradient(ellipse at center, white 20%, darkseagreen 120%);
}
.color-darkseagreen .back-icon {
    background-color: darkseagreen;
}

/* lightgreen */
.color-lightgreen {
    background-color: lightgreen;
    border-color: lightgreen;
}
.color-lightgreen .ruler {
    background-color: lightgreen;
}
.color-lightgreen h3{
    border-color: lightgreen;
    color: lightgreen;
}
.color-lightgreen .card-back {
    background: radial-gradient(ellipse at center, white 20%, lightgreen 120%);
}
.color-lightgreen .back-icon {
    background-color: lightgreen;
}

/* mediumpurple */
.color-mediumpurple {
    background-color: mediumpurple;
    border-color: mediumpurple;
}
.color-mediumpurple .ruler {
    background-color: mediumpurple;
}
.color-mediumpurple h3{
    border-color: mediumpurple;
    color: mediumpurple;
}
.color-mediumpurple .card-back {
    background: radial-gradient(ellipse at center, white 20%, mediumpurple 120%);
}
.color-mediumpurple .back-icon {
    background-color: mediumpurple;
}

/* darkviolet */
.color-darkviolet {
    background-color: darkviolet;
    border-color: darkviolet;
}
.color-darkviolet .ruler {
    background-color: darkviolet;
}
.color-darkviolet h3{
    border-color: darkviolet;
    color: darkviolet;
}
.color-darkviolet .card-back {
    background: radial-gradient(ellipse at center, white 20%, darkviolet 120%);
}
.color-darkviolet .back-icon {
    background-color: darkviolet;
}

/* palegreen */
.color-palegreen {
    background-color: palegreen;
    border-color: palegreen;
}
.color-palegreen .ruler {
    background-color: palegreen;
}
.color-palegreen h3{
    border-color: palegreen;
    color: palegreen;
}
.color-palegreen .card-back {
    background: radial-gradient(ellipse at center, white 20%, palegreen 120%);
}
.color-palegreen .back-icon {
    background-color: palegreen;
}

/* darkorchid */
.color-darkorchid {
    background-color: darkorchid;
    border-color: darkorchid;
}
.color-darkorchid .ruler {
    background-color: darkorchid;
}
.color-darkorchid h3{
    border-color: darkorchid;
    color: darkorchid;
}
.color-darkorchid .card-back {
    background: radial-gradient(ellipse at center, white 20%, darkorchid 120%);
}
.color-darkorchid .back-icon {
    background-color: darkorchid;
}

/* yellowgreen */
.color-yellowgreen {
    background-color: yellowgreen;
    border-color: yellowgreen;
}
.color-yellowgreen .ruler {
    background-color: yellowgreen;
}
.color-yellowgreen h3{
    border-color: yellowgreen;
    color: yellowgreen;
}
.color-yellowgreen .card-back {
    background: radial-gradient(ellipse at center, white 20%, yellowgreen 120%);
}
.color-yellowgreen .back-icon {
    background-color: yellowgreen;
}

/* sienna */
.color-sienna {
    background-color: sienna;
    border-color: sienna;
}
.color-sienna .ruler {
    background-color: sienna;
}
.color-sienna h3{
    border-color: sienna;
    color: sienna;
}
.color-sienna .card-back {
    background: radial-gradient(ellipse at center, white 20%, sienna 120%);
}
.color-sienna .back-icon {
    background-color: sienna;
}

/* brown */
.color-brown {
    background-color: brown;
    border-color: brown;
}
.color-brown .ruler {
    background-color: brown;
}
.color-brown h3{
    border-color: brown;
    color: brown;
}
.color-brown .card-back {
    background: radial-gradient(ellipse at center, white 20%, brown 120%);
}
.color-brown .back-icon {
    background-color: brown;
}

/* darkgray */
.color-darkgray {
    background-color: darkgray;
    border-color: darkgray;
}
.color-darkgray .ruler {
    background-color: darkgray;
}
.color-darkgray h3{
    border-color: darkgray;
    color: darkgray;
}
.color-darkgray .card-back {
    background: radial-gradient(ellipse at center, white 20%, darkgray 120%);
}
.color-darkgray .back-icon {
    background-color: darkgray;
}

/* lightblue */
.color-lightblue {
    background-color: lightblue;
    border-color: lightblue;
}
.color-lightblue .ruler {
    background-color: lightblue;
}
.color-lightblue h3{
    border-color: lightblue;
    color: lightblue;
}
.color-lightblue .card-back {
    background: radial-gradient(ellipse at center, white 20%, lightblue 120%);
}
.color-lightblue .back-icon {
    background-color: lightblue;
}

/* greenyellow */
.color-greenyellow {
    background-color: greenyellow;
    border-color: greenyellow;
}
.color-greenyellow .ruler {
    background-color: greenyellow;
}
.color-greenyellow h3{
    border-color: greenyellow;
    color: greenyellow;
}
.color-greenyellow .card-back {
    background: radial-gradient(ellipse at center, white 20%, greenyellow 120%);
}
.color-greenyellow .back-icon {
    background-color: greenyellow;
}

/* paleturquoise */
.color-paleturquoise {
    background-color: paleturquoise;
    border-color: paleturquoise;
}
.color-paleturquoise .ruler {
    background-color: paleturquoise;
}
.color-paleturquoise h3{
    border-color: paleturquoise;
    color: paleturquoise;
}
.color-paleturquoise .card-back {
    background: radial-gradient(ellipse at center, white 20%, paleturquoise 120%);
}
.color-paleturquoise .back-icon {
    background-color: paleturquoise;
}

/* lightsteelblue */
.color-lightsteelblue {
    background-color: lightsteelblue;
    border-color: lightsteelblue;
}
.color-lightsteelblue .ruler {
    background-color: lightsteelblue;
}
.color-lightsteelblue h3{
    border-color: lightsteelblue;
    color: lightsteelblue;
}
.color-lightsteelblue .card-back {
    background: radial-gradient(ellipse at center, white 20%, lightsteelblue 120%);
}
.color-lightsteelblue .back-icon {
    background-color: lightsteelblue;
}

/* powderblue */
.color-powderblue {
    background-color: powderblue;
    border-color: powderblue;
}
.color-powderblue .ruler {
    background-color: powderblue;
}
.color-powderblue h3{
    border-color: powderblue;
    color: powderblue;
}
.color-powderblue .card-back {
    background: radial-gradient(ellipse at center, white 20%, powderblue 120%);
}
.color-powderblue .back-icon {
    background-color: powderblue;
}

/* firebrick */
.color-firebrick {
    background-color: firebrick;
    border-color: firebrick;
}
.color-firebrick .ruler {
    background-color: firebrick;
}
.color-firebrick h3{
    border-color: firebrick;
    color: firebrick;
}
.color-firebrick .card-back {
    background: radial-gradient(ellipse at center, white 20%, firebrick 120%);
}
.color-firebrick .back-icon {
    background-color: firebrick;
}

/* darkgoldenrod */
.color-darkgoldenrod {
    background-color: darkgoldenrod;
    border-color: darkgoldenrod;
}
.color-darkgoldenrod .ruler {
    background-color: darkgoldenrod;
}
.color-darkgoldenrod h3{
    border-color: darkgoldenrod;
    color: darkgoldenrod;
}
.color-darkgoldenrod .card-back {
    background: radial-gradient(ellipse at center, white 20%, darkgoldenrod 120%);
}
.color-darkgoldenrod .back-icon {
    background-color: darkgoldenrod;
}

/* mediumorchid */
.color-mediumorchid {
    background-color: mediumorchid;
    border-color: mediumorchid;
}
.color-mediumorchid .ruler {
    background-color: mediumorchid;
}
.color-mediumorchid h3{
    border-color: mediumorchid;
    color: mediumorchid;
}
.color-mediumorchid .card-back {
    background: radial-gradient(ellipse at center, white 20%, mediumorchid 120%);
}
.color-mediumorchid .back-icon {
    background-color: mediumorchid;
}

/* rosybrown */
.color-rosybrown {
    background-color: rosybrown;
    border-color: rosybrown;
}
.color-rosybrown .ruler {
    background-color: rosybrown;
}
.color-rosybrown h3{
    border-color: rosybrown;
    color: rosybrown;
}
.color-rosybrown .card-back {
    background: radial-gradient(ellipse at center, white 20%, rosybrown 120%);
}
.color-rosybrown .back-icon {
    background-color: rosybrown;
}

/* darkkhaki */
.color-darkkhaki {
    background-color: darkkhaki;
    border-color: darkkhaki;
}
.color-darkkhaki .ruler {
    background-color: darkkhaki;
}
.color-darkkhaki h3{
    border-color: darkkhaki;
    color: darkkhaki;
}
.color-darkkhaki .card-back {
    background: radial-gradient(ellipse at center, white 20%, darkkhaki 120%);
}
.color-darkkhaki .back-icon {
    background-color: darkkhaki;
}

/* silver */
.color-silver {
    background-color: silver;
    border-color: silver;
}
.color-silver .ruler {
    background-color: silver;
}
.color-silver h3{
    border-color: silver;
    color: silver;
}
.color-silver .card-back {
    background: radial-gradient(ellipse at center, white 20%, silver 120%);
}
.color-silver .back-icon {
    background-color: silver;
}

/* mediumvioletred */
.color-mediumvioletred {
    background-color: mediumvioletred;
    border-color: mediumvioletred;
}
.color-mediumvioletred .ruler {
    background-color: mediumvioletred;
}
.color-mediumvioletred h3{
    border-color: mediumvioletred;
    color: mediumvioletred;
}
.color-mediumvioletred .card-back {
    background: radial-gradient(ellipse at center, white 20%, mediumvioletred 120%);
}
.color-mediumvioletred .back-icon {
    background-color: mediumvioletred;
}

/* indianred */
.color-indianred {
    background-color: indianred;
    border-color: indianred;
}
.color-indianred .ruler {
    background-color: indianred;
}
.color-indianred h3{
    border-color: indianred;
    color: indianred;
}
.color-indianred .card-back {
    background: radial-gradient(ellipse at center, white 20%, indianred 120%);
}
.color-indianred .back-icon {
    background-color: indianred;
}

/* peru */
.color-peru {
    background-color: peru;
    border-color: peru;
}
.color-peru .ruler {
    background-color: peru;
}
.color-peru h3{
    border-color: peru;
    color: peru;
}
.color-peru .card-back {
    background: radial-gradient(ellipse at center, white 20%, peru 120%);
}
.color-peru .back-icon {
    background-color: peru;
}

/* chocolate */
.color-chocolate {
    background-color: chocolate;
    border-color: chocolate;
}
.color-chocolate .ruler {
    background-color: chocolate;
}
.color-chocolate h3{
    border-color: chocolate;
    color: chocolate;
}
.color-chocolate .card-back {
    background: radial-gradient(ellipse at center, white 20%, chocolate 120%);
}
.color-chocolate .back-icon {
    background-color: chocolate;
}

/* tan */
.color-tan {
    background-color: tan;
    border-color: tan;
}
.color-tan .ruler {
    background-color: tan;
}
.color-tan h3{
    border-color: tan;
    color: tan;
}
.color-tan .card-back {
    background: radial-gradient(ellipse at center, white 20%, tan 120%);
}
.color-tan .back-icon {
    background-color: tan;
}

/* lightgray */
.color-lightgray {
    background-color: lightgray;
    border-color: lightgray;
}
.color-lightgray .ruler {
    background-color: lightgray;
}
.color-lightgray h3{
    border-color: lightgray;
    color: lightgray;
}
.color-lightgray .card-back {
    background: radial-gradient(ellipse at center, white 20%, lightgray 120%);
}
.color-lightgray .back-icon {
    background-color: lightgray;
}

/* thistle */
.color-thistle {
    background-color: thistle;
    border-color: thistle;
}
.color-thistle .ruler {
    background-color: thistle;
}
.color-thistle h3{
    border-color: thistle;
    color: thistle;
}
.color-thistle .card-back {
    background: radial-gradient(ellipse at center, white 20%, thistle 120%);
}
.color-thistle .back-icon {
    background-color: thistle;
}

/* orchid */
.color-orchid {
    background-color: orchid;
    border-color: orchid;
}
.color-orchid .ruler {
    background-color: orchid;
}
.color-orchid h3{
    border-color: orchid;
    color: orchid;
}
.color-orchid .card-back {
    background: radial-gradient(ellipse at center, white 20%, orchid 120%);
}
.color-orchid .back-icon {
    background-color: orchid;
}

/* goldenrod */
.color-goldenrod {
    background-color: goldenrod;
    border-color: goldenrod;
}
.color-goldenrod .ruler {
    background-color: goldenrod;
}
.color-goldenrod h3{
    border-color: goldenrod;
    color: goldenrod;
}
.color-goldenrod .card-back {
    background: radial-gradient(ellipse at center, white 20%, goldenrod 120%);
}
.color-goldenrod .back-icon {
    background-color: goldenrod;
}

/* palevioletred */
.color-palevioletred {
    background-color: palevioletred;
    border-color: palevioletred;
}
.color-palevioletred .ruler {
    background-color: palevioletred;
}
.color-palevioletred h3{
    border-color: palevioletred;
    color: palevioletred;
}
.color-palevioletred .card-back {
    background: radial-gradient(ellipse at center, white 20%, palevioletred 120%);
}
.color-palevioletred .back-icon {
    background-color: palevioletred;
}

/* crimson */
.color-crimson {
    background-color: crimson;
    border-color: crimson;
}
.color-crimson .ruler {
    background-color: crimson;
}
.color-crimson h3{
    border-color: crimson;
    color: crimson;
}
.color-crimson .card-back {
    background: radial-gradient(ellipse at center, white 20%, crimson 120%);
}
.color-crimson .back-icon {
    background-color: crimson;
}

/* gainsboro */
.color-gainsboro {
    background-color: gainsboro;
    border-color: gainsboro;
}
.color-gainsboro .ruler {
    background-color: gainsboro;
}
.color-gainsboro h3{
    border-color: gainsboro;
    color: gainsboro;
}
.color-gainsboro .card-back {
    background: radial-gradient(ellipse at center, white 20%, gainsboro 120%);
}
.color-gainsboro .back-icon {
    background-color: gainsboro;
}

/* plum */
.color-plum {
    background-color: plum;
    border-color: plum;
}
.color-plum .ruler {
    background-color: plum;
}
.color-plum h3{
    border-color: plum;
    color: plum;
}
.color-plum .card-back {
    background: radial-gradient(ellipse at center, white 20%, plum 120%);
}
.color-plum .back-icon {
    background-color: plum;
}

/* burlywood */
.color-burlywood {
    background-color: burlywood;
    border-color: burlywood;
}
.color-burlywood .ruler {
    background-color: burlywood;
}
.color-burlywood h3{
    border-color: burlywood;
    color: burlywood;
}
.color-burlywood .card-back {
    background: radial-gradient(ellipse at center, white 20%, burlywood 120%);
}
.color-burlywood .back-icon {
    background-color: burlywood;
}

/* lightcyan */
.color-lightcyan {
    background-color: lightcyan;
    border-color: lightcyan;
}
.color-lightcyan .ruler {
    background-color: lightcyan;
}
.color-lightcyan h3{
    border-color: lightcyan;
    color: lightcyan;
}
.color-lightcyan .card-back {
    background: radial-gradient(ellipse at center, white 20%, lightcyan 120%);
}
.color-lightcyan .back-icon {
    background-color: lightcyan;
}

/* lavender */
.color-lavender {
    background-color: lavender;
    border-color: lavender;
}
.color-lavender .ruler {
    background-color: lavender;
}
.color-lavender h3{
    border-color: lavender;
    color: lavender;
}
.color-lavender .card-back {
    background: radial-gradient(ellipse at center, white 20%, lavender 120%);
}
.color-lavender .back-icon {
    background-color: lavender;
}

/* darksalmon */
.color-darksalmon {
    background-color: darksalmon;
    border-color: darksalmon;
}
.color-darksalmon .ruler {
    background-color: darksalmon;
}
.color-darksalmon h3{
    border-color: darksalmon;
    color: darksalmon;
}
.color-darksalmon .card-back {
    background: radial-gradient(ellipse at center, white 20%, darksalmon 120%);
}
.color-darksalmon .back-icon {
    background-color: darksalmon;
}

/* violet */
.color-violet {
    background-color: violet;
    border-color: violet;
}
.color-violet .ruler {
    background-color: violet;
}
.color-violet h3{
    border-color: violet;
    color: violet;
}
.color-violet .card-back {
    background: radial-gradient(ellipse at center, white 20%, violet 120%);
}
.color-violet .back-icon {
    background-color: violet;
}

/* palegoldenrod */
.color-palegoldenrod {
    background-color: palegoldenrod;
    border-color: palegoldenrod;
}
.color-palegoldenrod .ruler {
    background-color: palegoldenrod;
}
.color-palegoldenrod h3{
    border-color: palegoldenrod;
    color: palegoldenrod;
}
.color-palegoldenrod .card-back {
    background: radial-gradient(ellipse at center, white 20%, palegoldenrod 120%);
}
.color-palegoldenrod .back-icon {
    background-color: palegoldenrod;
}

/* lightcoral */
.color-lightcoral {
    background-color: lightcoral;
    border-color: lightcoral;
}
.color-lightcoral .ruler {
    background-color: lightcoral;
}
.color-lightcoral h3{
    border-color: lightcoral;
    color: lightcoral;
}
.color-lightcoral .card-back {
    background: radial-gradient(ellipse at center, white 20%, lightcoral 120%);
}
.color-lightcoral .back-icon {
    background-color: lightcoral;
}

/* khaki */
.color-khaki {
    background-color: khaki;
    border-color: khaki;
}
.color-khaki .ruler {
    background-color: khaki;
}
.color-khaki h3{
    border-color: khaki;
    color: khaki;
}
.color-khaki .card-back {
    background: radial-gradient(ellipse at center, white 20%, khaki 120%);
}
.color-khaki .back-icon {
    background-color: khaki;
}

/* aliceblue */
.color-aliceblue {
    background-color: aliceblue;
    border-color: aliceblue;
}
.color-aliceblue .ruler {
    background-color: aliceblue;
}
.color-aliceblue h3{
    border-color: aliceblue;
    color: aliceblue;
}
.color-aliceblue .card-back {
    background: radial-gradient(ellipse at center, white 20%, aliceblue 120%);
}
.color-aliceblue .back-icon {
    background-color: aliceblue;
}

/* honeydew */
.color-honeydew {
    background-color: honeydew;
    border-color: honeydew;
}
.color-honeydew .ruler {
    background-color: honeydew;
}
.color-honeydew h3{
    border-color: honeydew;
    color: honeydew;
}
.color-honeydew .card-back {
    background: radial-gradient(ellipse at center, white 20%, honeydew 120%);
}
.color-honeydew .back-icon {
    background-color: honeydew;
}

/* azure */
.color-azure {
    background-color: azure;
    border-color: azure;
}
.color-azure .ruler {
    background-color: azure;
}
.color-azure h3{
    border-color: azure;
    color: azure;
}
.color-azure .card-back {
    background: radial-gradient(ellipse at center, white 20%, azure 120%);
}
.color-azure .back-icon {
    background-color: azure;
}

/* sandybrown */
.color-sandybrown {
    background-color: sandybrown;
    border-color: sandybrown;
}
.color-sandybrown .ruler {
    background-color: sandybrown;
}
.color-sandybrown h3{
    border-color: sandybrown;
    color: sandybrown;
}
.color-sandybrown .card-back {
    background: radial-gradient(ellipse at center, white 20%, sandybrown 120%);
}
.color-sandybrown .back-icon {
    background-color: sandybrown;
}

/* wheat */
.color-wheat {
    background-color: wheat;
    border-color: wheat;
}
.color-wheat .ruler {
    background-color: wheat;
}
.color-wheat h3{
    border-color: wheat;
    color: wheat;
}
.color-wheat .card-back {
    background: radial-gradient(ellipse at center, white 20%, wheat 120%);
}
.color-wheat .back-icon {
    background-color: wheat;
}

/* beige */
.color-beige {
    background-color: beige;
    border-color: beige;
}
.color-beige .ruler {
    background-color: beige;
}
.color-beige h3{
    border-color: beige;
    color: beige;
}
.color-beige .card-back {
    background: radial-gradient(ellipse at center, white 20%, beige 120%);
}
.color-beige .back-icon {
    background-color: beige;
}

/* whitesmoke */
.color-whitesmoke {
    background-color: whitesmoke;
    border-color: whitesmoke;
}
.color-whitesmoke .ruler {
    background-color: whitesmoke;
}
.color-whitesmoke h3{
    border-color: whitesmoke;
    color: whitesmoke;
}
.color-whitesmoke .card-back {
    background: radial-gradient(ellipse at center, white 20%, whitesmoke 120%);
}
.color-whitesmoke .back-icon {
    background-color: whitesmoke;
}

/* mintcream */
.color-mintcream {
    background-color: mintcream;
    border-color: mintcream;
}
.color-mintcream .ruler {
    background-color: mintcream;
}
.color-mintcream h3{
    border-color: mintcream;
    color: mintcream;
}
.color-mintcream .card-back {
    background: radial-gradient(ellipse at center, white 20%, mintcream 120%);
}
.color-mintcream .back-icon {
    background-color: mintcream;
}

/* ghostwhite */
.color-ghostwhite {
    background-color: ghostwhite;
    border-color: ghostwhite;
}
.color-ghostwhite .ruler {
    background-color: ghostwhite;
}
.color-ghostwhite h3{
    border-color: ghostwhite;
    color: ghostwhite;
}
.color-ghostwhite .card-back {
    background: radial-gradient(ellipse at center, white 20%, ghostwhite 120%);
}
.color-ghostwhite .back-icon {
    background-color: ghostwhite;
}

/* salmon */
.color-salmon {
    background-color: salmon;
    border-color: salmon;
}
.color-salmon .ruler {
    background-color: salmon;
}
.color-salmon h3{
    border-color: salmon;
    color: salmon;
}
.color-salmon .card-back {
    background: radial-gradient(ellipse at center, white 20%, salmon 120%);
}
.color-salmon .back-icon {
    background-color: salmon;
}

/* antiquewhite */
.color-antiquewhite {
    background-color: antiquewhite;
    border-color: antiquewhite;
}
.color-antiquewhite .ruler {
    background-color: antiquewhite;
}
.color-antiquewhite h3{
    border-color: antiquewhite;
    color: antiquewhite;
}
.color-antiquewhite .card-back {
    background: radial-gradient(ellipse at center, white 20%, antiquewhite 120%);
}
.color-antiquewhite .back-icon {
    background-color: antiquewhite;
}

/* linen */
.color-linen {
    background-color: linen;
    border-color: linen;
}
.color-linen .ruler {
    background-color: linen;
}
.color-linen h3{
    border-color: linen;
    color: linen;
}
.color-linen .card-back {
    background: radial-gradient(ellipse at center, white 20%, linen 120%);
}
.color-linen .back-icon {
    background-color: linen;
}

/* lightgoldenrodyellow */
.color-lightgoldenrodyellow {
    background-color: lightgoldenrodyellow;
    border-color: lightgoldenrodyellow;
}
.color-lightgoldenrodyellow .ruler {
    background-color: lightgoldenrodyellow;
}
.color-lightgoldenrodyellow h3{
    border-color: lightgoldenrodyellow;
    color: lightgoldenrodyellow;
}
.color-lightgoldenrodyellow .card-back {
    background: radial-gradient(ellipse at center, white 20%, lightgoldenrodyellow 120%);
}
.color-lightgoldenrodyellow .back-icon {
    background-color: lightgoldenrodyellow;
}

/* oldlace */
.color-oldlace {
    background-color: oldlace;
    border-color: oldlace;
}
.color-oldlace .ruler {
    background-color: oldlace;
}
.color-oldlace h3{
    border-color: oldlace;
    color: oldlace;
}
.color-oldlace .card-back {
    background: radial-gradient(ellipse at center, white 20%, oldlace 120%);
}
.color-oldlace .back-icon {
    background-color: oldlace;
}

/* red */
.color-red {
    background-color: red;
    border-color: red;
}
.color-red .ruler {
    background-color: red;
}
.color-red h3{
    border-color: red;
    color: red;
}
.color-red .card-back {
    background: radial-gradient(ellipse at center, white 20%, red 120%);
}
.color-red .back-icon {
    background-color: red;
}

/* fuchsia */
.color-fuchsia {
    background-color: fuchsia;
    border-color: fuchsia;
}
.color-fuchsia .ruler {
    background-color: fuchsia;
}
.color-fuchsia h3{
    border-color: fuchsia;
    color: fuchsia;
}
.color-fuchsia .card-back {
    background: radial-gradient(ellipse at center, white 20%, fuchsia 120%);
}
.color-fuchsia .back-icon {
    background-color: fuchsia;
}

/* magenta */
.color-magenta {
    background-color: magenta;
    border-color: magenta;
}
.color-magenta .ruler {
    background-color: magenta;
}
.color-magenta h3{
    border-color: magenta;
    color: magenta;
}
.color-magenta .card-back {
    background: radial-gradient(ellipse at center, white 20%, magenta 120%);
}
.color-magenta .back-icon {
    background-color: magenta;
}

/* deeppink */
.color-deeppink {
    background-color: deeppink;
    border-color: deeppink;
}
.color-deeppink .ruler {
    background-color: deeppink;
}
.color-deeppink h3{
    border-color: deeppink;
    color: deeppink;
}
.color-deeppink .card-back {
    background: radial-gradient(ellipse at center, white 20%, deeppink 120%);
}
.color-deeppink .back-icon {
    background-color: deeppink;
}

/* orangered */
.color-orangered {
    background-color: orangered;
    border-color: orangered;
}
.color-orangered .ruler {
    background-color: orangered;
}
.color-orangered h3{
    border-color: orangered;
    color: orangered;
}
.color-orangered .card-back {
    background: radial-gradient(ellipse at center, white 20%, orangered 120%);
}
.color-orangered .back-icon {
    background-color: orangered;
}

/* tomato */
.color-tomato {
    background-color: tomato;
    border-color: tomato;
}
.color-tomato .ruler {
    background-color: tomato;
}
.color-tomato h3{
    border-color: tomato;
    color: tomato;
}
.color-tomato .card-back {
    background: radial-gradient(ellipse at center, white 20%, tomato 120%);
}
.color-tomato .back-icon {
    background-color: tomato;
}

/* hotpink */
.color-hotpink {
    background-color: hotpink;
    border-color: hotpink;
}
.color-hotpink .ruler {
    background-color: hotpink;
}
.color-hotpink h3{
    border-color: hotpink;
    color: hotpink;
}
.color-hotpink .card-back {
    background: radial-gradient(ellipse at center, white 20%, hotpink 120%);
}
.color-hotpink .back-icon {
    background-color: hotpink;
}

/* coral */
.color-coral {
    background-color: coral;
    border-color: coral;
}
.color-coral .ruler {
    background-color: coral;
}
.color-coral h3{
    border-color: coral;
    color: coral;
}
.color-coral .card-back {
    background: radial-gradient(ellipse at center, white 20%, coral 120%);
}
.color-coral .back-icon {
    background-color: coral;
}

/* darkorange */
.color-darkorange {
    background-color: darkorange;
    border-color: darkorange;
}
.color-darkorange .ruler {
    background-color: darkorange;
}
.color-darkorange h3{
    border-color: darkorange;
    color: darkorange;
}
.color-darkorange .card-back {
    background: radial-gradient(ellipse at center, white 20%, darkorange 120%);
}
.color-darkorange .back-icon {
    background-color: darkorange;
}

/* lightsalmon */
.color-lightsalmon {
    background-color: lightsalmon;
    border-color: lightsalmon;
}
.color-lightsalmon .ruler {
    background-color: lightsalmon;
}
.color-lightsalmon h3{
    border-color: lightsalmon;
    color: lightsalmon;
}
.color-lightsalmon .card-back {
    background: radial-gradient(ellipse at center, white 20%, lightsalmon 120%);
}
.color-lightsalmon .back-icon {
    background-color: lightsalmon;
}

/* orange */
.color-orange {
    background-color: orange;
    border-color: orange;
}
.color-orange .ruler {
    background-color: orange;
}
.color-orange h3{
    border-color: orange;
    color: orange;
}
.color-orange .card-back {
    background: radial-gradient(ellipse at center, white 20%, orange 120%);
}
.color-orange .back-icon {
    background-color: orange;
}

/* lightpink */
.color-lightpink {
    background-color: lightpink;
    border-color: lightpink;
}
.color-lightpink .ruler {
    background-color: lightpink;
}
.color-lightpink h3{
    border-color: lightpink;
    color: lightpink;
}
.color-lightpink .card-back {
    background: radial-gradient(ellipse at center, white 20%, lightpink 120%);
}
.color-lightpink .back-icon {
    background-color: lightpink;
}

/* pink */
.color-pink {
    background-color: pink;
    border-color: pink;
}
.color-pink .ruler {
    background-color: pink;
}
.color-pink h3{
    border-color: pink;
    color: pink;
}
.color-pink .card-back {
    background: radial-gradient(ellipse at center, white 20%, pink 120%);
}
.color-pink .back-icon {
    background-color: pink;
}

/* gold */
.color-gold {
    background-color: gold;
    border-color: gold;
}
.color-gold .ruler {
    background-color: gold;
}
.color-gold h3{
    border-color: gold;
    color: gold;
}
.color-gold .card-back {
    background: radial-gradient(ellipse at center, white 20%, gold 120%);
}
.color-gold .back-icon {
    background-color: gold;
}

/* peachpuff */
.color-peachpuff {
    background-color: peachpuff;
    border-color: peachpuff;
}
.color-peachpuff .ruler {
    background-color: peachpuff;
}
.color-peachpuff h3{
    border-color: peachpuff;
    color: peachpuff;
}
.color-peachpuff .card-back {
    background: radial-gradient(ellipse at center, white 20%, peachpuff 120%);
}
.color-peachpuff .back-icon {
    background-color: peachpuff;
}

/* navajowhite */
.color-navajowhite {
    background-color: navajowhite;
    border-color: navajowhite;
}
.color-navajowhite .ruler {
    background-color: navajowhite;
}
.color-navajowhite h3{
    border-color: navajowhite;
    color: navajowhite;
}
.color-navajowhite .card-back {
    background: radial-gradient(ellipse at center, white 20%, navajowhite 120%);
}
.color-navajowhite .back-icon {
    background-color: navajowhite;
}

/* moccasin */
.color-moccasin {
    background-color: moccasin;
    border-color: moccasin;
}
.color-moccasin .ruler {
    background-color: moccasin;
}
.color-moccasin h3{
    border-color: moccasin;
    color: moccasin;
}
.color-moccasin .card-back {
    background: radial-gradient(ellipse at center, white 20%, moccasin 120%);
}
.color-moccasin .back-icon {
    background-color: moccasin;
}

/* bisque */
.color-bisque {
    background-color: bisque;
    border-color: bisque;
}
.color-bisque .ruler {
    background-color: bisque;
}
.color-bisque h3{
    border-color: bisque;
    color: bisque;
}
.color-bisque .card-back {
    background: radial-gradient(ellipse at center, white 20%, bisque 120%);
}
.color-bisque .back-icon {
    background-color: bisque;
}

/* mistyrose */
.color-mistyrose {
    background-color: mistyrose;
    border-color: mistyrose;
}
.color-mistyrose .ruler {
    background-color: mistyrose;
}
.color-mistyrose h3{
    border-color: mistyrose;
    color: mistyrose;
}
.color-mistyrose .card-back {
    background: radial-gradient(ellipse at center, white 20%, mistyrose 120%);
}
.color-mistyrose .back-icon {
    background-color: mistyrose;
}

/* blanchedalmond */
.color-blanchedalmond {
    background-color: blanchedalmond;
    border-color: blanchedalmond;
}
.color-blanchedalmond .ruler {
    background-color: blanchedalmond;
}
.color-blanchedalmond h3{
    border-color: blanchedalmond;
    color: blanchedalmond;
}
.color-blanchedalmond .card-back {
    background: radial-gradient(ellipse at center, white 20%, blanchedalmond 120%);
}
.color-blanchedalmond .back-icon {
    background-color: blanchedalmond;
}

/* papayawhip */
.color-papayawhip {
    background-color: papayawhip;
    border-color: papayawhip;
}
.color-papayawhip .ruler {
    background-color: papayawhip;
}
.color-papayawhip h3{
    border-color: papayawhip;
    color: papayawhip;
}
.color-papayawhip .card-back {
    background: radial-gradient(ellipse at center, white 20%, papayawhip 120%);
}
.color-papayawhip .back-icon {
    background-color: papayawhip;
}

/* lavenderblush */
.color-lavenderblush {
    background-color: lavenderblush;
    border-color: lavenderblush;
}
.color-lavenderblush .ruler {
    background-color: lavenderblush;
}
.color-lavenderblush h3{
    border-color: lavenderblush;
    color: lavenderblush;
}
.color-lavenderblush .card-back {
    background: radial-gradient(ellipse at center, white 20%, lavenderblush 120%);
}
.color-lavenderblush .back-icon {
    background-color: lavenderblush;
}

/* seashell */
.color-seashell {
    background-color: seashell;
    border-color: seashell;
}
.color-seashell .ruler {
    background-color: seashell;
}
.color-seashell h3{
    border-color: seashell;
    color: seashell;
}
.color-seashell .card-back {
    background: radial-gradient(ellipse at center, white 20%, seashell 120%);
}
.color-seashell .back-icon {
    background-color: seashell;
}

/* cornsilk */
.color-cornsilk {
    background-color: cornsilk;
    border-color: cornsilk;
}
.color-cornsilk .ruler {
    background-color: cornsilk;
}
.color-cornsilk h3{
    border-color: cornsilk;
    color: cornsilk;
}
.color-cornsilk .card-back {
    background: radial-gradient(ellipse at center, white 20%, cornsilk 120%);
}
.color-cornsilk .back-icon {
    background-color: cornsilk;
}

/* lemonchiffon */
.color-lemonchiffon {
    background-color: lemonchiffon;
    border-color: lemonchiffon;
}
.color-lemonchiffon .ruler {
    background-color: lemonchiffon;
}
.color-lemonchiffon h3{
    border-color: lemonchiffon;
    color: lemonchiffon;
}
.color-lemonchiffon .card-back {
    background: radial-gradient(ellipse at center, white 20%, lemonchiffon 120%);
}
.color-lemonchiffon .back-icon {
    background-color: lemonchiffon;
}

/* floralwhite */
.color-floralwhite {
    background-color: floralwhite;
    border-color: floralwhite;
}
.color-floralwhite .ruler {
    background-color: floralwhite;
}
.color-floralwhite h3{
    border-color: floralwhite;
    color: floralwhite;
}
.color-floralwhite .card-back {
    background: radial-gradient(ellipse at center, white 20%, floralwhite 120%);
}
.color-floralwhite .back-icon {
    background-color: floralwhite;
}

/* snow */
.color-snow {
    background-color: snow;
    border-color: snow;
}
.color-snow .ruler {
    background-color: snow;
}
.color-snow h3{
    border-color: snow;
    color: snow;
}
.color-snow .card-back {
    background: radial-gradient(ellipse at center, white 20%, snow 120%);
}
.color-snow .back-icon {
    background-color: snow;
}

/* yellow */
.color-yellow {
    background-color: yellow;
    border-color: yellow;
}
.color-yellow .ruler {
    background-color: yellow;
}
.color-yellow h3{
    border-color: yellow;
    color: yellow;
}
.color-yellow .card-back {
    background: radial-gradient(ellipse at center, white 20%, yellow 120%);
}
.color-yellow .back-icon {
    background-color: yellow;
}

/* lightyellow */
.color-lightyellow {
    background-color: lightyellow;
    border-color: lightyellow;
}
.color-lightyellow .ruler {
    background-color: lightyellow;
}
.color-lightyellow h3{
    border-color: lightyellow;
    color: lightyellow;
}
.color-lightyellow .card-back {
    background: radial-gradient(ellipse at center, white 20%, lightyellow 120%);
}
.color-lightyellow .back-icon {
    background-color: lightyellow;
}

/* ivory */
.color-ivory {
    background-color: ivory;
    border-color: ivory;
}
.color-ivory .ruler {
    background-color: ivory;
}
.color-ivory h3{
    border-color: ivory;
    color: ivory;
}
.color-ivory .card-back {
    background: radial-gradient(ellipse at center, white 20%, ivory 120%);
}
.color-ivory .back-icon {
    background-color: ivory;
}

/* white */
.color-white {
    background-color: white;
    border-color: white;
}
.color-white .ruler {
    background-color: white;
}
.color-white h3{
    border-color: white;
    color: white;
}
.color-white .card-back {
    background: radial-gradient(ellipse at center, white 20%, white 120%);
}
.color-white .back-icon {
    background-color: white;
}