More CSS fixes

slideshowpure-fullsreen.css

@@ -1,5 +1,51 @@
 @import url("https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap");
 
+.misty-loading {
+  z-index: 99999999;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.misty-loading h1 {
+  margin: 0;
+  margin-bottom: 3rem;
+  text-transform: uppercase;
+  transition: 0.8s;
+  transform: scale(1.15);
+  opacity: 1;
+  font-size: 4em;
+}
+
+.misty-loading h1 img {
+  transform: scale(1);
+  opacity: 1;
+  display: block;
+  z-index: 999999999 !important;
+  visibility: visible;
+}
+
+.misty-loading h1.active {
+  transform: scale(1);
+  opacity: 1;
+}
+
+.misty-loading .mdl-spinner {
+  margin: 0;
+  position: initial;
+}
+
+.misty-loading .mdl-spinner__layer-1 {
+  border-color: #fff;
+}
+
 @media only screen and (min-width: 767px) {
   div[data-role="page"].page {
     overflow-y: scroll;
@@ -11,10 +57,6 @@
     display: none;
   }
 
-  .emby-scroller-container {
-    z-index: 8;
-}
-
   .backdrop,
   .slide {
     position: absolute;
@@ -69,8 +111,8 @@
 
   .dots-container {
     position: absolute;
-    top: calc(50% + 190px);
-    right: 2%;
+    top: calc(50% + 13em);
+    right: 3%;
     z-index: 2;
     display: flex;
     gap: 5px;
@@ -143,12 +185,19 @@
   }
 
   #slides-container {
-    position: static;
-    width: 92vw;
-    height: 650px;
+    position: relative;
+    width: 100vw;
+    height: 90vh;
     overflow: hidden;
     margin: 0 auto;
     border-radius: 15px;
+    top: -5em;
+  }
+
+  .sections.homeSectionsContainer {
+    position: relative;
+    z-index: 8;
+    top: -17em;
   }
 
   .slide {
@@ -188,15 +237,15 @@
     z-index: 1;
     mask-image: linear-gradient(
       to top,
-      rgba(0, 0, 0, 0) 10%,
-      rgba(0, 0, 0, 0.5) 15%,
-      rgba(0, 0, 0, 1) 30%
+      rgba(0, 0, 0, 0) 2%,
+      rgba(0, 0, 0, 0.5) 6%,
+      rgba(0, 0, 0, 1) 8%
     );
     -webkit-mask-image: linear-gradient(
       to top,
-      rgba(0, 0, 0, 0) 10%,
-      rgba(0, 0, 0, 0.5) 15%,
-      rgba(0, 0, 0, 1) 30%
+      rgba(0, 0, 0, 0) 2%,
+      rgba(0, 0, 0, 0.5) 6%,
+      rgba(0, 0, 0, 1) 8%
     );
   }
 
@@ -211,15 +260,15 @@
     z-index: 2;
     mask-image: linear-gradient(
       to top,
-      rgba(0, 0, 0, 0) 10%,
-      rgba(0, 0, 0, 0.5) 15%,
-      rgba(0, 0, 0, 1) 30%
+      rgba(0, 0, 0, 0) 2%,
+      rgba(0, 0, 0, 0.5) 6%,
+      rgba(0, 0, 0, 1) 8%
     );
     -webkit-mask-image: linear-gradient(
       to top,
-      rgba(0, 0, 0, 0) 10%,
-      rgba(0, 0, 0, 0.5) 15%,
-      rgba(0, 0, 0, 1) 30%
+      rgba(0, 0, 0, 0) 2%,
+      rgba(0, 0, 0, 0.5) 6%,
+      rgba(0, 0, 0, 1) 8%
     );
   }
 
@@ -310,15 +359,15 @@
     z-index: 2;
     mask-image: linear-gradient(
       to top,
-      rgba(0, 0, 0, 0) 8%,
-      rgba(0, 0, 0, 0.5) 10%,
-      rgba(0, 0, 0, 1) 12%
+      rgba(0, 0, 0, 0) 2%,
+      rgba(0, 0, 0, 0.5) 6%,
+      rgba(0, 0, 0, 1) 8%
     );
     -webkit-mask-image: linear-gradient(
       to top,
-      rgba(0, 0, 0, 0) 8%,
-      rgba(0, 0, 0, 0.5) 10%,
-      rgba(0, 0, 0, 1) 12%
+      rgba(0, 0, 0, 0) 2%,
+      rgba(0, 0, 0, 0.5) 6%,
+      rgba(0, 0, 0, 1) 8%
     );
   }
   .genre {
@@ -574,8 +623,8 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    max-height: 60%;
-    max-width: 80%;
+    max-height: 50%;
+    max-width: 70%;
     width: auto;
     z-index: 4;
     filter: brightness(1.5);
@@ -585,8 +634,8 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    max-height: 60%;
-    max-width: 80%;
+    max-height: 50%;
+    max-width: 70%;
     width: auto;
     scale: 1.01;
     filter: blur(1.1rem);