diff --git a/src/lib/toast.css b/src/lib/toast.css
new file mode 100644
index 0000000..6cd1629
--- /dev/null
+++ b/src/lib/toast.css
@@ -0,0 +1,104 @@
+/* 
+When adding CSS to a component Svelte autofilters out CSS rules that have no
+targets inside that component. Because we want to style elements inside
+<SvelteToast> we can't add the CSS for that inside the components that use
+<SvelteToast>. Adding them globally like this is one solution.
+*/
+.wrap ._toastContainer {
+  position: fixed !important;
+  top: unset !important;
+  left: 10px !important;
+  bottom: 6px !important;
+  bottom: 0px !important;
+}
+
+._toastItem {
+  background-color: black !important;
+  border: 1px solid var(--color-pink) !important;
+}
+
+._toastContainer div {
+  background-color: black;
+  right: 0px;
+}
+
+._toastContainer li > div {
+  color: var(--color-pink) !important;
+  min-width: 383px;
+}
+
+._toastContainer li > div > div {
+  flex: unset !important;
+}
+
+._toastBtn::after {
+  top: 4px;
+  right: 6px;
+  position: absolute;
+}
+
+.wrap ._toastContainer ._toastItem {
+  z-index: 999;
+  pointer-events: all;
+  cursor: pointer;
+}
+@media screen and (min-width: 800px) {
+  ._toastContainer {
+    top: 9px !important;
+    right: 9px !important;
+  }
+  .wrap ._toastContainer ._toastItem {
+    width: 406px;
+    max-width: 90%;
+    top: calc(100% - 20px) !important;
+    bottom: var(--toastContainerBottom, unset) !important;
+    right: var(--toastContainerRight, unset) !important;
+    left: var(--toastContainerLeft, unset) !important;
+  }
+  .overlay--add .close-btn img {
+    width: 45px !important;
+    border: unset !important;
+  }
+}
+@media screen and (max-width: 800px) {
+  .wrap ._toastContainer {
+    left: 50% !important;
+    right: unset !important;
+    transform: none !important;
+    top: 0px;
+    left: 9px !important;
+    bottom: 0px !important;
+  }
+  .wrap ._toastContainer li > div {
+    min-width: unset !important;
+  }
+
+  ._toastContainer {
+    top: 9px !important;
+    left: 50% !important;
+    right: unset !important;
+    transform: translateX(-50%) !important;
+    max-width: 100vw;
+    width: calc(100vw - 9px) !important;
+    padding-right: 0px !important;
+    padding-left: 0px !important;
+    overflow: hidden;
+  }
+  ._toastItem {
+    width: unset !important;
+  }
+  .wrap ._toastItem {
+    width: var(--toastWidth, 16rem) !important;
+  }
+  ._toastBtn::after {
+    top: 6px;
+    right: 10px;
+  }
+  .maplibregl-ctrl-group:not(:empty) {
+    top: unset !important;
+    position: fixed;
+    bottom: 0px;
+    right: 0em;
+    z-index: 999;
+  }
+}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 9baf40d..38916ce 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import '$lib/style.css';
   import '$lib/maplibre_style.css';
+  import '$lib/toast.css';
   import '$lib/navbar_buttons.css';
   import AddOverlay from '$lib/AddOverlay.svelte';
   import InfoOverlay from '$lib/InfoOverlay.svelte';