end of project

src/components/Footer.vue

@@ -12,7 +12,7 @@ const show = ref(false)
   @click="show = !show"
   >
     <circle
-    style="fill:#e65353;stroke:#000000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+    style="stroke:#000000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
     id="path833"
     cx="10"
     cy="10"
@@ -27,7 +27,7 @@ const show = ref(false)
   <div class="footer"
     v-bind:class="show ? '' : 'hide'">
     <h1>
-    Design
+    Designed
     </h1>
     <svg
        viewBox="0 0 100 100"
@@ -249,7 +249,8 @@ const show = ref(false)
 </template>
 
 <style lang="scss" scoped>
-@import "@/style/shared.scss";
+@import '@/style/colors.scss';
+@import '@/style/widths.scss';
 
   div.footer{
     position : fixed;
@@ -259,7 +260,7 @@ const show = ref(false)
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
-    background-color: hsla(0, 0%, 1%, 0.904);
+    background-color: hsla(0, 0%, 0%, 0.904);
     min-height:3.5em;
     width: 100%;
     max-width: $maxWidth;
@@ -271,6 +272,10 @@ const show = ref(false)
   }
   svg{
     height: 2.5em;
+    & > circle{
+      fill:$action-normal;
+      transition : 0.25s;
+    }
   }
   h1{
     font-size: 2em;
@@ -289,6 +294,12 @@ const show = ref(false)
     &.down{
       transform: rotate(180deg);
     }
+    &:hover{
+      cursor: pointer;
+      & > circle{
+      fill:$action-light;
+    }
+    }
   }
   @supports (backdrop-filter: blur(0.5rem)){
     div.footer{