Addded animations

components/BarGraph.module.css

@@ -1,9 +1,15 @@
 .barBackground {
   fill: var(--card-background);
+  transition: fill 0.5s ease-out;
 }
 
 .bar {
   fill: var(--primary-accent-light);
+  transition: fill 0.5s ease-out;
+}
+
+.barGroup {
+  transition: fill 0.5s ease-out;
 }
 
 .barGroup:hover .bar {

components/Boxplot.module.css

@@ -1,5 +1,6 @@
 .boxplot {
   fill: var(--primary-accent-light);
+  transition: fill 0.5s ease-out;
 }
 
 .boxplot:hover {

components/Header.module.css

@@ -79,6 +79,7 @@
 .menuIcon {
   background: none;
   border: none;
+  transition: opacity 0.5s ease-out;
 }
 
 .menuIcon:hover {
@@ -115,6 +116,7 @@
   margin-left: calc(20rem / 16);
   /* transparent border fixes weird coloring on the border in some browsers */
   border: calc(1rem / 16) solid transparent;
+  transition: background-color 0.25s ease-out;
 }
 
 .closeMenuButton:hover {

components/PieChart.module.css

@@ -4,6 +4,7 @@
   stroke-width: 1px;
   stroke-dasharray: 0;
   stroke-linecap: round;
+  transition: fill 0.5s ease-out;
 }
 
 .labelPath {

components/Sections.module.css

@@ -50,11 +50,27 @@
   color: var(--primary-text);
 }
 
-.nav li a:hover .linkName {
-  text-decoration: underline;
+.nav li a .linkName:after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  transform: scaleX(0);
+  height: calc(1rem / 16);
+  bottom: 0;
+  left: 0;
+  background-color: var(--primary-text);
+  cursor: pointer;
+  transform-origin: bottom right;
+  transition: transform 0.25s ease-out;
+}
+
+.nav li a .linkName:hover:after {
+  transform: scaleX(1);
+  transform-origin: bottom left;
 }
 
 .nav li .linkName {
   margin: 0;
   display: inline;
+  position: relative;
 }

components/WordCloud.module.css

@@ -2,4 +2,8 @@
   text-shadow: var(--primary-accent) 0 0 calc(20rem / 16);
   text-anchor: "middle";
   cursor: default;
+}
+
+.word {
+  transition: text-shadow 0.25s ease-out;
 }

pages/_app.css

@@ -125,6 +125,7 @@ p {
 a {
   color: var(--link);
   text-decoration: none;
+  transition: color 0.5s ease-out;
 }
 
 a:hover {