little addition to styles

hw0/src/App.css

@@ -58,6 +58,8 @@ body {
   color: white;
   border-radius: 10px;
   border: none;
+  -webkit-transition: 0.1s;
+  transition: 0.1s;
 }
 
 @media (max-width: 767px) {
@@ -86,6 +88,18 @@ body {
   }
 }
 
+.joinBtn:hover {
+  background-color: orange;
+  -webkit-box-shadow: 0 0 23px purple;
+          box-shadow: 0 0 23px purple;
+}
+
+.joinBtn:active {
+  background-color: purple;
+  -webkit-box-shadow: 0 0 13px orange;
+          box-shadow: 0 0 13px orange;
+}
+
 .highlight {
   background-color: #ff4e33;
 }
@@ -357,6 +371,8 @@ body {
   color: white;
   background: -webkit-gradient(linear, left top, right top, from(orange), to(brown));
   background: linear-gradient(to right, orange, brown);
+  -webkit-transition: 0.5s;
+  transition: 0.5s;
   border-radius: 10px;
 }
 
@@ -463,7 +479,7 @@ body {
     width: auto;
   }
   .banner {
-    margin-bottom: -17%;
+    top: 9.5vh;
   }
   .banner__wrapper {
     width: 90%;

hw0/src/App.scss

@@ -30,6 +30,18 @@ body {
     color: white;
     border-radius: 10px;
     border: none;
+    transition: 0.1s;
+
+    &:hover {
+        background-color: orange;
+        box-shadow: 0 0 23px purple;
+    }
+
+    &:active {
+        background-color: purple;
+        box-shadow: 0 0 13px orange;
+
+    }
 }
 
 .highlight {
@@ -152,6 +164,7 @@ body {
         margin: 0 auto;
         color: white;
         background: linear-gradient(to right, orange, brown);
+        transition: 0.5s;
         border-radius: 10px;
     }
 }
@@ -203,7 +216,7 @@ body {
     }
 
     .banner {
-        margin-bottom: -17%;
+        top: 9.5vh;
         &__wrapper {
             width: 90%;
         }