Add: Hover effects

Author: rebecatschiedel

styles/Footer.module.css

@@ -10,8 +10,8 @@
 .container {
   padding: 1rem 0;
   margin: 1rem;
-  border-top: 1px solid #696969;
-  border-bottom: 1px solid #696969;
+  border-top: 1px solid #666;
+  border-bottom: 1px solid #666;
 }
 
 .columnLeft {
@@ -24,6 +24,11 @@
   margin-top: 0.5rem;
 }
 
+.footerItem:hover,
+.footerItem:focus {
+  color: #666;
+}
+
 .logo {
   border-radius: 50%;
   height: 5em;
@@ -59,6 +64,10 @@
   margin-left: 1rem;
 }
 
+.socialMedia img:hover {
+  opacity: 65%;
+}
+
 .copyright {
   font-size: 0.8rem;
   color: #696969;
@@ -108,6 +117,10 @@
     margin-right: 1rem;
   }
 
+  .socialMedia img {
+    height: 2.5rem;
+  }
+
   .copyright {
     max-width: 800px;
     margin: 0 auto;