Added favicon, text stroke and changes to data handling

src/assets/scss/_leaflet.scss

@@ -0,0 +1,36 @@
+@use './utils/text';
+
+.leaflet-container {
+    margin: auto;
+    width: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    background: #98bcd0 !important;
+
+    .leaflet-map-pane {
+        .leaflet-tooltip-pane {
+            .leaflet-tooltip {
+                &.capital-name {
+                    padding: .2rem .4rem;
+                    color: #EEE;
+                    font-weight: bold;
+                    background: none;
+                    border: none;
+                    box-shadow: none;
+                    border-bottom-left-radius: 0;
+                    border-bottom-right-radius: 0;
+
+                    &::before {
+                        display: none;
+                    }
+
+                    @include text.stroke(2, #18181b);
+                }
+            }
+        }
+    }
+}
+
+.leaflet-popup-content-wrapper {
+    border-radius: .25rem;
+}

src/assets/scss/theme.scss

@@ -0,0 +1,5 @@
+@use './leaflet';
+
+html {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}

src/assets/scss/utils/_text.scss

@@ -0,0 +1,24 @@
+/// Stroke font-character
+/// @param  {Integer} $stroke - Stroke width
+/// @param  {Color}   $color  - Stroke color
+/// @return {List}            - text-shadow list
+@function stroke($stroke, $color) {
+    $shadow: ();
+    $from: $stroke*-1;
+
+    @for $i from $from through $stroke {
+        @for $j from $from through $stroke {
+            $shadow: append($shadow, $i*1px $j*1px 0 $color, comma);
+        }
+    }
+
+    @return $shadow;
+}
+
+/// Stroke font-character
+/// @param  {Integer} $stroke - Stroke width
+/// @param  {Color}   $color  - Stroke color
+/// @return {Style}           - text-shadow
+@mixin stroke($stroke, $color) {
+    text-shadow: stroke($stroke, $color);
+}