v1.6.0/website styling fixes

-add qa
-add getting started title

website/styles/extrasmall.css

@@ -274,6 +274,10 @@ footer .link-button {
   padding-left: 70px;
 }
 
+.pop-features .title {
+  margin-bottom: 70px;
+}
+
 .pop-feature {
   width: 100%;
   height: fit-content;
@@ -425,11 +429,11 @@ h6#title-card-tagline {
   }
   35% {
     right: 200px;
-    bottom: 250px;
+    bottom: 350px;
   }
   60% {
     right: 200px;
-    bottom: 250px;
+    bottom: 350px;
   }
   75% {
     right: -40px;
@@ -473,8 +477,9 @@ div#fab {
   position: absolute;
   right: 250px;
   bottom: 250px;
-  animation: circleMove 2s linear 3s infinite alternate-reverse !important;
+  animation: circleMove 2s linear 0s infinite alternate !important;
   z-index: 99;
+  filter: drop-shadow(0px 0px 20px var(--primary));
 }
 
 div#title-card {
@@ -483,14 +488,14 @@ div#title-card {
 
 div#sidebar {
   width: 300px;
-  height: 100%;
+  height: 120%;
   right: 0;
   position: absolute;
   background: var(--cta);
-  top: 0;
+  top: -10%;
   border-top-right-radius: 26px;
   border-bottom-right-radius: 26px;
-  animation: rectSize 2s linear 3s infinite alternate-reverse !important;
+  animation: rectSize 2s linear 0s infinite alternate !important;
 }
 
 /*

website/styles/large.css

@@ -24,7 +24,7 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
 }
 
 .pop-feature:not(:first-of-type) {
-  margin: -30px 0;
+  margin: -10px 0;
 }
 
 .pop-feature > * {

website/welcome/index.html

@@ -59,8 +59,10 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
         </div>
       </div>
     </div>
-    <div class="pop-features">
+    <div id="getting-started" class="pop-features">
-      
+      <p data-font="sans-bold" class="title">
+        GETTING STARTED
+      </p>
       <div class="pop-feature alternate">
         <div id="title-card-container">
           <div id="title-card">
@@ -71,7 +73,7 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
         <div class="explanation">
           <div>
             <h4 data-font="sans-bold">TO BE OR NOT TO BE</h4>
-            <p data-font="sans">Watch Party is built to not be in your way. There when you need it, gone when you don't. Watch Party lives in the bottom right corner of your screen. You can use the fullscreen button in the sidebar to go fullscreen with Watch Party.</p>  
+            <p data-font="sans">Watch Party is built to not be in your way. There when you need it, gone when you don't. The sidebar is now resizeable, and now supports having access to Watch Party in fullscreen. (Use the fullscreen button in the sidebar)</p>  
           </div>
         </div>
       </div>
@@ -191,6 +193,22 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
       <p data-font="sans-bold" class="title">
        TIPS & FAQ
       </p>
+      <div class="tip">
+        <h6 data-font="sans">
+          DO I STILL NEED ACCOUNTS FOR THE STREAMING PLATFORMS
+        </h6>
+        <p data-font="sans-bold">
+          Yes, Watch Party is not a hack. The sole purpose of Watch Party is to help synchronize the playing/pausing on streamed content.
+        </p>
+      </div>
+      <div class="tip">
+        <h6 data-font="sans">
+          HOW CAN I HELP KEEP WATCH PARTY ALIVE
+        </h6>
+        <p data-font="sans-bold">
+          Watch Party is built to be completely free, all the costs are paid by the developer alone. While no payment is needed, any small donation helps make sure I can keep the servers up and running. You can request more details by reaching out to admin@chromewatchparty.com.
+        </p>
+      </div>
       <div class="tip">
         <h6 data-font="sans">
           CAN I USE WATCH PARTY IN FULLSCREEN
@@ -236,7 +254,7 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
           CAN I DISABLE WATCH PARTY TEMPORARILY
         </h6>
         <p data-font="sans-bold">
-          Watch Party is built to not be in your way but, it can be manually disabled by going to the Chrome Extensions page (chrome://extensions).</a>
+          Watch Party is built to not be in your way but, it can be manually disabled by going to the Chrome Extensions page (chrome://extensions).
         </p>
       </div>
       <a data-font="sans-bold" href="mailto:admin@chromewatchparty.com?subject=New FAQ Question" class="link-button">