diff --git a/resources/css/style.css b/resources/css/style.css
index acb387b..947166a 100644
--- a/resources/css/style.css
+++ b/resources/css/style.css
@@ -12,27 +12,36 @@ body {
 }
 
 .bg-hero {
-    --size: 5vh;
+    --size: 15vh;
     --angle: 45deg;
     background: repeating-linear-gradient(
         var(--angle),
-        var(--color-base-200) calc(0 * var(--size)),
-        var(--color-base-200) calc(1 * var(--size)),
-        var(--color-secondary) calc(1 * var(--size)),
-        var(--color-secondary) calc(2 * var(--size)),
-        var(--color-base-200) calc(2 * var(--size)),
-        var(--color-base-200) calc(3 * var(--size)),
-        var(--color-accent) calc(3 * var(--size)),
-        var(--color-accent) calc(4 * var(--size)),
-        var(--color-base-200) calc(4 * var(--size))
+        var(--color-base-200) 0%,
+        var(--color-base-200) 12.5%,
+        var(--color-secondary) 12.5%,
+        var(--color-secondary) 25%,
+        var(--color-base-200) 25%,
+        var(--color-base-200) 37.5%,
+        var(--color-accent) 37.5%,
+        var(--color-accent) 50%,
+        var(--color-base-200) 50%,
+        var(--color-base-200) 62.5%,
+        var(--color-secondary) 62.5%,
+        var(--color-secondary) 75%,
+        var(--color-base-200) 75%,
+        var(--color-base-200) 87.5%,
+        var(--color-accent) 87.5%,
+        var(--color-accent) 100%,
+        var(--color-base-200) 100%
     );
-    background-size: calc(4 * var(--size) / sin(var(--angle)))
-        calc(4 * var(--size) / sin(var(--angle)));
+    background-repeat: repeat;
+    background-size: calc(var(--size) / sin(var(--angle)))
+        calc(var(--size) / sin(var(--angle)));
     animation: BackgroundAnimate 10s linear infinite reverse;
 }
 
 @keyframes BackgroundAnimate {
     0% {
-        background-position: calc(4 * var(--size) / sin(var(--angle))) 0;
+        background-position: calc(var(--size) / sin(var(--angle))) 0;
     }
 }