Attempted a custom radio button setup.

test.html

@@ -23,6 +23,19 @@
 			color: var(--main-font-color);
 		}
 		
+		input[type=radio] {
+			appearance: none;
+
+			border-radius: 50%;
+			border: 2px solid var(--main-bg-color);
+			transition: 0.2s all linear;
+		}
+		
+		input:checked {
+			background-color: black;
+			border: 2px solid var(--main-bg-color);
+		}		
+		
 		input[type=button] {
 			border: var(--border-style);
 		}
@@ -68,10 +81,7 @@
 		.flex {
 			display: flex;
 			flex-wrap: wrap;
-		}
-		
-		.flex > * {
-			flex: 1 1 auto;
+			align-items: center;
 		}
 		
 		header {
@@ -173,7 +183,7 @@
 			<fieldset>
 				<legend>A radio button group, with a "name" property set</legend>
 				<!--TODO: How well does this setup work with accessibility tech?-->
-				<!--A radio button group, not the "name" property-->
+				<!--A radio button group, not the "name" property
 				<label>
 				  <input type="radio" name="radio">
 				  <span class="checkmark">No relations</span>
@@ -185,7 +195,15 @@
 				<label>
 				  <input type="radio" name="radio">
 				  <span class="checkmark">The real Uncle Ruckus</span>
-				</label>
+				</label>-->
+				<div class="flex">
+					<input type="radio" id="radio1" name="radio" Checked />
+					<label for="radio1">No relations</label>
+					<input type="radio" id="radio2" name="radio" />
+					<label for="radio2">Uncle Ruckus</label>
+					<input type="radio" id="radio3" name="radio" />
+					<label for="radio3">Reverend Father</label>
+				</div>
 			</fieldset>
 		</footer>
 	</div>