Messed around with radio buttons / groups, checkboxes and 'Group Boxes'.

test.html

@@ -4,6 +4,9 @@
 	<!--Low contrast theme-->
 	<style>
 		:root {
+			/*Fallback is a thing with the var() function
+			https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#defining_fallbacks_in_the_var_function
+			*/
 			--main-bg-color: #adadad;
 			--alt-bg-color: #e6e6e6;
 			--main-font-color: #134e13;
@@ -39,17 +42,27 @@
 	</style>
 	<!--End themes-->
 	<style>
+		:root {
+			--default-font-size: 16px;
+			--default-spacing: 10px;
+		}
 		body {
 			line-height: 1.5;
 		}
 		
-		p, h1, h2, h3, h4, h5, textarea, input {
+		p, h1, h2, h3, h4, h5, textarea, input, fieldset {
-			margin: 10px;
+			margin: var(--default-spacing);
+		}
+		
+		legend {
+			padding: 5px;
+			font-size: 18px;
+			font-weight: bold;
 		}
 		
 		textarea, input {
-			padding: 10px;
+			padding: var(--default-spacing);
-			font-size: 16px;
+			font-size: var(--default-font-size);
 		}
 		
 		.flex {
@@ -153,6 +166,27 @@
 		</aside>
 		<footer>
 			<h2>Copyrights crusading like a mad man for that shit</h2>
+			<label>
+			  <input type="checkbox" checked="checked">
+			  <span class="checkmark">One</span>
+			</label>
+			<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-->
+				<label>
+				  <input type="radio" name="radio">
+				  <span class="checkmark">No relations</span>
+				</label>
+				<label>
+				  <input type="radio" name="radio">
+				  <span class="checkmark">Uncle Rucuks</span>
+				</label>
+				<label>
+				  <input type="radio" name="radio">
+				  <span class="checkmark">The real Uncle Ruckus</span>
+				</label>
+			</fieldset>
 		</footer>
 	</div>
 	<!--<div class="main-layout">