minor styling changes

articles/circle_script.article.html

@@ -4,8 +4,13 @@
 	margin-left: auto;
 	margin-right: auto;
 }
-td, .vowel-sequence {
+td {
 	padding: 2em;
+}
+.vowel-example {
+	padding: 1em;
+}
+td, .vowel-sequence {
 	border: 2px solid gray;
 }
 table > img {
@@ -13,7 +18,7 @@ table > img {
 	height: 50%;
 }
 .hero-example {
-	width: 60%;
+	width: 50%;
 	display: block;
 	margin-left: auto;
 	margin-right: auto;
@@ -24,15 +29,22 @@ table > img {
 	margin-left: auto;
 	margin-right: auto;
 }
+#vowel-grid {
+	display: block;
+	width: 60%;
+}
+.vowel-sequence {
+	display: block;
+}
 .vowel-example {
 	display: inline-block;
 }
 .vowel-example * {
 	vertical-align: middle;
 }
-.vowel-example svg {
+.vowel-example > svg {
-	width: 6em;
+	width: 3em;
-	height: 6em;
+	height: 3em;
 }
 </style>
 <h3>An introduction to Circle Script (Version... 3?)</h3>
@@ -231,5 +243,4 @@ table > img {
 	</div>
 </div>
 <p>If you merge caught-cot, it is preferred to use the strong vowel /a~ɑ/ rather than the weak /ɔ/ vowel.</p>
-
 </article>