Add shadow on avatar icon

components/TheSettings.vue

 <template>
-  <section id="settings-section">
+  <section class="settings-section" id="settings-section">
     <svg
       xmlns="http://www.w3.org/2000/svg"
       class="avatar"
@@ -17,9 +17,9 @@
           height="147.477"
           filterUnits="userSpaceOnUse"
         >
-          <feOffset dy="3" input="SourceAlpha" />
-          <feGaussianBlur stdDeviation="3" result="blur" />
-          <feFlood flood-opacity="0.161" />
+          <feOffset dy="5" input="SourceAlpha" />
+          <feGaussianBlur stdDeviation="5" result="blur" />
+          <feFlood flood-opacity="0.6" />
           <feComposite operator="in" in2="blur" />
           <feComposite in="SourceGraphic" />
         </filter>
@@ -53,7 +53,7 @@
         </g>
       </g>
     </svg>
-    <h2>John Smith</h2>
+    <h2 class="John">John Smith</h2>
     <ul>
       <li>
         <svg
@@ -281,7 +281,7 @@
               <line id="Line_9-2" data-name="Line 9" class="cls-2" y2="7.697" transform="translate(22.51 18.65)" />
             </g>
           </g>
-        </svg><NuxtLink to="clear-data">Clear all data</NuxtLink>
+        </svg><NuxtLink to="/clear-data">Clear all data</NuxtLink>
       </li>
       <li>
         <svg
@@ -445,11 +445,13 @@
 </script>
 
 <style lang="scss" scoped>
-section {
+.settings-section {
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
+
+  text-shadow: 0 4px 7px #333;
   .avatar{
   .cls-1, .cls-5 {
     fill: none;
@@ -477,10 +479,10 @@ section {
       filter: url(#Path_15);
     }
   }
-}
-h2 {
-  margin-bottom: 1.5em;
-  font-size: 2.2rem;
+  .John {
+    margin-bottom: 1.5em;
+    font-size: 2.2rem;
+  }
 }
 
 ul {