diff --git a/assets/_animations.scss b/assets/_animations.scss
new file mode 100644
index 0000000..5e267de
--- /dev/null
+++ b/assets/_animations.scss
@@ -0,0 +1,64 @@
+@import 'colors';
+
+@keyframes cycle-link-background {
+	0% {
+		background-image: linear-gradient(
+				to right,
+				$highlight-3 0%, $highlight-3 10%,
+				$highlight-1 10%, $highlight-1 20%,
+				$highlight-2 20%, $highlight-2 30%,
+				$highlight-3 30%, $highlight-3 40%,
+				$highlight-2 40%, $highlight-2 50%,
+				$highlight-3 50%, $highlight-3 60%,
+				$highlight-1 60%, $highlight-1 70%,
+				$highlight-3 70%, $highlight-3 80%,
+				$highlight-1 80%, $highlight-1 90%,
+				$highlight-2 90%,
+		);
+	}
+	25% {
+		background-image: linear-gradient(
+				to right,
+				$highlight-2 0%, $highlight-2 10%,
+				$highlight-3 10%, $highlight-3 20%,
+				$highlight-1 20%, $highlight-1 30%,
+				$highlight-2 30%, $highlight-2 40%,
+				$highlight-3 40%, $highlight-3 50%,
+				$highlight-1 50%, $highlight-1 60%,
+				$highlight-2 60%, $highlight-2 70%,
+				$highlight-1 70%, $highlight-1 80%,
+				$highlight-3 80%, $highlight-3 90%,
+				$highlight-1 90%
+		);
+	}
+	50% {
+		background-image: linear-gradient(
+				to right,
+				$highlight-3 0%, $highlight-3 10%,
+				$highlight-2 10%, $highlight-2 20%,
+				$highlight-3 20%, $highlight-3 30%,
+				$highlight-1 30%, $highlight-1 40%,
+				$highlight-2 40%, $highlight-2 50%,
+				$highlight-3 50%, $highlight-3 60%,
+				$highlight-1 60%, $highlight-1 70%,
+				$highlight-2 70%, $highlight-2 80%,
+				$highlight-1 80%, $highlight-1 90%,
+				$highlight-3 90%
+		);
+	}
+	75% {
+		background-image: linear-gradient(
+				to right,
+				$highlight-1 0%, $highlight-1 10%,
+				$highlight-3 10%, $highlight-3 20%,
+				$highlight-2 20%, $highlight-2 30%,
+				$highlight-1 30%, $highlight-1 40%,
+				$highlight-3 40%, $highlight-3 50%,
+				$highlight-1 50%, $highlight-1 60%,
+				$highlight-2 60%, $highlight-2 70%,
+				$highlight-1 70%, $highlight-1 80%,
+				$highlight-2 80%, $highlight-2 90%,
+				$highlight-3 90%
+		);
+	}
+}
diff --git a/assets/_mixins.scss b/assets/_mixins.scss
index a96f835..0d3b08a 100644
--- a/assets/_mixins.scss
+++ b/assets/_mixins.scss
@@ -4,3 +4,20 @@
 	text-transform: uppercase;
 	color: $primary-1;
 }
+
+@mixin hline($width, $height, $c1, $c2, $c3) {
+	background: repeat-x center bottom / $width $height;
+	background-image: linear-gradient(
+			to right,
+			$c3 0%, $c3 10%,
+			$c1 10%, $c1 20%,
+			$c2 20%, $c2 30%,
+			$c3 30%, $c3 40%,
+			$c2 40%, $c2 50%,
+			$c3 50%, $c3 60%,
+			$c1 60%, $c1 70%,
+			$c3 70%, $c3 80%,
+			$c1 80%, $c1 90%,
+			$c2 90%, $c2 100%
+	);
+}
diff --git a/assets/style.scss b/assets/style.scss
index ae77241..f7892ff 100644
--- a/assets/style.scss
+++ b/assets/style.scss
@@ -1,71 +1,9 @@
+@import 'animations';
 @import 'breakpoints';
 @import 'colors';
 @import 'fonts';
 @import 'mixins';
 
-@keyframes cycle-link-background {
-	0% {
-		background-image: linear-gradient(
-				to right,
-				$highlight-3 0%, $highlight-3 10%,
-				$highlight-1 10%, $highlight-1 20%,
-				$highlight-2 20%, $highlight-2 30%,
-				$highlight-3 30%, $highlight-3 40%,
-				$highlight-2 40%, $highlight-2 50%,
-				$highlight-3 50%, $highlight-3 60%,
-				$highlight-1 60%, $highlight-1 70%,
-				$highlight-3 70%, $highlight-3 80%,
-				$highlight-1 80%, $highlight-1 90%,
-				$highlight-2 90%,
-		);
-	}
-	25% {
-		background-image: linear-gradient(
-				to right,
-				$highlight-2 0%, $highlight-2 10%,
-				$highlight-3 10%, $highlight-3 20%,
-				$highlight-1 20%, $highlight-1 30%,
-				$highlight-2 30%, $highlight-2 40%,
-				$highlight-3 40%, $highlight-3 50%,
-				$highlight-1 50%, $highlight-1 60%,
-				$highlight-2 60%, $highlight-2 70%,
-				$highlight-1 70%, $highlight-1 80%,
-				$highlight-3 80%, $highlight-3 90%,
-				$highlight-1 90%
-		);
-	}
-	50% {
-		background-image: linear-gradient(
-				to right,
-				$highlight-3 0%, $highlight-3 10%,
-				$highlight-2 10%, $highlight-2 20%,
-				$highlight-3 20%, $highlight-3 30%,
-				$highlight-1 30%, $highlight-1 40%,
-				$highlight-2 40%, $highlight-2 50%,
-				$highlight-3 50%, $highlight-3 60%,
-				$highlight-1 60%, $highlight-1 70%,
-				$highlight-2 70%, $highlight-2 80%,
-				$highlight-1 80%, $highlight-1 90%,
-				$highlight-3 90%
-		);
-	}
-	75% {
-		background-image: linear-gradient(
-				to right,
-				$highlight-1 0%, $highlight-1 10%,
-				$highlight-3 10%, $highlight-3 20%,
-				$highlight-2 20%, $highlight-2 30%,
-				$highlight-1 30%, $highlight-1 40%,
-				$highlight-3 40%, $highlight-3 50%,
-				$highlight-1 50%, $highlight-1 60%,
-				$highlight-2 60%, $highlight-2 70%,
-				$highlight-1 70%, $highlight-1 80%,
-				$highlight-2 80%, $highlight-2 90%,
-				$highlight-3 90%
-		);
-	}
-}
-
 * {
 	font-family: Montserrat, sans-serif;
 	box-sizing: border-box;
@@ -96,40 +34,14 @@ h1, h2, h3, h4, h5, h6 {
 
 h1, footer {
 	padding-bottom: 0.2em;
-	background: repeat-x center bottom / 250px 4px;
-	background-image: linear-gradient(
-			to right,
-			$primary-3 0%, $primary-3 10%,
-			$primary-1 10%, $primary-1 20%,
-			$primary-2 20%, $primary-2 30%,
-			$primary-3 30%, $primary-3 40%,
-			$primary-2 40%, $primary-2 50%,
-			$primary-3 50%, $primary-3 60%,
-			$primary-1 60%, $primary-1 70%,
-			$primary-3 70%, $primary-3 80%,
-			$primary-1 80%, $primary-1 90%,
-			$primary-2 90%, $primary-2 100%
-	);
+	@include hline(250px, 4px, $primary-1, $primary-2, $primary-3);
 }
 
 a:not(.nav-logo) {
 	text-decoration: none;
 	color: $highlight-1;
 	text-shadow: -1px 1px 0 $background, 0 1px 0 $background, 1px 1px 0 $background;
-	background: repeat-x center bottom / 10em 2px;
-	background-image: linear-gradient(
-			to right,
-			$highlight-3 0%, $highlight-3 10%,
-			$highlight-1 10%, $highlight-1 20%,
-			$highlight-2 20%, $highlight-2 30%,
-			$highlight-3 30%, $highlight-3 40%,
-			$highlight-2 40%, $highlight-2 50%,
-			$highlight-3 50%, $highlight-3 60%,
-			$highlight-1 60%, $highlight-1 70%,
-			$highlight-3 70%, $highlight-3 80%,
-			$highlight-1 80%, $highlight-1 90%,
-			$highlight-2 90%, $highlight-2 100%
-	);
+	@include hline(10em, 2px, $highlight-1, $highlight-2, $highlight-3);
 
 	&:hover, &:focus {
 		animation: cycle-link-background 2s steps(4) infinite 0ms;