Update style.css

style.css

@@ -1,28 +1,149 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+body, html {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #121212;
+    color: #e0e0e0;
+    overflow: hidden; /* Prevent body from scrolling */
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+#loading-screen {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    background-color: black;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999; /* Ensure it's on top of everything else */
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+#content {
+    display: none; /* Hide content initially */
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+/* Existing styles */
+.container-fluid {
+    margin-top: 20px;
+}
+#heading {
+    text-align: center;
+    padding: 20px;
+    padding-top:5px;
+}
+.animated-heading {
+    font-size: 2rem;
+    font-weight: bold;
+    text-align:top;
+    color: #bb86fc;
+    text-transform: uppercase;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+@keyframes bounce-in-fwd {
+    0% {
+        transform: scale(0);
+        opacity: 0;
+    }
+    100% {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+.list-container {
+    padding: 20px;
+    max-height: calc(100vh - 40px);
+    overflow-y: auto;
+    background-color: #000;
+    scrollbar-width: thin;
+    scrollbar-color: #bb86fc #000;
+}
+.list-container::-webkit-scrollbar {
+    width: 8px;
+}
+.list-container::-webkit-scrollbar-track {
+    background: #000;
+}
+.list-container::-webkit-scrollbar-thumb {
+    background-color: #bb86fc;
+    border-radius: 10px;
+}
+.list-group-item {
+    background-color: #000 !important;
+    border: none;
+    margin-bottom: 5px;
+}
+.list-group-item a {
+    text-decoration: none;
+    color: #e0e0e0;
+    display: block;
+    padding: 10px 15px;
+    border: 1px solid #bb86fc;
+    border-radius: 5px;
+    transition: background-color 0.3s, color 0.3s;
+}
+.list-group-item a:hover {
+    background-color: #bb86fc;
+    color: #121212;
 }
+#playlist {
+    background: #1e1e1e;
+    border-radius: 10px;
+    padding: 15px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+}
+#player-container {
+    height: calc(100vh - 200px); /* Adjust height based on your layout */
+    background: #000;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+    margin-top: 20px;
+    margin-left: 20px;
+    position: relative;
+    overflow: hidden;
+}
+#tv-screen {
+    width: 100%;
+    height: 100%;
+    background: #000;
+    border: 10px solid #333;
+    border-top-width: 40px;
+    border-radius: 10px;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3) inset;
+}
+#player {
+    width: 100%;
+    height: 100%;
+}
+
+
+
+/* Media queries for responsiveness */
+@media (max-width: 768px) {
+    .container-fluid {
+        padding: 5px;
+    }
+    
+    .list-container {
+        padding: 0;
+        max-height: 65vh;
+		margin-top: 10px;
+		order: 2;
+    }
+    
+    #player-container {
+        width: 100%;
+        height: 35vh; /* Adjusted to fit within the viewport */
+        margin-top: 0;
+        margin-left: 0;
+		order: 1; /* Move to the top on mobile */
+    }
+
+    #playlist {
+        max-height: 55vh; /* Adjusted to fit within the viewport */
+    }
+
+    .animated-heading {
+        font-size: 1.5rem;
+    }
+}