created background colored in css stucked at bottom. typo in category

adminstyles.css

@@ -858,10 +858,77 @@ Add your custom styles in this file so it is easier to update the theme.
 
 .edit-post-visual-editor__content-area body {
 	background: none;
-	background-image: url(./assets/img/background-colors-02.jpg);
-	background-size: cover;
-	background-position: center center;
-	background-repeat: no-repeat;
+	position: relative;
+}
+
+.edit-post-visual-editor__content-area .liquid {
+	overflow: hidden;
+	float: left;
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: -1000;
+	width: 100vw;
+	height: 100vh;
+}
+
+.edit-post-visual-editor__content-area .bubble {
+	--size: 40vw;
+	--position: -10vw;
+	position: absolute;
+	width: var(--size);
+	height: var(--size);
+	border-radius: 50%;
+	filter: blur(10rem);
+	background: linear-gradient(var(--bgangle), var(--bgcolor), transparent);
+}
+
+.edit-post-visual-editor__content-area .bubble.top {
+	top: var(--position);
+}
+
+.edit-post-visual-editor__content-area .bubble.bottom {
+	bottom: var(--position);
+}
+
+.edit-post-visual-editor__content-area .bubble.left {
+	left: var(--position);
+}
+
+.edit-post-visual-editor__content-area .bubble.right {
+	right: var(--position);
+}
+
+.edit-post-visual-editor__content-area .bubble.top.left {
+	--bgangle: to bottom right;
+}
+
+.edit-post-visual-editor__content-area .bubble.top.right {
+	--bgangle: to bottom left;
+}
+
+.edit-post-visual-editor__content-area .bubble.bottom.left {
+	--bgangle: to top right;
+}
+
+.edit-post-visual-editor__content-area .bubble.bottom.right {
+	--bgangle: to top left;
+}
+
+.edit-post-visual-editor__content-area .bubble.red {
+	--bgcolor: rgb(255, 0, 0);
+}
+
+.edit-post-visual-editor__content-area .bubble.yellow {
+	--bgcolor: rgb(255, 0, 255);
+}
+
+.edit-post-visual-editor__content-area .bubble.blue {
+	--bgcolor: rgb(0, 0, 255);
+}
+
+.edit-post-visual-editor__content-area .bubble.green {
+	--bgcolor: rgb(0, 255, 0);
 }
 
 .edit-post-visual-editor__content-area hr {

category.php

@@ -1,9 +1,5 @@
 <?php
 /**
- * The template for displaying archive FAQS 
- *
- * Template Name: PAFs, consells, tutorials... 
- *
  * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
  *
  * @package Xarxaprod_theme

footer.php

@@ -30,6 +30,11 @@
 </div><!-- #page -->
 
 <?php wp_footer(); ?>
-
+<div class="liquid">
+  <div class="bubble red top left"></div>
+  <div class="bubble yellow top right"></div>
+  <div class="bubble blue bottom left"></div>
+  <div class="bubble green bottom right"></div>
+</div>
 </body>
 </html>

style.css

@@ -724,10 +724,77 @@ Add your custom styles in this file so it is easier to update the theme.
 --------------------------------------------- */
 body {
 	background: none;
-	background-image: url(./assets/img/background-colors-02.jpg);
-	background-size: cover;
-	background-position: center center;
-	background-repeat: no-repeat;
+	position: relative;
+}
+
+.liquid {
+	overflow: hidden;
+	float: left;
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: -1000;
+	width: 100vw;
+	height: 100vh;
+}
+
+.bubble {
+	--size: 40vw;
+	--position: -10vw;
+	position: absolute;
+	width: var(--size);
+	height: var(--size);
+	border-radius: 50%;
+	filter: blur(10rem);
+	background: linear-gradient(var(--bgangle), var(--bgcolor), transparent);
+}
+
+.bubble.top {
+	top: var(--position);
+}
+
+.bubble.bottom {
+	bottom: var(--position);
+}
+
+.bubble.left {
+	left: var(--position);
+}
+
+.bubble.right {
+	right: var(--position);
+}
+
+.bubble.top.left {
+	--bgangle: to bottom right;
+}
+
+.bubble.top.right {
+	--bgangle: to bottom left;
+}
+
+.bubble.bottom.left {
+	--bgangle: to top right;
+}
+
+.bubble.bottom.right {
+	--bgangle: to top left;
+}
+
+.bubble.red {
+	--bgcolor: rgb(255, 0, 0);
+}
+
+.bubble.yellow {
+	--bgcolor: rgb(255, 0, 255);
+}
+
+.bubble.blue {
+	--bgcolor: rgb(0, 0, 255);
+}
+
+.bubble.green {
+	--bgcolor: rgb(0, 255, 0);
 }
 
 hr {