implemented additional todo functionality

css/base.css

@@ -33,6 +33,8 @@ a,
 th,
 td,
 li,
+select,
+option,
 span {
   font-family: 'Hack Nerd Font Mono', Hack, sans-serif;
   padding: 0;
@@ -352,6 +354,8 @@ textarea:-webkit-autofill,
 input:-webkit-autofill:hover,
 textarea:-webkit-autofill:hover,
 input:-webkit-autofill:focus,
+select,
+option,
 textarea {
   /* Try this first */
   border-radius: 12px;
@@ -361,6 +365,11 @@ textarea {
   box-sizing: border-box;
   transition-duration: 500ms;
   resize: none;
+  background-color: transparent;
+}
+
+input[type="datetime_local"] {
+  color: white;
 }
 
 input:focus,
@@ -746,63 +755,8 @@ hr {
   margin-bottom: 5px;
 }
 
-.todo_display {
-  margin: 0 auto;
-  margin-top: 25px;
-  width: 80%;
-  height: 80vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
 
-.todo_actions {
-  padding: 15px;
-  border: 2px solid white;
-  border-radius: 8px;
-  width: 100%;
-  box-sizing: border-box;
-  margin-bottom: 25px;
-}
 
-.todo_actions form {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-evenly;
-}
-
-.todo_category_window {
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  height: 100%;
-  overflow-x: scroll;
-  overflow-y: none;
-}
-
-.todo_category {
-  display: block;
-  min-width: 400px;
-  margin-right: 50px;
-  overflow-y: scroll;
-  overflow-x: none;
-}
-
-.todo_category h4 {
-  text-align: center;
-  position: relative;
-}
-
-.todo_list {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.todo_item {
-  width: 100%;
-}
 
 @media screen and (max-width: 992px) {
   body {

css/rewrite.css

@@ -1,3 +1,8 @@
+/********** Width & Sizing **********/
+.full_width {
+  width: 100%;
+}
+
 /********** Borders & Outlines **********/
 .std_border,
 .med_border,
@@ -62,6 +67,10 @@
   margin-right: 15px;
 }
 
+.over_right_margin {
+  margin-right: 50px;
+}
+
 .bottom_margin {
   margin-bottom: 15px;
 }
@@ -93,3 +102,73 @@
 .left_padding {
   padding-left: 15px;
 }
+
+/********** FORMS **********/
+
+
+/********** TODO ITEMS **********/
+.todo_display {
+  margin: 0 auto;
+  margin-top: 25px;
+  width: 80%;
+  height: 80vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+#todo_actions {
+  padding: 15px;
+  border: 2px solid white;
+  border-radius: 8px;
+  width: 100%;
+  box-sizing: border-box;
+  margin-bottom: 25px;
+
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+}
+
+.todo_category_window {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+  overflow-x: scroll;
+  overflow-y: none;
+}
+
+.todo_category {
+  display: block;
+  min-width: 400px;
+  margin-right: 50px;
+  overflow-y: scroll;
+  overflow-x: none;
+}
+
+.todo_category h4 {
+  text-align: center;
+  position: relative;
+}
+
+.todo_list {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.todo_item {
+  width: 100%;
+}
+
+.todo_item_details {
+  display: none;
+}
+
+.modal_activation_area {}
+
+.modal_activation_area:hover {
+  cursor: pointer;
+}