Template to make drop-caps from Google Fonts

dabblet.css

/**
 * Template to make drop-caps from Google Fonts
 */
@import url('https://fonts.googleapis.com/css?family=Cousine');

html {
	--size: 50rem;
	--color-back: white;
	--color-fore: #ff8000;
	--color-outline: black;
	--font: "Cousine"; 
}

li {
	background: var(--color-back);
	color: var(--color-fore);
	display: block;
	float: left;
	font-family: var(--font);
	font-size: var(--size);
	font-weight: bold;
	height: calc(var(--size) * 0.80);
	line-height: 0.95;
	margin: calc(var(--size)*0.1);
	outline: 1px solid;
	padding: 0 0.1em 0 0.03em;
	text-align: left;
	text-shadow:
		-1px -1px 0 var(--color-outline),
		1px -1px 0 var(--color-outline),
		-1px 1px 0 var(--color-outline),
		1px 1px 0 var(--color-outline);
	--width: calc( var(--size) * 0.65 ) ;
}

body {
	background: var(--color-back);
}

dabblet.html

<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<!--
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>M</li>
<li>N</li>
<li>O</li>
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
<li>T</li>
<li>U</li>
<li>V</li>
<li>W</li>
<li>X</li>
<li>Y</li>
<li>Z</li>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
<li>h</li>
<li>i</li>
<li>j</li>
<li>k</li>
<li>l</li>
<li>m</li>
<li>n</li>
<li>o</li>
<li>p</li>
<li>q</li>
<li>r</li>
<li>s</li>
<li>t</li>
<li>u</li>
<li>v</li>
<li>w</li>
<li>x</li>
<li>y</li>
<li>z</li>
<li>!</li>
<li>"</li>
<li>#</li>
<li>$</li>
<li>%</li>
<li>&</li>
<li>'</li>
<li>(</li>
<li>)</li>
<li>*</li>
<li>+</li>
<li>,</li>
<li>-</li>
<li>.</li>
<li>/</li>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>:</li>
<li>;</li>
<li><</li>
<li>=</li>
<li>></li>
<li>?</li>
<li>@</li>
<li>[</li>
<li>\</li>
<li>]</li>
<li>^</li>
<li>_</li>
<li>{</li>
<li>|</li>
<li>}</li>
-->
</ul>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}