Globe: Temporary fix for responsive sizing, Add correct margins top/bottom

- Ideally the globe would have to get the size within its container (.globe), set via CSS and not on the window

src/routes/index.svelte

@@ -52,6 +52,7 @@
     // Props and Variables
     export let photos = ''
     const { page } = stores()
+    let winWidth = 0
 
     // Reset current location if existing
     currentLocation.set()
@@ -78,6 +79,8 @@
     />
 </svelte:head>
 
+<svelte:window bind:innerWidth={winWidth} />
+
 <main class="housesof" class:is-transitioning={!$pageReady}>
     <section class="intro">
         <div class="anim-mask">
@@ -117,7 +120,11 @@
 
         {#if process.browser}
         <Lazy offset={window.innerHeight}>
-            <InteractiveGlobe />
+            <InteractiveGlobe size={
+                (winWidth <= 768) ? 0.96 :
+                (winWidth <= 992) ? 0.6 :
+                0.575}
+            />
         </Lazy>
         {/if}