diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
index b403b469..8dd408d4 100644
--- a/docs/.vitepress/theme/custom.css
+++ b/docs/.vitepress/theme/custom.css
@@ -2,10 +2,24 @@
   --vp-c-brand-1: #ff7400;
   --vp-c-brand-2: #ff7400;
   --vp-c-brand-3: #ff7400;
+
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #ff4d00 30%, #ff9a00);
+
+  --vp-home-hero-image-background-image: linear-gradient(-45deg, rgba(255, 77, 0, .2) 40%, rgba(255, 154, 0, .2) 40%);
+  --vp-home-hero-image-filter: blur(44px);
+}
+
+@media (min-width: 640px) {
+  :root {
+    --vp-home-hero-image-filter: blur(56px);
+  }
 }
 
-.logo {
-  width: 120px;
+@media (min-width: 960px) {
+  :root {
+    --vp-home-hero-image-filter: blur(68px);
+  }
 }
 
 .hidden {
@@ -15,4 +29,8 @@
 .iframe {
   width: 100%;
   border: none;
+}
+
+.VPHomeHero .VPImage {
+  max-width: 160px;
 }
\ No newline at end of file
diff --git a/docs/index.md b/docs/index.md
index 9f3d7f0f..66e4cd5e 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -29,30 +29,4 @@ features:
     details: Manipulate and craft HLS playlists on the fly, supports HLS interstitials.
   - title: Player
     details: A unified <a href="https://github.com/video-dev/hls.js">HLS.js</a> API and React components that integrate seamlessly.
----
-
-<style>
-:root {
-  --vp-home-hero-name-color: transparent;
-  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #ff4d00 30%, #ff9a00);
-
-  --vp-home-hero-image-background-image: linear-gradient(-45deg, rgba(255, 77, 0, .2) 40%, rgba(255, 154, 0, .2) 40%);
-  --vp-home-hero-image-filter: blur(44px);
-}
-
-@media (min-width: 640px) {
-  :root {
-    --vp-home-hero-image-filter: blur(56px);
-  }
-}
-
-@media (min-width: 960px) {
-  :root {
-    --vp-home-hero-image-filter: blur(68px);
-  }
-}
-
-.VPHomeHero .VPImage {
-  max-width: 160px;
-}
-</style>
\ No newline at end of file
+---
\ No newline at end of file