Added some nice animations

style.css

@@ -47,7 +47,17 @@ footer {
     top: 1.5rem;
     transform: translate(-50%, 0%);
     width: fit-content;
-  }
+}
+
+.jumbotron {
+    animation-name: fadeGray;
+    background: #dadde0;
+    transition: background-color 0.5s ease-out 100ms;
+}
+
+.jumbotron:hover {
+    background-color: #ffffff;
+}
 
 #quotes {
     font-weight: normal;
@@ -62,9 +72,8 @@ footer {
     visibility: hidden;
 }
 
-.fade-in
-{
-    visibility:visible !important;
+.fade-in {
+    visibility: visible !important;
     animation: fadeIn;
     animation-duration: 1s;
 }
@@ -98,7 +107,6 @@ h3 {
     color: black;
 }
 
-
 a:link {
     color: gray;
     text-decoration: underline;
@@ -113,7 +121,7 @@ a:visited {
 /* mouse over link */
 
 a:hover {
-    color: rgb(0, 0, 0);
+    color: black;
 }
 
 /* selected link */
@@ -125,14 +133,22 @@ a:active {
 .nav-link {
     text-decoration: var(--fg-theme);
     text-decoration: none!important;
+    transition: background-color 0.5s ease-out 100ms
+}
+
+.nav-link:hover {
+    background-color: rgb(155, 155, 155);
+}
+
+.dropdown-menu {
+    background-color: var(--fg-theme);
 }
 
 .toolIcon img {
     width: 100;
 }
 
-.dropdown-item:active
-{
+.dropdown-item:active {
     background-color: lightgray;
 }
 
@@ -149,15 +165,13 @@ a:active {
     .header-text {
         margin-top: 1.1rem;
     }
-    
     #quotes {
         display: none;
     }
 }
 
-@media screen and (max-width: 580px)
-{
-    .dropdown-menu{
+@media screen and (max-width: 580px) {
+    .dropdown-menu {
         background-color: var(--fg-theme)!important;
         border: none;
     }
@@ -172,8 +186,11 @@ a:active {
     }
 }
 
-@keyframes fadeIn
-{
-    from{opacity: 0%;}
-    to{opacity: 100%;}
+@keyframes fadeIn {
+    from {
+        opacity: 0%;
+    }
+    to {
+        opacity: 100%;
+    }
 }