CSS
.color-0 {
-webkit-filter: hue-rotate(0deg);
filter: hue-rotate(0deg);
}
.color-1 {
-webkit-filter: hue-rotate(30deg);
filter: hue-rotate(30deg);
}
.color-2 {
-webkit-filter: hue-rotate(60deg);
filter: hue-rotate(60deg);
}
.color-3 {
-webkit-filter: hue-rotate(90deg);
filter: hue-rotate(90deg);
}
.color-4 {
-webkit-filter: hue-rotate(120deg);
filter: hue-rotate(120deg);
}
.color-5 {
-webkit-filter: hue-rotate(150deg);
filter: hue-rotate(150deg);
}
.color-6 {
-webkit-filter: hue-rotate(180deg);
filter: hue-rotate(180deg);
}
.color-7 {
-webkit-filter: hue-rotate(210deg);
filter: hue-rotate(210deg);
}
.color-8 {
-webkit-filter: hue-rotate(240deg);
filter: hue-rotate(240deg);
}
.color-9 {
-webkit-filter: hue-rotate(270deg);
filter: hue-rotate(270deg);
}
.color-10 {
-webkit-filter: hue-rotate(300deg);
filter: hue-rotate(300deg);
}
.color-11 {
-webkit-filter: hue-rotate(330deg);
filter: hue-rotate(330deg);
}
.diamond {
color: #855223;
display: inline-block;
font-size: 8em;
}
.container {
width: 35em;
}
body {
height:100vh;
display: flex;
align-items: center;
justify-content: center;
}