Need 3 separate columns of `assign-box` rather than for loop 3 identical ones because of upper right and upper left borders. Each column should have a different `border`

1 files changed, 18 insertions, 2 deletions

diff --git a/src/App.svelte b/src/App.svelte
index 5b453a1..d2765c4 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -25,21 +25,37 @@
 			width: 33.33%;
 			display: flex;
 			border-width: 4px;
-			border: solid;
 			border-color: rgb(148 163 184);
 		}
 		.assign-box:hover {
 			/* border-width: 6px; */
 			border-color: black;
+			border-width: 6px;
+			/* border-width: 8px; */
+			/* transition-timing-function: ease-in-out; */
+		}
+
+		.assign-box:hover > .assign-box-header {
+			border-bottom-color: black;
+			border-bottom-width: 6px;
 		}
 
 		.assign-box-header {
 			font-size: 1.5rem;
 			font-family: sans;
-			border-bottom: solid;
+			border-bottom-color: rgb(148 163 184);
+			border-bottom-width: 4px;
 			text-align: center;
 			height: 10%;
 			overflow: hidden;
+			flex: none;
+		}
+
+		.assign-box-body {
+			/* flex-direction: row; */
+			flex: 1 1 auto;
+			overflow-y: auto;
+			/* height: 100%; */
 		}
 	}
 </style>