square the circle the square the circle the square the squircle

dabblet.css

/* square the circle the square the circle the square the squircle */

body > :nth-child(2n) { border-radius:1ex }

body > :nth-child(1),
body > :nth-child(2) { font-size:calc(100vh / 6.854) }
body > :nth-child(3),
body > :nth-child(4) { font-size:calc(100vh / 4.236) }
body > :nth-child(5),
body > :nth-child(6) { font-size:calc(100vh / 2.618) }
body > :nth-child(7),
body > :nth-child(8) { font-size:calc(100vh / 1.618) }
body > :nth-child(9),
body > :nth-child(10) { font-size:calc(100vh / 1) }
body * {
	position:absolute; left:calc(50% - 1ex); top:calc(50% - 1ex);
	font-size:1em; line-height:1;
	width:1em; height:1em; 
	margin:0; padding:0; border:1px solid red; box-sizing:border-box }
	
/* debug? * /
body * { background:hsla(120,50%,50%,.2); border-color:red }/**/

dabblet.html

<img>
<img>
<img>
<img>
<img>
<img>
<img>
<img>
<img>
<img>

dabblet.js

// alert('Hello world!');

settings.json

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