:root {
--circled-number-color: lime;
    --circled-number-color: crimson;
    --circled-number-shadow-color: black;
}


.html-circled-ol li {
    list-style: none;
}

.html-circled-number,
.html-circled-ol li:nth-child(1n)::before {
    font-weight: bold;
    font-size: larger;
    color: var(--circled-number-color);
    filter: drop-shadow(1px 1px 0 var(--circled-number-shadow-color));
}


.html-circled-ol li:nth-child(1)::before {
    content: '① ';
}
.html-circled-ol li:nth-child(2)::before {
    content: '② ';
}
.html-circled-ol li:nth-child(3)::before {
    content: '③ ';
}
.html-circled-ol li:nth-child(4)::before {
    content: '④ ';
}
.html-circled-ol li:nth-child(5)::before {
    content: '⑤ ';
}
.html-circled-ol li:nth-child(6)::before {
    content: '⑥ ';
}
.html-circled-ol li:nth-child(7)::before {
    content: '⑦ ';
}
.html-circled-ol li:nth-child(8)::before {
    content: '⑧ ';
}
.html-circled-ol li:nth-child(9)::before {
    content: '⑨ ';
}
.html-circled-ol li:nth-child(10)::before {
    content: '⑩ ';
}
.html-circled-ol li:nth-child(11)::before {
    content: '⑪ ';
}
.html-circled-ol li:nth-child(12)::before {
    content: '⑫ ';
}
.html-circled-ol li:nth-child(13)::before {
    content: '⑬ ';
}
.html-circled-ol li:nth-child(14)::before {
    content: '⑭ ';
}
.html-circled-ol li:nth-child(15)::before {
    content: '⑮ ';
}
.html-circled-ol li:nth-child(16)::before {
    content: '⑯ ';
}
.html-circled-ol li:nth-child(17)::before {
    content: '⑰ ';
}
.html-circled-ol li:nth-child(18)::before {
    content: '⑱ ';
}
.html-circled-ol li:nth-child(19)::before {
    content: '⑲ ';
}
.html-circled-ol li:nth-child(20)::before {
    content: '⑳ ';
}
/*
https://en.wikipedia.org/wiki/Enclosed_Alphanumerics
https://stackoverflow.com/questions/5732836/html-css-numbered-list-with-numbers-inside-of-circles
https://www.unicode.org/charts/nameslist/n_2460.html
http://xahlee.info/comp/unicode_circled_numbers.html
https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type
https://developer.mozilla.org/en-US/docs/Web/CSS/custom-ident

https://stackoverflow.com/questions/4476526/do-i-use-img-object-or-embed-for-svg-files
https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_in_HTML
https://www.w3.org/TR/SVG/linking.html#SVGFragmentIdentifiers

2460	 ① 	Circled Digit One
 	 	≈	<circle> 0031 1
2461	 ② 	Circled Digit Two
 	 	≈	<circle> 0032 2
2462	 ③ 	Circled Digit Three
 	 	≈	<circle> 0033 3
2463	 ④ 	Circled Digit Four
 	 	≈	<circle> 0034 4
2464	 ⑤ 	Circled Digit Five
 	 	≈	<circle> 0035 5
2465	 ⑥ 	Circled Digit Six
 	 	≈	<circle> 0036 6
2466	 ⑦ 	Circled Digit Seven
 	 	≈	<circle> 0037 7
2467	 ⑧ 	Circled Digit Eight
 	 	≈	<circle> 0038 8
2468	 ⑨ 	Circled Digit Nine
 	 	≈	<circle> 0039 9
2469	 ⑩ 	Circled Number Ten
 	 	≈	<circle> 0031 1 0030 0
246A	 ⑪ 	Circled Number Eleven
 	 	≈	<circle> 0031 1 0031 1
246B	 ⑫ 	Circled Number Twelve
 	 	≈	<circle> 0031 1 0032 2
246C	 ⑬ 	Circled Number Thirteen
 	 	≈	<circle> 0031 1 0033 3
246D	 ⑭ 	Circled Number Fourteen
 	 	≈	<circle> 0031 1 0034 4
246E	 ⑮ 	Circled Number Fifteen
 	 	≈	<circle> 0031 1 0035 5
246F	 ⑯ 	Circled Number Sixteen
 	 	≈	<circle> 0031 1 0036 6
2470	 ⑰ 	Circled Number Seventeen
 	 	≈	<circle> 0031 1 0037 7
2471	 ⑱ 	Circled Number Eighteen
 	 	≈	<circle> 0031 1 0038 8
2472	 ⑲ 	Circled Number Nineteen
 	 	≈	<circle> 0031 1 0039 9
2473	 ⑳ 	Circled Number Twenty
 	 	≈	<circle> 0032 2 0030 0
*/


.svg-circled-number-circle {
    /* https://stackoverflow.com/questions/6088409/svg-drop-shadow-using-css3 */
    /* https://css-tricks.com/adding-shadows-to-svg-icons-with-css-and-svg-filters/ */
    /* filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 1)); */
    filter: drop-shadow(1px 1px 0 var(--circled-number-shadow-color));
    stroke: var(--circled-number-color);
    stroke-width: 9px;
}

.svg-circled-number-text {
    text-anchor: middle;
    dominant-baseline: middle;
    fill: var(--circled-number-color);
    font-size: 55px;
    font-weight: bold;
    font-family: sans-serif;
    /* filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 1)); */
    filter: drop-shadow(1px 1px 0 var(--circled-number-shadow-color));
}