Mobile optimization

src/assets/css/main.css

@@ -1,39 +1,12 @@
 body {
-    margin-top: 15px;
+    margin: 0px;
-    background-color: #828282;
+    background-color: #a52a2a;
+    overflow: overlay;
 }
 
 .content {
     padding: 10px;
-
+    background-color: #a52a2a;
-    background: linear-gradient(270deg, #a52a2a, #d2691e, #ee6e40, #ff7f50, #ff7f61, #ff8f61);
-    background-size: 1200% 1200%;
-
-    -webkit-animation: BackgroundGradientChange 6s ease infinite;
-    -moz-animation: BackgroundGradientChange 6s ease infinite;
-    -o-animation: BackgroundGradientChange 6s ease infinite;
-    animation: BackgroundGradientChange 6s ease infinite;
-}
-
-@-webkit-keyframes BackgroundGradientChange {
-    0%{background-position:0% 50%}
-    50%{background-position:100% 50%}
-    100%{background-position:0% 50%}
-}
-@-moz-keyframes BackgroundGradientChange {
-    0%{background-position:0% 50%}
-    50%{background-position:100% 50%}
-    100%{background-position:0% 50%}
-}
-@-o-keyframes BackgroundGradientChange {
-    0%{background-position:0% 50%}
-    50%{background-position:100% 50%}
-    100%{background-position:0% 50%}
-}
-@keyframes BackgroundGradientChange {
-    0%{background-position:0% 50%}
-    50%{background-position:100% 50%}
-    100%{background-position:0% 50%}
 }
 
 header {
@@ -65,7 +38,7 @@ header a, .fp-header a, .order-button {
     color: #ffffff;
     background-color: #a52a2a;
     text-align: center;
-    padding: 14px 16px;
+    padding: 16px 16px;
     text-decoration: none;
     font-family: "M PLUS 1", sans-serif;
     border-radius: 25px;
@@ -86,10 +59,13 @@ header a:hover, .fp-header a:hover, .order-button:hover {
 
 .fp-header {
     height: 30rem;
-    background-position: right;
+    background-position: center;
     background-image: url("../img/lyza.png");
+    background-repeat: no-repeat;
     padding: 30px;
+    text-align: center;
     font-family: "M_PLUS_1", sans-serif;
+    border-radius: 25px;
 }
 
 main {
@@ -117,6 +93,13 @@ main a:hover {
 
 ::-webkit-scrollbar {
     border-radius: 25px;
+    width: 14px;
+    overflow: overlay;
+    scrollbar-gutter: initial;
+}
+
+*:hover::-webkit-scrollbar {
+    width: 8px;
 }
 
 ::-webkit-scrollbar-track {
@@ -126,11 +109,14 @@ main a:hover {
 
 ::-webkit-scrollbar-thumb {
     border-radius: 25px;
+    border: 6px solid #544c4a;
     background-color: #544c4a;
+    background-clip: padding-box;
 }
 
 ::-webkit-scrollbar-thumb:hover {
     background-color: #363636;
+    border: 0;
 }
 
 .flex-w {
@@ -161,7 +147,13 @@ main a:hover {
     height: auto;
 }
 
-@media (max-width: 800px) {
+@media (max-width: 1440px) {
+    .fp-header {
+        background-position: right;
+    }
+}
+
+@media (max-width: 1000px) {
     body {
         margin: 0px;
     }
@@ -180,6 +172,6 @@ main a:hover {
     }
 
     header {
-        font-size: 20px;
+        font-size: 30px;
     }
 }

src/index.html

@@ -15,7 +15,7 @@
             <a href="book2/index.html">Lyza the Sheepdog: The Flood</a>
         </header>
         <div class="fp-header">
-            <h1>Travel back in time</h2>
+            <h1>Time travelling adventures</h1>
             <a href="book2/index.html">Buy our newest book!</a>
         </div>
         <main>