convert from grid to absolute

src/Triangle.svelte

@@ -284,72 +284,89 @@
 </script>
 
 <style>
+  .triangle {
+    position: relative;
+  }
+
+  .triangle div {
+    position: absolute;
+  }
+
   .div0 {
-    grid-area: 1 / 5 / 2 / 6;
+    left: 120px;
+    top: 0px;
   }
   .div1 {
-    grid-area: 2 / 4 / 3 / 5;
+    left: 90px;
+    top: 50px;
   }
   .div2 {
-    grid-area: 2 / 6 / 3 / 7;
+    left: 150px;
+    top: 50px;
   }
   .div3 {
-    grid-area: 3 / 3 / 4 / 4;
+    left: 60px;
+    top: 100px;
   }
   .div4 {
-    grid-area: 3 / 5 / 4 / 6;
+    left: 120px;
+    top: 100px;
   }
   .div5 {
-    grid-area: 3 / 7 / 4 / 8;
+    left: 180px;
+    top: 100px;
   }
   .div6 {
-    grid-area: 4 / 2 / 5 / 3;
+    left: 30px;
+    top: 150px;
   }
   .div7 {
-    grid-area: 4 / 4 / 5 / 5;
+    left: 90px;
+    top: 150px;
   }
   .div8 {
-    grid-area: 4 / 6 / 5 / 7;
+    left: 150px;
+    top: 150px;
   }
   .div9 {
-    grid-area: 4 / 8 / 5 / 9;
+    left: 210px;
+    top: 150px;
   }
   .div10 {
-    grid-area: 5 / 1 / 6 / 2;
+    left: 0px;
+    top: 200px;
   }
   .div11 {
-    grid-area: 5 / 3 / 6 / 4;
+    left: 60px;
+    top: 200px;
   }
   .div12 {
-    grid-area: 5 / 5 / 6 / 6;
+    left: 120px;
+    top: 200px;
   }
   .div13 {
-    grid-area: 5 / 7 / 6 / 8;
+    left: 180px;
+    top: 200px;
   }
   .div14 {
-    grid-area: 5 / 9 / 6 / 10;
+    left: 240px;
-  }
+    top: 200px;
-
-  .triangle {
-    width: 450px;
-    height: 250px;
-    display: grid;
-    grid-template-columns: repeat(9, 1fr);
-    grid-template-rows: repeat(5, 1fr);
-    grid-column-gap: 0px;
-    grid-row-gap: 0px;
   }
 
   .circle {
-    width: 50px;
+    width: 40px;
-    height: 50px;
+    height: 40px;
     @apply rounded-full;
   }
 
   .pole,
   .pick,
   .dest {
-    @apply cursor-pointer;
+    @apply cursor-pointer border-2 border-gray-700;
+  }
+
+  .pick {
+    @apply border-gray-400;
   }
 
   button {