diff --git a/src/scss/components/_variables.scss b/src/scss/components/_variables.scss
index 5ee1258..74a8c60 100644
--- a/src/scss/components/_variables.scss
+++ b/src/scss/components/_variables.scss
@@ -10,6 +10,8 @@
   --secondary-light: rgb(var(--forest-200));
   --secondary-dark: rgb(var(--forest-400));
 
+  --bg-gradient: linear-gradient(180deg, rgb(var(--sand-400)) 0%, rgb(var(--sand-400)) 3%, rgb(var(--sand-300)) 20%, rgb(var(--sand-200)) 35%, rgb(var(--forest-200)) 60%, rgb(var(--forest-300)) 75%, rgb(var(--forest-400)) 98%, rgb(var(--forest-400)) 100%);
+
   --background: var(--primary-light);
   --text: var(--dark-1);
   --text-2: var(--dark-2);
diff --git a/src/scss/critical.scss b/src/scss/critical.scss
index b93f26c..78e8044 100644
--- a/src/scss/critical.scss
+++ b/src/scss/critical.scss
@@ -16,11 +16,8 @@ html {
   }
 }
 body {
-  /* --start: var(--primary-light);
-  --end: var(--secondary);*/
   background: rgb(var(--sand-400));
-  /*background: linear-gradient(180deg, var(--start) 0%, var(--start) 35%, var(--end) 100%); */
-  background: linear-gradient(180deg, rgb(var(--sand-400)) 0%, rgb(var(--sand-400)) 3%, rgb(var(--sand-300)) 20%, rgb(var(--sand-200)) 35%, rgb(var(--forest-200)) 60%, rgb(var(--forest-300)) 75%, rgb(var(--forest-400)) 98%, rgb(var(--forest-400)) 100%);
+  background: var(--bg-gradient);
 
   header, footer {
     padding: .5rem clamp(.2rem, 3vw, 2rem);