diff --git a/public/assets/css/base.css b/public/assets/css/base.css
index 9f4fd24282..7a6ee167c8 100644
--- a/public/assets/css/base.css
+++ b/public/assets/css/base.css
@@ -213,4 +213,79 @@ input.larger {
 #toggle-right:checked+.arrow {
       transform: rotate(-45deg);
       transition: 0.3s ease;
+}
+
+/* styling radio buttons and checkboxes */
+input[type="checkbox"] + label::before {
+      content: '';
+      position: relative;
+      display: inline-block;
+      margin-right: 5px;
+      width: var(--medium-size);
+      height: var(--medium-size);
+      background: var(--fg);
+      border-radius: 10%
+}
+input[type="checkbox"]:checked + label::before {
+      background: var(--accent);
+      border-radius: 10%;
+}
+input[type="checkbox"]:focus + label::before,
+input[type="checkbox"]:hover + label::before{
+      border-radius: 10%;
+      box-shadow: 0 0px 8px var(--accent);
+}
+input[type="checkbox"] {
+      position: absolute;
+      height: 1px;
+      width: 1px;
+      overflow: hidden;
+      clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+      clip: rect(1px, 1px, 1px, 1px);
+}
+
+
+input[type="radio"] + label::before {
+      content: '';
+      position: relative;
+      display: inline-block;
+      margin-right: 5px;
+      width: var(--medium-size);
+      height: var(--medium-size);
+      background: var(--fg);
+      border-radius: 50%
+}
+input[type="radio"]:checked + label::before {
+      background: var(--accent);
+      border-radius: 50%
+}
+input[type="radio"]:focus + label::before,
+input[type="radio"]:hover + label::before{
+      border-radius: 50%;
+      box-shadow: 0 0px 8px var(--accent);
+}
+input[type="radio"] {
+      position: absolute;
+      height: 1px;
+      width: 1px;
+      overflow: hidden;
+      clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+      clip: rect(1px, 1px, 1px, 1px);
+}
+button[type=submit] {
+      background: var(--bg1);
+      padding: 0.3em 1em;
+      color: var(--fg);
+      border-style: solid;
+      border-color: var(--accent);
+      border-radius: var(--small-size);
+      border-width: 2px;
+      font-family: 'Montserrat', sans-serif;
+      font-size: var(--small-size);
+      font-weight: 700;
+}
+button[type=submit]:focus,
+button[type=submit]:hover {
+      border-radius: var(--small-size);
+      box-shadow: 0 0px 8px var(--accent);
 }
\ No newline at end of file
diff --git a/public/assets/css/base_mid.css b/public/assets/css/base_mid.css
index d2627857c4..2677038081 100644
--- a/public/assets/css/base_mid.css
+++ b/public/assets/css/base_mid.css
@@ -239,4 +239,79 @@ input.larger {
 #toggle-right:checked+.arrow {
       transform: rotate(-45deg);
       transition: 0.3s ease;
+}
+
+/* styling radio buttons and checkboxes */
+input[type="checkbox"] + label::before {
+      content: '';
+      position: relative;
+      display: inline-block;
+      margin-right: 5px;
+      width: var(--medium-size);
+      height: var(--medium-size);
+      background: var(--fg);
+      border-radius: 10%
+}
+input[type="checkbox"]:checked + label::before {
+      background: var(--accent);
+      border-radius: 10%;
+}
+input[type="checkbox"]:focus + label::before,
+input[type="checkbox"]:hover + label::before{
+      border-radius: 10%;
+      box-shadow: 0 0px 8px var(--accent);
+}
+input[type="checkbox"] {
+      position: absolute;
+      height: 1px;
+      width: 1px;
+      overflow: hidden;
+      clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+      clip: rect(1px, 1px, 1px, 1px);
+}
+
+
+input[type="radio"] + label::before {
+      content: '';
+      position: relative;
+      display: inline-block;
+      margin-right: 5px;
+      width: var(--medium-size);
+      height: var(--medium-size);
+      background: var(--fg);
+      border-radius: 50%
+}
+input[type="radio"]:checked + label::before {
+      background: var(--accent);
+      border-radius: 50%
+}
+input[type="radio"]:focus + label::before,
+input[type="radio"]:hover + label::before{
+      border-radius: 50%;
+      box-shadow: 0 0px 8px var(--accent);
+}
+input[type="radio"] {
+      position: absolute;
+      height: 1px;
+      width: 1px;
+      overflow: hidden;
+      clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+      clip: rect(1px, 1px, 1px, 1px);
+}
+button[type=submit] {
+      background: var(--bg1);
+      padding: 0.3em 1em;
+      color: var(--fg);
+      border-style: solid;
+      border-color: var(--accent);
+      border-radius: var(--small-size);
+      border-width: 2px;
+      font-family: 'Montserrat', sans-serif;
+      font-size: var(--small-size);
+      font-weight: 700;
+}
+button[type=submit]:focus,
+button[type=submit]:hover {
+      border-radius: var(--small-size);
+      box-shadow: 0 0px 8px var(--accent);
 }
\ No newline at end of file
diff --git a/public/assets/css/base_small.css b/public/assets/css/base_small.css
index 6ff99ef6a7..df8d91ef5f 100644
--- a/public/assets/css/base_small.css
+++ b/public/assets/css/base_small.css
@@ -238,4 +238,79 @@ input.larger {
 #toggle-right:checked+.arrow {
       transform: rotate(-45deg);
       transition: 0.3s ease;
+}
+
+/* styling radio buttons and checkboxes */
+input[type="checkbox"] + label::before {
+      content: '';
+      position: relative;
+      display: inline-block;
+      margin-right: 5px;
+      width: var(--medium-size);
+      height: var(--medium-size);
+      background: var(--fg);
+      border-radius: 10%
+}
+input[type="checkbox"]:checked + label::before {
+      background: var(--accent);
+      border-radius: 10%;
+}
+input[type="checkbox"]:focus + label::before,
+input[type="checkbox"]:hover + label::before{
+      border-radius: 10%;
+      box-shadow: 0 0px 8px var(--accent);
+}
+input[type="checkbox"] {
+      position: absolute;
+      height: 1px;
+      width: 1px;
+      overflow: hidden;
+      clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+      clip: rect(1px, 1px, 1px, 1px);
+}
+
+
+input[type="radio"] + label::before {
+      content: '';
+      position: relative;
+      display: inline-block;
+      margin-right: 5px;
+      width: var(--medium-size);
+      height: var(--medium-size);
+      background: var(--fg);
+      border-radius: 50%
+}
+input[type="radio"]:checked + label::before {
+      background: var(--accent);
+      border-radius: 50%
+}
+input[type="radio"]:focus + label::before,
+input[type="radio"]:hover + label::before{
+      border-radius: 50%;
+      box-shadow: 0 0px 8px var(--accent);
+}
+input[type="radio"] {
+      position: absolute;
+      height: 1px;
+      width: 1px;
+      overflow: hidden;
+      clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+      clip: rect(1px, 1px, 1px, 1px);
+}
+button[type=submit] {
+      background: var(--bg1);
+      padding: 0.3em 1em;
+      color: var(--fg);
+      border-style: solid;
+      border-color: var(--accent);
+      border-radius: var(--small-size);
+      border-width: 2px;
+      font-family: 'Montserrat', sans-serif;
+      font-size: var(--small-size);
+      font-weight: 700;
+}
+button[type=submit]:focus,
+button[type=submit]:hover {
+      border-radius: var(--small-size);
+      box-shadow: 0 0px 8px var(--accent);
 }
\ No newline at end of file