Style the elm area too

site/styles.scss

@@ -95,3 +95,64 @@ header {
 		border-left-color: transparent;
 	}
 }
+
+#elm-area {
+	display: grid;
+	grid-template-columns: 50% 50%;
+	gap: 50px;
+	margin: 0 -180px;
+
+	.module-button > div {
+		box-sizing: border-box;
+		display: grid;
+		grid-template-columns: 0fr 1fr;
+		grid-template-rows: 0fr 1fr;
+		gap: 20px;
+
+		height: 100%;
+		padding: 29px;
+
+		border: 3px solid var(--color-hi);
+
+		& > :last-child {
+			grid-area: 2/1/3/3;
+		}
+
+		h3 {
+			margin: 0;
+			align-self: center;
+		}
+
+		p {
+			margin: 0;
+		}
+	}
+
+	.module-button.active > div {
+		border: 12px double var(--color-hi);
+		padding: 20px;
+	}
+}
+
+.cooler-checkbox {
+	height: 40px;
+	width: 40px;
+	border: 3px solid #1c87d8;
+	position: relative;
+
+	input {
+		display: none;
+	}
+
+	label.active &:after {
+		content: "";
+		position: absolute;
+		left: 12px;
+		top: 0px;
+		width: 11px;
+		height: 24px;
+		border: solid #1c87d8;
+		border-width: 0 6px 6px 0;
+		transform: rotate(39deg);
+	}
+}

src/Main.elm

@@ -52,13 +52,19 @@ update msg model =
 view_module_button : Set Module -> Module -> Html Msg
 view_module_button enabled mod =
   label
-    (if Sort.Set.memberOf enabled mod then [class "active"] else [])
+    (class "module-button"
-    [ input
+      :: (if Sort.Set.memberOf enabled mod then [class "active"] else [])
-      [ type_ "checkbox"
+      )
-      , onCheck (ToggleModule mod)
+    [ div []
-      ] []
+      [ div [class "cooler-checkbox"]
-    , h3 [] [ text (module_property .name mod) ]
+        [ input
-    , p [] (module_desc mod)
+          [ type_ "checkbox"
+          , onCheck (ToggleModule mod)
+          ] []
+        ]
+      , h3 [] [ text (module_property .name mod) ]
+      , p [] (module_desc mod)
+      ]
     ]
 
 view : Model -> Html Msg