From 08fea8ba57921cb6e71856f68b5b4c6027f398cd Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Wed, 1 Jun 2022 14:10:10 +0100
Subject: [PATCH] landing page update

---
 templates/storyteller-stream/index.html | 357 ++++++++++++------------
 templates/storyteller-stream/style.css  |  21 +-
 2 files changed, 206 insertions(+), 172 deletions(-)

diff --git a/templates/storyteller-stream/index.html b/templates/storyteller-stream/index.html
index 42f73d4eb2..79f2461270 100644
--- a/templates/storyteller-stream/index.html
+++ b/templates/storyteller-stream/index.html
@@ -149,63 +149,69 @@
     </div>
 
     <div class="bg-gradient">
-      <div class="container section d-flex flex-column align-items-center">
-        <div class="d-flex justify-content-center align-items-center gap-4">
-          <img class="rotateimg180" src="assets/title-shape.png" alt="" />
-          <h6 class="pre-heading text-center fw-bold pt-2">Features</h6>
-          <img src="assets/title-shape.png" alt="" />
-        </div>
-        <h1 class="display-5 fw-bold mt-3">
-          <span class="word">TTS Features</span>
-        </h1>
-        <div class="features-section">
-          <div class="row">
-            <div class="col-md-4 d-flex align-items-stretch">
-              <div class="panel features-panel features-panel-sides panel-ani">
-                <img
-                  class="features-icon red-glow"
-                  src="assets/channel-points-icon.png"
-                  alt=""
-                  width="65"
-                />
-                <h4 class="features-title mb-3">Channel Points</h4>
-                <p class="mb-4">
-                  Morbi dapibus commodo porta. Sed faucibus tristique orci in
-                  tristique. Praesent quam nunc, fermentum eu feugiat sit.
-                </p>
-                <a class="fw-bold" href="">Sign up now ></a>
+      <div class="features-bg">
+        <div class="container section d-flex flex-column align-items-center">
+          <div class="d-flex justify-content-center align-items-center gap-4">
+            <img class="rotateimg180" src="assets/title-shape.png" alt="" />
+            <h6 class="pre-heading text-center fw-bold pt-2">Features</h6>
+            <img src="assets/title-shape.png" alt="" />
+          </div>
+          <h1 class="display-5 fw-bold mt-3">
+            <span class="word">TTS Features</span>
+          </h1>
+          <div class="features-section">
+            <div class="row">
+              <div class="col-md-4 d-flex align-items-stretch">
+                <div
+                  class="panel features-panel features-panel-sides panel-ani"
+                >
+                  <img
+                    class="features-icon red-glow"
+                    src="assets/channel-points-icon.png"
+                    alt=""
+                    width="65"
+                  />
+                  <h4 class="features-title mb-3">Channel Points</h4>
+                  <p class="mb-4">
+                    Morbi dapibus commodo porta. Sed faucibus tristique orci in
+                    tristique. Praesent quam nunc, fermentum eu feugiat sit.
+                  </p>
+                  <a class="fw-bold" href="">Sign up now ></a>
+                </div>
               </div>
-            </div>
-            <div class="col-md-4 d-flex align-items-stretch">
-              <div class="panel features-panel panel-ani">
-                <img
-                  class="features-icon red-glow"
-                  src="assets/voices-icon.png"
-                  alt=""
-                  width="80"
-                />
-                <h4 class="features-title mb-3">Over 1700 voices!</h4>
-                <p class="mb-4">
-                  Morbi dapibus commodo porta. Sed faucibus tristique orci in
-                  tristique. Praesent quam nunc, fermentum eu feugiat sit.
-                </p>
-                <a class="fw-bold" href="">See all the voices on FakeYou ></a>
+              <div class="col-md-4 d-flex align-items-stretch">
+                <div class="panel features-panel panel-ani">
+                  <img
+                    class="features-icon red-glow"
+                    src="assets/voices-icon.png"
+                    alt=""
+                    width="80"
+                  />
+                  <h4 class="features-title mb-3">Over 1700 voices!</h4>
+                  <p class="mb-4">
+                    Morbi dapibus commodo porta. Sed faucibus tristique orci in
+                    tristique. Praesent quam nunc, fermentum eu feugiat sit.
+                  </p>
+                  <a class="fw-bold" href="">See all the voices on FakeYou ></a>
+                </div>
               </div>
-            </div>
-            <div class="col-md-4 d-flex align-items-stretch">
-              <div class="panel features-panel features-panel-sides panel-ani">
-                <img
-                  class="features-icon red-glow"
-                  src="assets/bits-icon.png"
-                  alt=""
-                  width="65"
-                />
-                <h4 class="features-title mb-3">Bits</h4>
-                <p class="mb-4">
-                  Morbi dapibus commodo porta. Sed faucibus tristique orci in
-                  tristique. Praesent quam nunc, fermentum eu feugiat sit.
-                </p>
-                <a class="fw-bold" href="">Sign up now ></a>
+              <div class="col-md-4 d-flex align-items-stretch">
+                <div
+                  class="panel features-panel features-panel-sides panel-ani"
+                >
+                  <img
+                    class="features-icon red-glow"
+                    src="assets/bits-icon.png"
+                    alt=""
+                    width="65"
+                  />
+                  <h4 class="features-title mb-3">Bits</h4>
+                  <p class="mb-4">
+                    Morbi dapibus commodo porta. Sed faucibus tristique orci in
+                    tristique. Praesent quam nunc, fermentum eu feugiat sit.
+                  </p>
+                  <a class="fw-bold" href="">Sign up now ></a>
+                </div>
               </div>
             </div>
           </div>
@@ -259,107 +265,112 @@
         </div>
       </div>
 
-      <div class="container section d-flex flex-column align-items-center">
-        <div class="d-flex justify-content-center align-items-center gap-4">
-          <img class="rotateimg180" src="assets/title-shape.png" alt="" />
-          <h6 class="pre-heading text-center fw-bold pt-2">
-            Questions and Answers
-          </h6>
-          <img src="assets/title-shape.png" alt="" />
-        </div>
-        <h1 class="display-5 fw-bold mt-3 text-center d-none d-lg-block">
-          <span class="word">Frequently Asked Questions</span>
-        </h1>
-        <h1 class="display-5 fw-bold mt-3 text-center d-lg-none">
-          <span class="word">FAQ</span>
-        </h1>
+      <div class="faq-bg">
+        <div class="container section d-flex flex-column align-items-center">
+          <div class="d-flex justify-content-center align-items-center gap-4">
+            <img class="rotateimg180" src="assets/title-shape.png" alt="" />
+            <h6 class="pre-heading text-center fw-bold pt-2">
+              Questions and Answers
+            </h6>
+            <img src="assets/title-shape.png" alt="" />
+          </div>
+          <h1 class="display-5 fw-bold mt-3 text-center d-none d-lg-block">
+            <span class="word">Frequently Asked Questions</span>
+          </h1>
+          <h1 class="display-5 fw-bold mt-3 text-center d-lg-none">
+            <span class="word">FAQ</span>
+          </h1>
 
-        <div class="faq-panel pt-5 w-100">
-          <div class="accordion d-flex flex-column gap-3" id="accordionExample">
-            <div class="accordion-item">
-              <h2 class="accordion-header" id="headingOne">
-                <button
-                  class="accordion-button collapsed"
-                  type="button"
-                  data-bs-toggle="collapse"
-                  data-bs-target="#collapseOne"
-                  aria-expanded="false"
-                  aria-controls="collapseOne"
+          <div class="faq-panel pt-5 w-100">
+            <div
+              class="accordion d-flex flex-column gap-3"
+              id="accordionExample"
+            >
+              <div class="accordion-item">
+                <h2 class="accordion-header" id="headingOne">
+                  <button
+                    class="accordion-button collapsed"
+                    type="button"
+                    data-bs-toggle="collapse"
+                    data-bs-target="#collapseOne"
+                    aria-expanded="false"
+                    aria-controls="collapseOne"
+                  >
+                    What is Storyteller TTS?
+                  </button>
+                </h2>
+                <div
+                  id="collapseOne"
+                  class="accordion-collapse collapse"
+                  aria-labelledby="headingOne"
+                  data-bs-parent="#accordionExample"
                 >
-                  What is Storyteller TTS?
-                </button>
-              </h2>
-              <div
-                id="collapseOne"
-                class="accordion-collapse collapse"
-                aria-labelledby="headingOne"
-                data-bs-parent="#accordionExample"
-              >
-                <div class="accordion-body">
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
-                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                  Ut enim ad minim veniam, quis nostrud exercitation ullamco
-                  laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-                  irure dolor in reprehenderit in voluptate velit esse cillum
-                  dolore eu fugiat nulla pariatur.
+                  <div class="accordion-body">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+                    do eiusmod tempor incididunt ut labore et dolore magna
+                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+                    ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                    Duis aute irure dolor in reprehenderit in voluptate velit
+                    esse cillum dolore eu fugiat nulla pariatur.
+                  </div>
                 </div>
               </div>
-            </div>
-            <div class="accordion-item">
-              <h2 class="accordion-header" id="headingTwo">
-                <button
-                  class="accordion-button collapsed"
-                  type="button"
-                  data-bs-toggle="collapse"
-                  data-bs-target="#collapseTwo"
-                  aria-expanded="false"
-                  aria-controls="collapseTwo"
+              <div class="accordion-item">
+                <h2 class="accordion-header" id="headingTwo">
+                  <button
+                    class="accordion-button collapsed"
+                    type="button"
+                    data-bs-toggle="collapse"
+                    data-bs-target="#collapseTwo"
+                    aria-expanded="false"
+                    aria-controls="collapseTwo"
+                  >
+                    How do I use Storyteller TTS?
+                  </button>
+                </h2>
+                <div
+                  id="collapseTwo"
+                  class="accordion-collapse collapse"
+                  aria-labelledby="headingTwo"
+                  data-bs-parent="#accordionExample"
                 >
-                  How do I use Storyteller TTS?
-                </button>
-              </h2>
-              <div
-                id="collapseTwo"
-                class="accordion-collapse collapse"
-                aria-labelledby="headingTwo"
-                data-bs-parent="#accordionExample"
-              >
-                <div class="accordion-body">
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
-                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                  Ut enim ad minim veniam, quis nostrud exercitation ullamco
-                  laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-                  irure dolor in reprehenderit in voluptate velit esse cillum
-                  dolore eu fugiat nulla pariatur.
+                  <div class="accordion-body">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+                    do eiusmod tempor incididunt ut labore et dolore magna
+                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+                    ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                    Duis aute irure dolor in reprehenderit in voluptate velit
+                    esse cillum dolore eu fugiat nulla pariatur.
+                  </div>
                 </div>
               </div>
-            </div>
-            <div class="accordion-item">
-              <h2 class="accordion-header" id="headingThree">
-                <button
-                  class="accordion-button collapsed"
-                  type="button"
-                  data-bs-toggle="collapse"
-                  data-bs-target="#collapseThree"
-                  aria-expanded="false"
-                  aria-controls="collapseThree"
+              <div class="accordion-item">
+                <h2 class="accordion-header" id="headingThree">
+                  <button
+                    class="accordion-button collapsed"
+                    type="button"
+                    data-bs-toggle="collapse"
+                    data-bs-target="#collapseThree"
+                    aria-expanded="false"
+                    aria-controls="collapseThree"
+                  >
+                    What is this question?
+                  </button>
+                </h2>
+                <div
+                  id="collapseThree"
+                  class="accordion-collapse collapse"
+                  aria-labelledby="headingThree"
+                  data-bs-parent="#accordionExample"
                 >
-                  What is this question?
-                </button>
-              </h2>
-              <div
-                id="collapseThree"
-                class="accordion-collapse collapse"
-                aria-labelledby="headingThree"
-                data-bs-parent="#accordionExample"
-              >
-                <div class="accordion-body">
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
-                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                  Ut enim ad minim veniam, quis nostrud exercitation ullamco
-                  laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-                  irure dolor in reprehenderit in voluptate velit esse cillum
-                  dolore eu fugiat nulla pariatur.
+                  <div class="accordion-body">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+                    do eiusmod tempor incididunt ut labore et dolore magna
+                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+                    ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                    Duis aute irure dolor in reprehenderit in voluptate velit
+                    esse cillum dolore eu fugiat nulla pariatur.
+                  </div>
                 </div>
               </div>
             </div>
@@ -367,29 +378,33 @@
         </div>
       </div>
 
-      <div class="container py-5 mb-5 d-flex flex-column align-items-center">
-        <div class="d-flex justify-content-center align-items-center gap-4">
-          <img class="rotateimg180" src="assets/title-shape.png" alt="" />
-          <h6 class="pre-heading text-center fw-bold pt-2">
-            Still got questions?
-          </h6>
-          <img src="assets/title-shape.png" alt="" />
-        </div>
-        <h1 class="display-5 fw-bold mb-4 mt-3">
-          <span class="word">Join Our Community</span>
-        </h1>
-        <p class="lead text-center mb-5">
-          We'd love to chat with you!
-          <br />
-          Please join us in Discord so that we know what you're thinking.
-        </p>
-        <div class="d-flex flex-column flex-lg-row gap-3 mb-5">
-          <button class="btn btn-secondary">
-            <i class="fa-brands fa-twitter me-2"></i>Follow on Twitter
-          </button>
-          <button class="btn btn-primary">
-            <i class="fa-brands fa-discord me-2"></i>Join our Discord
-          </button>
+      <div class="community-bg">
+        <div
+          class="container section mb-3 d-flex flex-column align-items-center"
+        >
+          <div class="d-flex justify-content-center align-items-center gap-4">
+            <img class="rotateimg180" src="assets/title-shape.png" alt="" />
+            <h6 class="pre-heading text-center fw-bold pt-2">
+              Still got questions?
+            </h6>
+            <img src="assets/title-shape.png" alt="" />
+          </div>
+          <h1 class="display-5 fw-bold mb-4 mt-3">
+            <span class="word">Join Our Community</span>
+          </h1>
+          <p class="lead text-center mb-5">
+            We'd love to chat with you!
+            <br />
+            Please join us in Discord so that we know what you're thinking.
+          </p>
+          <div class="d-flex flex-column flex-lg-row gap-3 mb-5">
+            <button class="btn btn-secondary">
+              <i class="fa-brands fa-twitter me-2"></i>Follow on Twitter
+            </button>
+            <button class="btn btn-primary">
+              <i class="fa-brands fa-discord me-2"></i>Join our Discord
+            </button>
+          </div>
         </div>
       </div>
 
diff --git a/templates/storyteller-stream/style.css b/templates/storyteller-stream/style.css
index 4b67c5df75..1e2103edf8 100644
--- a/templates/storyteller-stream/style.css
+++ b/templates/storyteller-stream/style.css
@@ -308,6 +308,10 @@ span.word:after {
   max-height: 1080px;
   text-align: center;
   overflow: hidden;
+
+  background-position: bottom;
+  background-repeat: no-repeat;
+  background-size: 100%;
 }
 
 .hero-inner {
@@ -358,7 +362,7 @@ span.word:after {
   position: absolute;
   bottom: 0;
   margin-bottom: 12%;
-  opacity: 20%;
+  opacity: 25%;
   width: 115%;
   min-height: 150px;
   background-image: url("assets/hero-audio-wave.png");
@@ -444,6 +448,20 @@ span.word:after {
   margin-top: 60px;
 }
 
+.features-bg {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1920' height='560' preserveAspectRatio='none' viewBox='0 0 1920 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1087%26quot%3b)' fill='none'%3e%3cpath d='M860 39L1510 38' stroke-width='8' stroke='url(%23SvgjsLinearGradient1088)' stroke-linecap='round' class='Right'%3e%3c/path%3e%3cpath d='M356 89L-827 88' stroke-width='6' stroke='url(%23SvgjsLinearGradient1088)' stroke-linecap='round' class='Right'%3e%3c/path%3e%3cpath d='M19 415L-1000 414' stroke-width='6' stroke='url(%23SvgjsLinearGradient1089)' stroke-linecap='round' class='Left'%3e%3c/path%3e%3cpath d='M207 30L-1043 29' stroke-width='10' stroke='url(%23SvgjsLinearGradient1089)' stroke-linecap='round' class='Left'%3e%3c/path%3e%3cpath d='M1333 95L2384 94' stroke-width='10' stroke='url(%23SvgjsLinearGradient1088)' stroke-linecap='round' class='Right'%3e%3c/path%3e%3cpath d='M1471 510L2543 509' stroke-width='8' stroke='url(%23SvgjsLinearGradient1088)' stroke-linecap='round' class='Right'%3e%3c/path%3e%3cpath d='M1789 194L985 193' stroke-width='10' stroke='url(%23SvgjsLinearGradient1089)' stroke-linecap='round' class='Left'%3e%3c/path%3e%3cpath d='M1512 92L2891 91' stroke-width='6' stroke='url(%23SvgjsLinearGradient1089)' stroke-linecap='round' class='Left'%3e%3c/path%3e%3cpath d='M67 447L-1110 446' stroke-width='10' stroke='url(%23SvgjsLinearGradient1089)' stroke-linecap='round' class='Left'%3e%3c/path%3e%3cpath d='M1209 230L309 229' stroke-width='8' stroke='url(%23SvgjsLinearGradient1088)' stroke-linecap='round' class='Right'%3e%3c/path%3e%3cpath d='M760 527L-35 526' stroke-width='6' stroke='url(%23SvgjsLinearGradient1088)' stroke-linecap='round' class='Right'%3e%3c/path%3e%3cpath d='M52 257L-1362 256' stroke-width='8' stroke='url(%23SvgjsLinearGradient1088)' stroke-linecap='round' class='Right'%3e%3c/path%3e%3cpath d='M1269 105L2420 104' stroke-width='10' stroke='url(%23SvgjsLinearGradient1088)' stroke-linecap='round' class='Right'%3e%3c/path%3e%3cpath d='M1535 531L2296 530' stroke-width='10' stroke='url(%23SvgjsLinearGradient1088)' stroke-linecap='round' class='Right'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1087'%3e%3crect width='1920' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='0%25' y1='0%25' x2='100%25' y2='0%25' id='SvgjsLinearGradient1088'%3e%3cstop stop-color='rgba(247%2c 84%2c 92%2c 0)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(247%2c 84%2c 92%2c 0.1)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='100%25' y1='0%25' x2='0%25' y2='0%25' id='SvgjsLinearGradient1089'%3e%3cstop stop-color='rgba(247%2c 84%2c 92%2c 0)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(247%2c 84%2c 92%2c 0.1)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e");
+  background-size: 100%;
+  background-position: bottom;
+  background-repeat: no-repeat;
+}
+
+.community-bg {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1920' height='560' preserveAspectRatio='none' viewBox='0 0 1920 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1231%26quot%3b)' fill='none'%3e%3cpath d='M1680 279L2238 278' stroke-width='6' stroke='url(%23SvgjsLinearGradient1232)' stroke-linecap='round' class='Left'%3e%3c/path%3e%3cpath d='M617 239L1573 238' stroke-width='6' stroke='url(%23SvgjsLinearGradient1232)' stroke-linecap='round' class='Left'%3e%3c/path%3e%3cpath d='M1172 18L2405 17' stroke-width='10' stroke='url(%23SvgjsLinearGradient1232)' stroke-linecap='round' class='Left'%3e%3c/path%3e%3cpath d='M1776 115L413 114' stroke-width='8' stroke='url(%23SvgjsLinearGradient1233)' stroke-linecap='round' class='Right'%3e%3c/path%3e%3cpath d='M1203 324L2469 323' stroke-width='10' stroke='url(%23SvgjsLinearGradient1233)' stroke-linecap='round' class='Right'%3e%3c/path%3e%3cpath d='M455 19L-483 18' stroke-width='8' stroke='url(%23SvgjsLinearGradient1233)' stroke-linecap='round' class='Right'%3e%3c/path%3e%3cpath d='M815 491L-370 490' stroke-width='8' stroke='url(%23SvgjsLinearGradient1233)' stroke-linecap='round' class='Right'%3e%3c/path%3e%3cpath d='M625 533L-105 532' stroke-width='6' stroke='url(%23SvgjsLinearGradient1232)' stroke-linecap='round' class='Left'%3e%3c/path%3e%3cpath d='M95 107L1108 106' stroke-width='6' stroke='url(%23SvgjsLinearGradient1232)' stroke-linecap='round' class='Left'%3e%3c/path%3e%3cpath d='M64 277L1041 276' stroke-width='10' stroke='url(%23SvgjsLinearGradient1232)' stroke-linecap='round' class='Left'%3e%3c/path%3e%3cpath d='M4 510L1300 509' stroke-width='10' stroke='url(%23SvgjsLinearGradient1233)' stroke-linecap='round' class='Right'%3e%3c/path%3e%3cpath d='M1222 249L-102 248' stroke-width='8' stroke='url(%23SvgjsLinearGradient1232)' stroke-linecap='round' class='Left'%3e%3c/path%3e%3cpath d='M123 216L-1281 215' stroke-width='6' stroke='url(%23SvgjsLinearGradient1233)' stroke-linecap='round' class='Right'%3e%3c/path%3e%3cpath d='M349 127L-159 126' stroke-width='6' stroke='url(%23SvgjsLinearGradient1232)' stroke-linecap='round' class='Left'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1231'%3e%3crect width='1920' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='100%25' y1='0%25' x2='0%25' y2='0%25' id='SvgjsLinearGradient1232'%3e%3cstop stop-color='rgba(247%2c 84%2c 92%2c 0)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(247%2c 84%2c 92%2c 0.1)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='0%25' y1='0%25' x2='100%25' y2='0%25' id='SvgjsLinearGradient1233'%3e%3cstop stop-color='rgba(247%2c 84%2c 92%2c 0)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(247%2c 84%2c 92%2c 0.1)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e");
+  background-size: 100%;
+  background-position: bottom;
+  background-repeat: no-repeat;
+}
+
 .insights-section {
   max-width: 1000px;
 }
@@ -590,6 +608,7 @@ span.word:after {
   border-color: #ffffff12 !important;
   border: 2px solid;
   border-radius: 5px;
+  backdrop-filter: blur(10px);
 }
 
 .accordion-button {