fixed header logo not fitting on smaller screen

fixed icon padding

src/components/Header.svelte

@@ -4,16 +4,25 @@
 
 <style>
     .logo {
-        height: 5.65rem;
         -ms-interpolation-mode: nearest-neighbor;
         image-rendering: -moz-crisp-edges;
         image-rendering: pixelated;
     }
+    @media screen and (min-width: 768px){
+        .logo {
+            height: 5.65rem;
+        }
+    }
+    @media screen and (max-width: 767px){
+        .logo {
+            width: 100%;
+        }
+    }
 </style>
 
 <div class="jumbotron">
     <div class="container">
-        <img src="{logo}" class="logo" alt="">
+        <img src="{logo}" class="img-fluid logo" alt="">
     </div>
 </div>
 

src/routes/index.svelte

@@ -7,11 +7,12 @@
     .custom-link, .custom-link:hover {
         color:#EBEBEB;
         text-decoration: none;
+        padding: 1em;
     }
 
     .container-extra {
         background-color: rgb(39, 56, 73);
-        padding: 2em;
+        padding: 1em 2em;
     }
 
     .hvr-float {