diff --git a/index.html b/index.html
index 0c5ebe4..f49f75f 100644
--- a/index.html
+++ b/index.html
@@ -1,779 +1,1181 @@
-
-
-
-
-
Watermelon Movies 🍉
-
🤘.The Jews took hollywood...we're stealing it back
-
-
+ .close:hover,
+ .close:focus {
+ color: deeppink;
+ text-decoration: none;
+ }
-
-
-
-
-
+ @media (max-width: 600px) {
+ .video-modal-content {
+ padding: 10px;
+ font-size: 14px;
+ }
+ .close {
+ font-size: 24px;
+ }
+ }
+
+ .movie-tile img {
+ border-radius: 10px;
+ margin-bottom: 10px;
+ }
+
+ .movie-tile h3, .movie-tile p {
+ color: black;
+ text-align: left;
+ margin: 5px 0;
+ }
+
+ .dark-mode .movie-tile h3, .dark-mode .movie-tile p {
+ color: white;
+ }
+
+ .night-light .movie-tile h3, .night-light .movie-tile p {
+ color: black;
+ }
+
+ .media-label {
+ display: inline-block;
+ padding: 4px 8px;
+ background-color: #ff6347;
+ color: #fff;
+ border-radius: 4px;
+ font-size: 0.75rem;
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ }
+
+ .stream-btn, .trailer-btn {
+ padding: 5px 10px;
+ margin: 5px;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ }
+
+ .trailer-btn {
+ background-color: #32cd32;
+ color: white;
+ }
+
+ .trailer-btn:hover {
+ background-color: #28a745;
+ }
+
+ .share-btn {
+ background-color: rgb(250, 217, 0);
+ color: black;
+ padding: 5px 10px;
+ margin: 16px 5px 5px 0px;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-weight: bold;
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .share-btn:hover {
+ background-color: rgb(255, 217, 0);
+ }
+
+ .popcorn {
+ margin-left: 5px;
+ display: inline-block;
+ animation: popcornBounce 1s ease-in-out infinite;
+ }
+
+ @keyframes popcornBounce {
+ 0%, 100% {
+ transform: translateY(0) rotate(0deg);
+ filter: drop-shadow(0 0 0 transparent);
+ }
+ 50% {
+ transform: translateY(-10px) rotate(360deg);
+ filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.4));
+ }
+ }
+
+ .melon {
+ width: 6em;
+ height: 6em;
+ background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/21542/melon.svg) no-repeat no-repeat;
+ background-size: 48em;
+ background-position: 0% 0%;
+ animation: melonSequence 0.8s steps(7) infinite reverse;
+ margin: 0em auto;
+ }
+
+ @keyframes melonSequence {
+ from { background-position: 0% 0%; }
+ to { background-position: 100% 0%; }
+ }
+
+ /* Season and episode selectors */
+ .season-selector, .episode-selector {
+ margin-top: 8px;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 15px; /* Increased spacing between buttons */
+ max-height: 150px;
+ overflow-y: auto;
+ padding: 12px;
+ background-color: rgba(0,0,0,0.2);
+ border-radius: 8px;
+ }
+
+ /* Add more spacing between season and episode selectors */
+ .episode-selector {
+ margin-top: 16px;
+ }
+
+ .season-btn, .episode-btn {
+ padding: 8px 16px;
+ background-color: #4CAF50;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ /* Add min-width to ensure consistent spacing */
+ min-width: 40px;
+ text-align: center;
+ /* Make buttons not touch each other */
+ margin: 3px;
+ }
+
+ .season-btn:hover, .episode-btn:hover {
+ background-color: #3e8e41;
+ }
+
+ .season-btn.active, .episode-btn.active {
+ background-color: #ff6347;
+ }
+
+ /* Dark mode styles for buttons */
+ .dark-mode .season-btn, .dark-mode .episode-btn {
+ background-color: #555;
+ color: white;
+ }
+
+ .dark-mode .season-btn:hover, .dark-mode .episode-btn:hover {
+ background-color: #666;
+ }
+
+ .dark-mode .season-btn.active, .dark-mode .episode-btn.active {
+ background-color: #ff6347;
+ }
+
+ /* Night light styles for buttons */
+ .night-light .season-btn, .night-light .episode-btn {
+ background-color: #daa520;
+ color: black;
+ }
+
+ .night-light .season-btn:hover, .night-light .episode-btn:hover {
+ background-color: #cd853f;
+ }
+
+ .night-light .season-btn.active, .night-light .episode-btn.active {
+ background-color: #ff6347;
+ }
+
+ .alt-source-btn {
+ background-color: #ff6347;
+ color: white;
+ padding: 6px 12px;
+ margin: 5px;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-weight: bold;
+ }
+
+ .alt-source-btn:hover {
+ background-color: #ff4500;
+ }
+
+ /* Toggle styles */
+ .dot {
+ position: absolute;
+ left: 1px;
+ top: 1px;
+ background-color: white;
+ width: 4px;
+ height: 4px;
+ border-radius: 50%;
+ transition: transform 0.3s;
+ }
+
+ .dot-night {
+ position: absolute;
+ left: 1px;
+ top: 1px;
+ background-color: white;
+ width: 4px;
+ height: 4px;
+ border-radius: 50%;
+ transition: transform 0.3s;
+ }
+
+ /* Dark mode styles for toggle labels */
+ .dark-mode .toggle-label {
+ color: white;
+ }
+
+ /* Progress indicator */
+ #progressIndicator {
+ position: fixed;
+ top: 4px;
+ right: 4px;
+ background-color: rgba(0, 0, 0, 0.7);
+ color: white;
+ padding: 8px 16px;
+ border-radius: 8px;
+ z-index: 50;
+ display: none;
+ transition: opacity 0.3s;
+ }
+
+ .coming-soon-slider {
+ scroll-snap-type: x mandatory;
+ overflow-x: scroll;
+ -webkit-overflow-scrolling: touch;
+ }
+
+ .slider-container {
+ display: flex;
+ gap: 1rem;
+ -ms-overflow-style: none;
+ scrollbar-width: none;
+ }
+
+ .slider-container::-webkit-scrollbar {
+ display: none;
+ }
+
+ .slider-item {
+ flex: 0 0 auto;
+ width: 200px;
+ scroll-snap-align: start;
+ }
+
+ .slider-item img {
+ width: 100%;
+ height: auto;
+ border-radius: 0.5rem;
+ }
+
+ .category-slider {
+ display: flex;
+ gap: 1rem;
+ -ms-overflow-style: none;
+ scrollbar-width: none;
+ overflow-x: auto;
+ scroll-behavior: smooth;
+ scroll-snap-type: x mandatory;
+ }
+
+ .category-slider::-webkit-scrollbar {
+ display: none;
+ }
+
+ .category-item {
+ flex: 0 0 auto;
+ width: 180px;
+ scroll-snap-align: start;
+ position: relative;
+ }
+
+ .category-item img {
+ width: 100%;
+ height: auto;
+ border-radius: 0.5rem;
+ transition: transform 0.2s;
+ }
+
+ .category-item img:hover {
+ transform: scale(1.05);
+ }
+
+ .rating-badge {
+ position: absolute;
+ top: 5px;
+ right: 5px;
+ background-color: rgba(0,0,0,0.7);
+ color: white;
+ padding: 2px 6px;
+ border-radius: 4px;
+ font-size: 0.8rem;
+ }
+
+ /* Placeholder shimmer effect for loading */
+ .placeholder {
+ background: #f6f7f8;
+ background: linear-gradient(to right, #eee 8%, #ddd 18%, #eee 33%);
+ background-size: 800px 104px;
+ position: relative;
+ animation: placeholderShimmer 1.5s infinite linear forwards;
+ border-radius: 8px;
+ }
+
+ @keyframes placeholderShimmer {
+ 0% { background-position: -468px 0 }
+ 100% { background-position: 468px 0 }
+ }
+
+ .placeholder-item {
+ height: 250px;
+ width: 100%;
+ margin-bottom: 10px;
+ }
+
+
+
+
+
+
🤘.The Jews took hollywood...we're stealing it back
+
+
+
+
+
+
+
-
-
-
-
×
-
-
-
+
+
+
+
×
+
+
+
+
+
+
+
-
-
-
-
-
+
Night Light
+
+
+
+
+
-
-
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
-
-
-
+ }
+
+