.link animated style on hover & --orange

src/styles/global.css

@@ -6,6 +6,7 @@
   --text-color: black;
   --red: #ff97a3;
   --blue: #9ad9ff;
+  --orange: orange;
   --green: #19a786;
 
   --header-height: 80px;
@@ -39,6 +40,21 @@ a {
   text-decoration: inherit; /* no underline */
 }
 
+a.link {
+  --color-text: white;
+  text-decoration: none;
+  transition: all 0.3s ease;
+  -webkit-transition: -webkit-transform 0.15s linear;
+  transition: transform 0.15s linear;
+  -webkit-transform-origin: 50% 80%;
+  transform-origin: 50% 80%;
+  border-bottom: 2px solid var(--green);
+}
+a.link:hover {
+  border-color: white;
+  transform: skew(-15deg);
+}
+
 ul,
 li {
   margin: 0;

src/styles/media-queries.scss

@@ -1,14 +1,14 @@
 $tablet-width: 1200px;
 $mobile-width: 768px;
 
-@mixin tablet {
-  @media (min-width: #{$mobile-width}) {
+@mixin mobile {
+  @media (max-width: #{$mobile-width}) {
     @content;
   }
 }
 
-@mixin mobile {
-  @media (max-width: #{$mobile-width}) {
+@mixin tablet {
+  @media (min-width: #{$mobile-width}) {
     @content;
   }
 }
@@ -29,4 +29,4 @@ $mobile-width: 768px;
   @include tablet {
     display: none !important;
   }
-}
+}