Basic form element styling

Fieldset, legend and label.

docs/v3/DEVLOG.md

@@ -94,3 +94,4 @@
 - Added conditions for `box-shadow` values in `core`. The module is mostly complete, apart from extra features that I might want to add in the future.
 - Decided not to add the `select` fix in `input_control`. Browsers are pretty wild around the element and its use cases are causing a ton of complications. It is possible, but quite unlikely that it will be rebuilt in the old way in the future, but most likely it will just follow the OS/Browser/Native UI as it should have done originally. It's debatable if this is for the best, but quite frankly it saves me a lot of time and effort for a single element and a lot of bytes in the codebase. I would rather not style it and provide an outside fix for safety, one that goes a bit against semantics to provide better styling. If you are reading this and want to tell me why this was a bad choice and led to the demise of the **hugging cat**, kindly do!
 - Added styling for `form` elements, simplified the values of `padding` to make them more reasonable and uniform.
+- `legend` elements now have larger text (`1rem` over `0.875rem` in the past). This is done with accessibility in mind, making sure that users will have an easier time reading forms, which are a crucially important part of websites nowadays. Also simplified padding to be more universal and avoid cluttering.

docs/v3_dev/src/index.css

@@ -586,6 +586,24 @@ a:hover, a:focus {
   }
 }
 
+/*
+  Definitions for forms and input elements.
+*/
+form {
+  background: var(--secondary-back-color);
+  border: 0.0625rem solid var(--secondary-border-color);
+  border-radius: var(--universal-border-radius);
+  margin: var(--universal-margin);
+  padding: calc(2 * var(--universal-padding)) var(--universal-padding);
+}
+
+fieldset {
+  border: 0.0625rem solid var(--secondary-border-color);
+  border-radius: var(--universal-border-radius);
+  margin: calc(var(--universal-margin) / 4);
+  padding: var(--universal-padding);
+}
+
 :not(.doc) {
   font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;
 }

src/mini/_input_control.scss

@@ -9,7 +9,7 @@
 // Base form styling
 form {  // Text color is the default, this can be changed manually.
   background: var(#{$secondary-back-color-var});
-  border:  $__1px solid var(#{$secondary-border-color-var});
+  border: $__1px solid var(#{$secondary-border-color-var});
   border-radius: var(#{$universal-border-radius-var});
   margin: var(#{$universal-margin-var});
   padding: calc(2 * var(#{$universal-padding-var})) var(#{$universal-padding-var});
@@ -17,3 +17,26 @@ form {  // Text color is the default, this can be changed manually.
     box-shadow: var(#{$universal-box-shadow-var});
   }
 }
+// Fieldset styling
+fieldset {
+  // Apply always to overwrite defaults for all of the below.
+  border: $__1px solid var(#{$secondary-border-color-var});
+  border-radius: var(#{$universal-border-radius-var});
+  margin: calc(var(#{$universal-margin-var}) / 4);
+  padding: var(#{$universal-padding-var});
+}
+// Legend styling.
+legend {
+  // Edge fixes.
+  box-sizing: border-box;
+  display: table;
+  max-width: 100%;
+  white-space: normal;
+  // Actual styling.
+  font-weight: $bold-font-weight;
+  padding: calc(var(#{$universal-padding-var}) / 2);
+}
+// Label syling. - Basically just padding, but there might be more in the future.
+label {
+  padding: calc(var(#{$universal-padding-var}) / 2) var(#{$universal-padding-var});
+}