I believe the customized checkbox and radio button are done and working. Just need to give them a good theme.

base.css

@@ -1,6 +1,14 @@
+/*
+	Source: https://www.freecodecamp.org/news/css-units-when-to-use-each-one/
+	
+	rem - standards for "root em" and is equal to the font size of the root element (16px in many browsers).
+	em - "is relative to the font size of the parent element or the font-size of the nearest parent with a defined font size."
+*/
 :root {
 	--default-font-size: 16px;
 	--default-spacing: 10px;
+	--default-border-thickness: 0.15rem;
+	--default-border-style: solid var(--default-border-thickness) black;
 }
 body {
 	line-height: 1.5;
@@ -19,35 +27,124 @@ legend {
 textarea, input {
 	padding: var(--default-spacing);
 	font-size: var(--default-font-size);
+	font: inherit;
+	color: currentColor;
 }
 
 .flex {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
+	gap: 1em;
 }
 
 header {
 	grid-area: header;
-	border: solid 1px black;
+	border: var(--default-border-style);
 }
 
 article {
 	grid-area: content;
-	border: solid 1px black;
+	border: var(--default-border-style);
 }
 
 aside {
 	grid-area: sidebar;
-	border: solid 1px black;
+	border: var(--default-border-style);
 }
 
 .details {
 	grid-area: details;
-	border: solid 1px black;
+	border: var(--default-border-style);
 }
 
 footer {
 	grid-area: footer;
-	border: solid 1px black;
-}
+	border: var(--default-border-style);
+}
+
+/* Override default OS provided checkboxes and radio buttons */
+
+/* === CHECKBOX === */
+/* Source: Checkbox - https://moderncss.dev/pure-css-custom-checkbox-style */
+/* Source: Radio Button - https://moderncss.dev/pure-css-custom-styled-radio-buttons/ */
+
+input[type="checkbox"]:checked::before, input[type="radio"]:checked::before {
+	/* Make this :before element visible when it is checked */
+ 	transform: scale(1);
+}
+
+input[type="checkbox"]:disabled, input[type="radio"]:disabled {
+	cursor: not-allowed;
+}
+
+/* Set the size and properties of the box that represents the checkbox */
+input[type=checkbox] {
+	appearance: none; /*Hide the defualt OS provided control*/
+	margin: 0; /* Not removed by appearance */
+	width: 1.15rem;
+	height: 1.15rem;
+	border: var(--default-border-style);
+	border-radius: 0.15em; /* Slightly round the edges */
+	/* Set the control to grid so the :before element is centered in the box, assuming the button is checked */
+	display: grid;
+  	place-content: center;
+}
+
+/* Sets the size and animation of the check mark */
+input[type=checkbox]::before {
+	content: "";
+	width: 0.80rem;
+	height: 0.80rem;
+	transform: scale(0); /* Hide this :before element until it is checked */
+	transition: 120ms transform ease-in-out;
+	
+	transform-origin: bottom left;
+	/* A site to draw shapes or grab common ones: https://bennettfeely.com/clippy */
+	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+	/* CSS support for "forced colors", which may be refered to as Windows High Contrast Mode (WHCM) */
+	/* 
+		When the OS is in high contrast the box-shadow is completely removed preventing the user from seeing that the
+	   	control is checked.
+	*/
+	/* More details at: https://moderncss.dev/pure-css-custom-checkbox-style/#step-4-the-focus-state titled "High Contrast Themes and Forced Colors" */
+	background-color: CanvasText;
+	/* shadow-box is setup by the theme CSS pages */
+}
+/* === END CHECKBOX  === */
+
+/* === BEGIN RADIO BUTTON === */
+/* Set the size and properties of the circle that represents the radio button */
+input[type=radio] {
+	appearance: none; /* Hide the defualt OS provided control */
+	margin: 0; /* Not removed by appearance */
+	width: 1.75rem;
+	height: 1.75rem;
+	border-radius: 50%; /* Round the edges of the box so they appear as a circle */
+	border: var(--default-border-style);
+	transition: 0.2s all linear;
+	/* Set the control to grid so the :before element is centered in the circle, assuming the button is checked */
+	display: grid;
+  	place-content: center;
+	/* Override the default paddingto prevent too thick of a border around the inner circle in the radio button */
+	padding: 5px;
+}
+
+/* Inner circle to indicate a checked radio button */
+input[type="radio"]::before {
+	content: "";
+	width: 0.65rem;
+	height: 0.65rem;
+	border-radius: 50%;
+	transform: scale(0); /* Hide this :before element until it is checked */
+	transition: 120ms transform ease-in-out;
+	/* CSS support for "forced colors", which may be refered to as Windows High Contrast Mode (WHCM) */
+	/* 
+		When the OS is in high contrast the box-shadow is completely removed preventing the user from seeing that the
+	   	control is checked.
+	*/
+	/* More details at: https://moderncss.dev/pure-css-custom-styled-radio-buttons/#step-4-the-checked-state titled "High Contrast Themes and Forced Colors" */
+	background-color: CanvasText;
+	/* shadow-box is setup by the theme CSS pages */
+}
+/* === END RADIO BUTTON === */