diff --git a/index.html b/index.html
index f295e87..9a2fb02 100644
--- a/index.html
+++ b/index.html
@@ -1,632 +1,708 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Watermelon Movies 🍉</title>
-    <link rel="icon" type="image/x-icon" href="favicon_watermelon_icon.ico">
-    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
-    <style>
-        /* Custom styles for movie tiles */
-        .movie-tile {
-            transition: transform 0.3s;
-            cursor: pointer;
-        }
-        .movie-tile:hover {
-            transform: scale(1.05);
-        }
-        /* Background gradient color */
-        body {
-            background: linear-gradient(to right, #32cd32 50%, #ff6347 50%);
-        }
-        .dark-mode body {
-            background: linear-gradient(to right, #000000 50%, #333333 50%);
-            color: white;
-        }
+    <!DOCTYPE html>
+    <html>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Watermelon Movies 🍉</title>
+        <link rel="icon" type="image/x-icon" href="favicon_watermelon_icon.ico">
+        <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+        <style>
+            /* Custom styles for movie tiles */
+            .movie-tile {
+                transition: transform 0.3s;
+                cursor: pointer;
+            }
+            .movie-tile:hover {
+                transform: scale(1.05);
+            }
+            /* Background gradient color */
+            body {
+                background: linear-gradient(to right, #32cd32 50%, #ff6347 50%);
+            }
+            .dark-mode body {
+                background: linear-gradient(to right, #000000 50%, #333333 50%);
+                color: white;
+            }
 
-        .translate-x-full {
-            transform: translateX(100%);
-        }
-        .dark-mode .movie-tile {
-            background: #444;
-            color: white;
-        }
+            .translate-x-full {
+                transform: translateX(100%);
+            }
+            .dark-mode .movie-tile {
+                background: #444;
+                color: white;
+            }
 
-        .dark-mode .search-input {
-            background-color: #333;
-            color: white;
-        }
+            .dark-mode .search-input {
+                background-color: #333;
+                color: white;
+            }
 
-        .dark-mode .video-modal-content {
-            background-color: rgba(0, 0, 0, 0.8);
-            background: 0;
-        }
+            .dark-mode .video-modal-content {
+                background-color: rgba(0, 0, 0, 0.8);
+                background: 0;
+            }
 
-        .dark-mode .stream-btn .trailer-btn{
-            background-color: #555;
-        }
+            .dark-mode .stream-btn .trailer-btn{
+                background-color: #555;
+            }
 
-        .dark-mode .stream-btn:hover .trailer-btn:hover{
-            background-color: #666;
-        }
+            .dark-mode .stream-btn:hover .trailer-btn:hover{
+                background-color: #666;
+            }
 
-        .night-light body {
-            background: linear-gradient(to right, #f5deb3 50%, #deb887 50%);
-            color: black;
-        }
+            .night-light body {
+                background: linear-gradient(to right, #f5deb3 50%, #deb887 50%);
+                color: black;
+            }
 
-        .night-light .video-modal-content {
-            background-color: rgba(0, 0, 0, 0.3);
-            background: #f5deb3;
-        }
+            .night-light .video-modal-content {
+                background-color: rgba(0, 0, 0, 0.3);
+                background: #f5deb3;
+            }
 
-        .night-light .movie-tile {
-            background: #f5deb3;
-            color: black;
-        }
+            .night-light .movie-tile {
+                background: #f5deb3;
+                color: black;
+            }
 
-        .night-light .search-input {
-            background-color: #deb887;
-            color: black;
-        }
+            .night-light .search-input {
+                background-color: #deb887;
+                color: black;
+            }
 
-        .night-light .video-modal-content {
-            background-color: rgba(255, 228, 181, 0.8);
-        }
+            .night-light .video-modal-content {
+                background-color: rgba(255, 228, 181, 0.8);
+            }
 
-        .night-light .stream-btn .trailer-btn{
-            background-color: #daa520;
-        }
+            .night-light .stream-btn .trailer-btn{
+                background-color: #daa520;
+            }
 
-        .night-light .stream-btn:hover .trailer-btn:hover{
-            background-color: #cd853f;
-        }
+            .night-light .stream-btn:hover .trailer-btn:hover{
+                background-color: #cd853f;
+            }
 
-        .video-modal {
-            display: none; /* Hidden by default */
-            position: fixed; /* Stay in place */
-            z-index: 1000; /* Sit on top */
-            left: 0;
-            top: 0;
-            width: 100%; /* Full width */
-            height: 100%; /* Full height */
-            overflow: auto; /* Enable scroll if needed */
-            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
-        }
+            .video-modal {
+                display: none; /* Hidden by default */
+                position: fixed; /* Stay in place */
+                z-index: 1000; /* Sit on top */
+                left: 0;
+                top: 0;
+                width: 100%; /* Full width */
+                height: 100%; /* Full height */
+                overflow: auto; /* Enable scroll if needed */
+                background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+            }
 
-        .video-modal-content {
-            position: fixed;
-            top: 10%; /* Adjusted for better vertical alignment */
-            left: 5%; /* Centering the modal on mobile */
-            width: 90%; /* Full width on mobile */
-            background: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwallpapercave.com%2Fwp%2Fwp3400754.jpg&f=1&nofb=1&ipt=e6ef828ce4ca397f27b57b585f1382ded672498ebfcdc63466a8fdc6507a5082&ipo=images') no-repeat center center;
-            background-size: cover;
-            padding: 20px;
-            border: 1px solid #888;
-            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Soft shadow for better visibility */
-            border-radius: 25px;
-            border: 4px solid black;
-        }
-
-        .close {
-            position: absolute;
-            right: 36px; /* More accessible position */
-            top: 20px;
-            font-size: 50px; /* Larger clickable area */
-            color: #aaa;
-            cursor: pointer;
-        }
-
-        .close:hover,
-        .close:focus {
-            color: deeppink;
-            text-decoration: none;
-        }
-
-        @media (max-width: 600px) {
             .video-modal-content {
-                padding: 10px;
-                font-size: 14px; /* Smaller font size for very small devices */
+                position: fixed;
+                top: 10%; /* Adjusted for better vertical alignment */
+                left: 5%; /* Centering the modal on mobile */
+                width: 90%; /* Full width on mobile */
+                background: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwallpapercave.com%2Fwp%2Fwp3400754.jpg&f=1&nofb=1&ipt=e6ef828ce4ca397f27b57b585f1382ded672498ebfcdc63466a8fdc6507a5082&ipo=images') no-repeat center center;
+                background-size: cover;
+                padding: 20px;
+                border: 1px solid #888;
+                box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Soft shadow for better visibility */
+                border-radius: 25px;
+                border: 4px solid black;
             }
+
             .close {
-                font-size: 24px; /* Smaller close button on very small devices */
+                position: absolute;
+                right: 36px; /* More accessible position */
+                top: 20px;
+                font-size: 50px; /* Larger clickable area */
+                color: #aaa;
+                cursor: pointer;
             }
-        }
 
-        .hidden { display: none; }
-        .flex { display: flex; }
-        .items-center { align-items: center; }
-        .justify-center { justify-content: center; }
-        .min-h-screen { min-height: 100vh; }
-        .rounded-lg { border-radius: 0.5rem; }
-        .shadow-xl { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); }
-        .p-5 { padding: 1.25rem; }
-        .bg-white { background-color: #ffffff; }
-        .cursor-pointer { cursor: pointer; }
-        .text-gray-700 { color: #4a5568; }
+            .close:hover,
+            .close:focus {
+                color: deeppink;
+                text-decoration: none;
+            }
 
-        /* Other custom styles */
-        .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; /* 6em * 8 */
-            background-position: 0% 0%;
-            animation: melonSequence 0.8s steps(7) infinite reverse;
-            margin: 0em auto;
-        }
+            @media (max-width: 600px) {
+                .video-modal-content {
+                    padding: 10px;
+                    font-size: 14px; /* Smaller font size for very small devices */
+                }
+                .close {
+                    font-size: 24px; /* Smaller close button on very small devices */
+                }
+            }
 
-        @keyframes melonSequence {
-            from {
+            .hidden { display: none; }
+            .flex { display: flex; }
+            .items-center { align-items: center; }
+            .justify-center { justify-content: center; }
+            .min-h-screen { min-height: 100vh; }
+            .rounded-lg { border-radius: 0.5rem; }
+            .shadow-xl { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); }
+            .p-5 { padding: 1.25rem; }
+            .bg-white { background-color: #ffffff; }
+            .cursor-pointer { cursor: pointer; }
+            .text-gray-700 { color: #4a5568; }
+
+            /* Other custom styles */
+            .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; /* 6em * 8 */
                 background-position: 0% 0%;
+                animation: melonSequence 0.8s steps(7) infinite reverse;
+                margin: 0em auto;
             }
-            to {
-                background-position: 100% 0%;
+
+            @keyframes melonSequence {
+                from {
+                    background-position: 0% 0%;
+                }
+                to {
+                    background-position: 100% 0%;
+                }
             }
-        }
 
-        .flex {
-            display: flex;
-            flex-direction: row-reverse; /* Reverse the order for RTL */
-        }
+            .flex {
+                display: flex;
+                flex-direction: row-reverse; /* Reverse the order for RTL */
+            }
 
-        .search-input {
-            border-top-right-radius: 0;
-            border-bottom-right-radius: 0;
-            text-align: right; /* For RTL */
-            font-size: 16px; /* Prevent zoom on mobile devices */
-        }
+            .search-input {
+                border-top-right-radius: 0;
+                border-bottom-right-radius: 0;
+                text-align: right; /* For RTL */
+                font-size: 16px; /* Prevent zoom on mobile devices */
+            }
 
-        .search-btn {
-            border-top-left-radius: 0;
-            border-bottom-left-radius: 0;
-            color: black;
-        }
+            .search-btn {
+                border-top-left-radius: 0;
+                border-bottom-left-radius: 0;
+                color: black;
+            }
 
-        .coming-soon-slider {
-            scroll-snap-type: x mandatory;
-            overflow-x: scroll;
-            -webkit-overflow-scrolling: touch;
-        }
+            .coming-soon-slider {
+                scroll-snap-type: x mandatory;
+                overflow-x: scroll;
+                -webkit-overflow-scrolling: touch;
+            }
 
-        .slider-container {
-            display: flex;
-            gap: 1rem;
-        }
+            .slider-container {
+                display: flex;
+                gap: 1rem;
+            }
 
-        .slider-item {
-            flex: 0 0 auto;
-            width: 200px; /* Adjust the width as per your design */
-            scroll-snap-align: start;
-        }
+            .slider-item {
+                flex: 0 0 auto;
+                width: 200px; /* Adjust the width as per your design */
+                scroll-snap-align: start;
+            }
 
-        .slider-item img {
-            width: 100%;
-            height: auto;
-            border-radius: 0.5rem;
-        }
+            .slider-item img {
+                width: 100%;
+                height: auto;
+                border-radius: 0.5rem;
+            }
 
-        /* Hide vertical scrollbar for the entire page */
-        body, html {
-            overflow-y: hidden; /* Hide vertical scrollbar */
-            max-height: 100vh; /* Optional: Limit the height of the body to the viewport height */
-        }
+            /* Hide vertical scrollbar for the entire page */
+            body, html {
+                overflow-y: hidden; /* Hide vertical scrollbar */
+                max-height: 100vh; /* Optional: Limit the height of the body to the viewport height */
+            }
 
-        /* Hide horizontal scrollbar for the slider */
-        .slider-container {
-            -ms-overflow-style: none;  /* IE and Edge */
-            scrollbar-width: none;  /* Firefox */
-        }
+            /* Hide horizontal scrollbar for the slider */
+            .slider-container {
+                -ms-overflow-style: none;  /* IE and Edge */
+                scrollbar-width: none;  /* Firefox */
+            }
 
-        .slider-container::-webkit-scrollbar {
-            display: none; /* Hide scrollbar for Chrome, Safari and Opera */
-        }
+            .slider-container::-webkit-scrollbar {
+                display: none; /* Hide scrollbar for Chrome, Safari and Opera */
+            }
 
-        /* Ensure the body or main container supports vertical scrolling if needed */
-        body, .main-container {
-            overflow-x: hidden; /* Hide horizontal overflow */
-            overflow-y: auto; /* Enable vertical scrolling if content overflows */
-        }
+            /* Ensure the body or main container supports vertical scrolling if needed */
+            body, .main-container {
+                overflow-x: hidden; /* Hide horizontal overflow */
+                overflow-y: auto; /* Enable vertical scrolling if content overflows */
+            }
 
-        /* Hide scrollbar for aesthetic purposes */
-        .coming-soon-slider::-webkit-scrollbar {
-            display: none;
-        }
+            /* Hide scrollbar for aesthetic purposes */
+            .coming-soon-slider::-webkit-scrollbar {
+                display: none;
+            }
 
-        .coming-soon-slider {
-            -ms-overflow-style: none;  /* IE and Edge */
-            scrollbar-width: none;  /* Firefox */
-        }
+            .coming-soon-slider {
+                -ms-overflow-style: none;  /* IE and Edge */
+                scrollbar-width: none;  /* Firefox */
+            }
 
-        /* Custom styles for movie tiles */
-        .movie-tile {
-            transition: transform 0.3s;
-            cursor: pointer;
-            background: rgb(232, 222, 222); /* Set background to white */
-            border-radius: 15px; /* Rounded corners */
-            padding: 10px; /* Padding inside the tile */
-            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Optional: adds shadow for depth */
-        }
+            /* Custom styles for movie tiles */
+            .movie-tile {
+                transition: transform 0.3s;
+                cursor: pointer;
+                background: rgb(232, 222, 222); /* Set background to white */
+                border-radius: 15px; /* Rounded corners */
+                padding: 10px; /* Padding inside the tile */
+                box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Optional: adds shadow for depth */
+            }
 
-        .movie-tile:hover {
-            transform: scale(1.05);
-        }
+            .movie-tile:hover {
+                transform: scale(1.05);
+            }
 
-        .movie-tile img {
-            border-radius: 10px; /* Rounded corners for images */
-            margin-bottom: 10px; /* Space between image and text */
-        }
+            .movie-tile img {
+                border-radius: 10px; /* Rounded corners for images */
+                margin-bottom: 10px; /* Space between image and text */
+            }
 
-        /* Ensure text is visible against the white background */
-        .movie-tile h3, .movie-tile p {
-            color: black; /* Dark text color for readability */
-            text-align: left;
-            margin: 5px 0; /* Margin for spacing */
-            font-family: 'Courier New', Courier, monospace; /* Monospace font */
-        }
+            /* Ensure text is visible against the white background */
+            .movie-tile h3, .movie-tile p {
+                color: black; /* Dark text color for readability */
+                text-align: left;
+                margin: 5px 0; /* Margin for spacing */
+                font-family: 'Courier New', Courier, monospace; /* Monospace font */
+            }
 
-        body {
-            font-family: 'Courier New', Courier, monospace; /* Monospace font for all text */
-        }
+            body {
+                font-family: 'Courier New', Courier, monospace; /* Monospace font for all text */
+            }
 
-        .special-button {
-            background-color: #4CAF50; /* Green */
-            border: none;
-            color: white;
-            padding: 15px 32px;
-            text-align: center;
-            text-decoration: none;
-            display: inline-block;
-            font-size: 16px;
-            margin: 4px 2px;
-            cursor: pointer;
-        }
+            .special-button {
+                background-color: #4CAF50; /* Green */
+                border: none;
+                color: white;
+                padding: 15px 32px;
+                text-align: center;
+                text-decoration: none;
+                display: inline-block;
+                font-size: 16px;
+                margin: 4px 2px;
+                cursor: pointer;
+            }
 
-        /* This ensures that the button is visually separate from other elements */
-        .special-container {
-            margin-top: 50px;
-            text-align: center;
-        }
+            /* This ensures that the button is visually separate from other elements */
+            .special-container {
+                margin-top: 50px;
+                text-align: center;
+            }
 
-        .media-label {
-            display: inline-block;
-            padding: 4px 8px;
-            background-color: #ff6347;
-            color: #fff;
-            border-radius: 4px;
-            font-size: 0.75rem;
+            .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;
+            }
+
+            .stream-btn {
+                background-color: #32cd32;
+                color: white;
+            }
+
+            .stream-btn:hover {
+                background-color: #28a745;
+            }
+
+            .share-btn {
+                background-color: rgb(250, 217, 0); /* Gold color */
+                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); /* Adding shadow to text */
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+            }
+
+            .share-btn:hover {
+                background-color: rgb(255, 217, 0); /* Slightly lighter gold for hover effect */
+            }
+
+            .popcorn {
+                margin-left: 5px;  /* Adds space between the text and emoji */
+                display: inline-block; /* Allows transformation effects */
+                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)); /* Add a shadow to enhance the effect */
+                }
+            }
+
+
+        #overlay {
             position: absolute;
-            top: 10px;
-            right: 10px;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: transparent;
+            z-index: 1;
         }
-
-        .stream-btn, .trailer-btn {
-            padding: 5px 10px;
-            margin: 5px;
-            border: none;
-            border-radius: 4px;
-            cursor: pointer;
-        }
-
-        .stream-btn {
-            background-color: #32cd32;
-            color: white;
-        }
-
-        .stream-btn:hover {
-            background-color: #28a745;
-        }
-
-        .share-btn {
-            background-color: rgb(250, 217, 0); /* Gold color */
-            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); /* Adding shadow to text */
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .share-btn:hover {
-            background-color: rgb(255, 217, 0); /* Slightly lighter gold for hover effect */
-        }
-
-        .popcorn {
-            margin-left: 5px;  /* Adds space between the text and emoji */
-            display: inline-block; /* Allows transformation effects */
-            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)); /* Add a shadow to enhance the effect */
-            }
-        }
-    </style>
-</head>
-<body class="text-black">
-    <div class="container mx-auto px-4">
-        <h1 class="text-6xl font-bold my-8 text-left">Watermelon Movies 🍉</h1>
-        <h2 class="text-left">🤘.The Jews took hollywood...we're stealing it back</h2>
-        <div class="melon"></div>
-        <div class="relative text-gray-600">
-            <form id="searchForm" action="#">
-                <input type="search" name="search" placeholder="Search" class="bg-white h-10 px-5 pr-10 rounded-full text-sm focus:outline-none">
-                <button type="submit" class="absolute right-0 top-0 mt-3 mr-4">
-                    <!-- SVG code -->
-                    <svg class="h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 56.966 56.966" style="enable-background:new 0 0 56.966 56.966;" xml:space="preserve" width="512px" height="512px">
-                        <path d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23  s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92  c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17  s-17-7.626-17-17S14.61,6,23.984,6z"/>
-                    </svg>
-                </button>
-            </form>
-        </div>
-        <br>
-        <div id="searchResults" class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4"></div>
-        <div id="movies" class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4"></div>
-    </div>
-
-    <!-- Video Modal -->
-    <div id="videoModal" class="video-modal">
-        <div class="video-modal-content">
-            <span class="close">&times;</span>
-            <div style="border-radius: 10px; width: 100%; overflow: hidden;">
-                <iframe id="videoIframe" width="100%" height="500px" frameborder="0" allowfullscreen></iframe>
-            </div>
-            <div class="flex justify-end items-center mt-4 space-x-4">
-                <label for="night-light-toggle" class="flex items-center cursor-pointer mt-3">
-                    <div class="relative">
-                        <input type="checkbox" id="night-light-toggle" class="sr-only">
-                        <div class="block bg-yellow-100 w-10 h-6 rounded-full"></div>
-                        <div class="dot-night absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition transform"></div>
-                    </div>
-                    <div class="ml-2 mr-2 text-gray-700">Night Light</div>
-                </label>
-                <label for="dark-mode-toggle" class="flex items-center cursor-pointer ml-4 mt-3">
-                    <div class="relative">
-                        <input type="checkbox" id="dark-mode-toggle" class="sr-only">
-                        <div class="bg-gray-400 w-10 h-6 rounded-full"></div>
-                        <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition transform"></div>
-                    </div>
-                    <div class="mr-2 text-gray-700">Dark Mode</div>
-                </label>
-                <button class="share-btn" onclick="navigator.clipboard.writeText(window.location.href)">
-                    Pass the<span class="popcorn">🍿</span>
-                </button>
-            </div>
-        </div>
-    </div>
-
-    <div id="randomMovies" class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4 my-4">
-        <!-- Random movies will load here -->
-    </div>
-
-    <!-- Coming Soon Section -->
-    <div id="comingSoon" class="my-8">
-        <h2 class="text-2xl font-bold mb-4 text-left pl-4">Coming Soon</h2>
-        <div class="slider-container flex overflow-x-auto pl-4 pr-2 py-2 space-x-4">
-            <!-- Slider items will be added here by JavaScript -->
-        </div>
-    </div>
-
-    <script>
-        const apiKey = '8bb85bb00bf81f0ad511a7609d736c7f'; // TMDB API Key
-        const youtubeApiKey = 'AIzaSyAG7vJ284HAxvZ5caDhPISIZTPKXZsyKi8'; // Replace with your YouTube API Key
-
-        document.getElementById('searchForm').addEventListener('submit', function(e) {
-            e.preventDefault();
-            const searchQuery = document.querySelector('[name="search"]').value.trim();
-            if (searchQuery) {
-                searchMedia(searchQuery);
-            }
-        });
-
-        function searchMedia(query) {
-            const url = `https://api.themoviedb.org/3/search/multi?api_key=${apiKey}&query=${encodeURIComponent(query)}`;
-            fetch(url)
-                .then(response => response.json())
-                .then(data => {
-                    displaySearchResults(data.results, 'searchResults');
+        </style>
+          <script>
+            (function() {
+                // Intercept window.open calls globally
+                const originalOpen = window.open;
+                window.open = function(url, ...args) {
+                    if (url) {
+                        console.log('Blocked opening URL:', url);
+                        alert("Opening new tabs is blocked on this website.");
+                        return null;
+                    }
+                    return originalOpen.apply(this, arguments);
+                };
+    
+                // Intercept window.open calls from iframes
+                function interceptIframeOpens() {
+                    const originalOpen = window.open;
+                    window.open = function(url, ...args) {
+                        if (url) {
+                            console.log('Blocked opening URL from iframe:', url);
+                            alert("Opening new tabs is blocked on this website.");
+                            return null;
+                        }
+                        return originalOpen.apply(this, arguments);
+                    };
+                }
+    
+                // Apply iframe interception to dynamically added iframes
+                function applyIframeInterception() {
+                    const observer = new MutationObserver((mutations) => {
+                        mutations.forEach((mutation) => {
+                            if (mutation.type === 'childList') {
+                                mutation.addedNodes.forEach((node) => {
+                                    if (node.tagName === 'IFRAME') {
+                                        node.onload = function() {
+                                            interceptIframeOpens();
+                                        };
+                                    }
+                                });
+                            }
+                        });
+                    });
+    
+                    observer.observe(document.body, {
+                        childList: true,
+                        subtree: true
+                    });
+                }
+    
+                // Apply iframe interception to existing iframes
+                document.querySelectorAll('iframe').forEach((iframe) => {
+                    iframe.onload = function() {
+                        interceptIframeOpens();
+                    };
                 });
-        }
+    
+                // Initialize monitoring
+                applyIframeInterception();
+            })();
+        </script>
+    </head>
+    <body class="text-black">
+        <div class="container mx-auto px-4">
+            <h1 class="text-6xl font-bold my-8 text-left">Watermelon Movies 🍉</h1>
+            <h2 class="text-left">🤘.The Jews took hollywood...we're stealing it back</h2>
+            <div class="melon"></div>
+            <div class="relative text-gray-600">
+                <form id="searchForm" action="#">
+                    <input type="search" name="search" placeholder="Search" class="bg-white h-10 px-5 pr-10 rounded-full text-sm focus:outline-none">
+                    <button type="submit" class="absolute right-0 top-0 mt-3 mr-4">
+                        <!-- SVG code -->
+                        <svg class="h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 56.966 56.966" style="enable-background:new 0 0 56.966 56.966;" xml:space="preserve" width="512px" height="512px">
+                            <path d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23  s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92  c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17  s-17-7.626-17-17S14.61,6,23.984,6z"/>
+                        </svg>
+                    </button>
+                </form>
+            </div>
+            <br>
+            <div id="searchResults" class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4"></div>
+            <div id="movies" class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4"></div>
+        </div>
 
-        function displaySearchResults(results, containerId) {
-            const container = document.getElementById(containerId);
-            container.innerHTML = ''; // Clear previous results
-            results.forEach(result => {
-                if ((result.media_type === 'movie' || result.media_type === 'tv') && result.poster_path) {
-                    const title = result.title || result.name;
-                    const imdbId = result.id; // Assuming it fetches the correct ID
-                    const posterPath = `https://image.tmdb.org/t/p/w500${result.poster_path}`;
-                    const overview = result.overview || 'No description available.';
-                    const mediaType = result.media_type;
+        <!-- Video Modal -->
+        <div id="videoModal" class="video-modal">
+            <div class="video-modal-content">
+                <span class="close">&times;</span>
+                <div style="border-radius: 10px; width: 100%; overflow: hidden;">
+                    <div id="iframeContainer">
+                        <iframe id="videoIframe" width="100%" height="500px" frameborder="0" allowfullscreen href="xxxxxxxxxxxxx" target="_self"><a href="xxxxxxxxxxxxx" target="_self"></a></iframe>
+                    </div>
+                </div>
+                <div class="flex justify-end items-center mt-4 space-x-4">
+                    <label for="night-light-toggle" class="flex items-center cursor-pointer mt-3">
+                        <div class="relative">
+                            <input type="checkbox" id="night-light-toggle" class="sr-only">
+                            <div class="block bg-yellow-100 w-10 h-6 rounded-full"></div>
+                            <div class="dot-night absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition transform"></div>
+                        </div>
+                        <div class="ml-2 mr-2 text-gray-700">Night Light</div>
+                    </label>
+                    <label for="dark-mode-toggle" class="flex items-center cursor-pointer ml-4 mt-3">
+                        <div class="relative">
+                            <input type="checkbox" id="dark-mode-toggle" class="sr-only">
+                            <div class="bg-gray-400 w-10 h-6 rounded-full"></div>
+                            <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition transform"></div>
+                        </div>
+                        <div class="mr-2 text-gray-700">Dark Mode</div>
+                    </label>
+                    <button class="share-btn" onclick="navigator.clipboard.writeText(window.location.href)">
+                        Pass the<span class="popcorn">🍿</span>
+                    </button>
+                </div>
+            </div>
+        </div>
 
-                    const movieTile = document.createElement('div');
-                    movieTile.className = 'movie-tile';
-                    movieTile.innerHTML = `
-                        <img src="${posterPath}" alt="Poster for ${title}" style="width:100%; height:auto;">
-                        <h3>${title}</h3>
-                        <p>${overview}</p>
-                        <button class="stream-btn bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded" onclick="openModal('${mediaType}', '${imdbId}')">Stream</button>
-                        <button class="trailer-btn bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" onclick="fetchTrailer('${title}')">Trailer</button>
-                    `;
-                    container.appendChild(movieTile);
+        <div id="randomMovies" class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4 my-4">
+            <!-- Random movies will load here -->
+        </div>
+
+        <!-- Coming Soon Section -->
+        <div id="comingSoon" class="my-8">
+            <h2 class="text-2xl font-bold mb-4 text-left pl-4">Coming Soon</h2>
+            <div class="slider-container flex overflow-x-auto pl-4 pr-2 py-2 space-x-4">
+                <!-- Slider items will be added here by JavaScript -->
+            </div>
+        </div>
+
+        <script>
+            const apiKey = '8bb85bb00bf81f0ad511a7609d736c7f'; // TMDB API Key
+            const youtubeApiKey = 'AIzaSyAG7vJ284HAxvZ5caDhPISIZTPKXZsyKi8'; // Replace with your YouTube API Key
+
+            document.getElementById('searchForm').addEventListener('submit', function(e) {
+                e.preventDefault();
+                const searchQuery = document.querySelector('[name="search"]').value.trim();
+                if (searchQuery) {
+                    searchMedia(searchQuery);
                 }
             });
-        }
 
-        function fetchTrailer(title) {
-            const youtubeSearchUrl = `https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=1&q=${encodeURIComponent(title + ' trailer')}&key=${youtubeApiKey}`;
-            fetch(youtubeSearchUrl)
-                .then(response => response.json())
-                .then(data => {
-                    if (data.items.length > 0) {
-                        const videoId = data.items[0].id.videoId;
-                        openTrailerModal(videoId);
-                    } else {
-                        alert('Trailer not found.');
+            function searchMedia(query) {
+                const url = `https://api.themoviedb.org/3/search/multi?api_key=${apiKey}&query=${encodeURIComponent(query)}`;
+                fetch(url)
+                    .then(response => response.json())
+                    .then(data => {
+                        displaySearchResults(data.results, 'searchResults');
+                    });
+            }
+
+            function displaySearchResults(results, containerId) {
+                const container = document.getElementById(containerId);
+                container.innerHTML = ''; // Clear previous results
+                results.forEach(result => {
+                    if ((result.media_type === 'movie' || result.media_type === 'tv') && result.poster_path) {
+                        const title = result.title || result.name;
+                        const imdbId = result.id; // Assuming it fetches the correct ID
+                        const posterPath = `https://image.tmdb.org/t/p/w500${result.poster_path}`;
+                        const overview = result.overview || 'No description available.';
+                        const mediaType = result.media_type;
+
+                        const movieTile = document.createElement('div');
+                        movieTile.className = 'movie-tile';
+                        movieTile.innerHTML = `
+                            <img src="${posterPath}" alt="Poster for ${title}" style="width:100%; height:auto;">
+                            <h3>${title}</h3>
+                            <p>${overview}</p>
+                            <button class="stream-btn bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded" onclick="openModal('${mediaType}', '${imdbId}')">Stream</button>
+                            <button class="trailer-btn bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" onclick="fetchTrailer('${title}')">Trailer</button>
+                        `;
+                        container.appendChild(movieTile);
                     }
                 });
-        }
+            }
+
+            function fetchTrailer(title) {
+                const youtubeSearchUrl = `https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=1&q=${encodeURIComponent(title + ' trailer')}&key=${youtubeApiKey}`;
+                fetch(youtubeSearchUrl)
+                    .then(response => response.json())
+                    .then(data => {
+                        if (data.items.length > 0) {
+                            const videoId = data.items[0].id.videoId;
+                            openTrailerModal(videoId);
+                        } else {
+                            alert('Trailer not found.');
+                        }
+                    });
+            }
+
+            function openTrailerModal(videoId) {
+                const videoUrl = `https://www.youtube.com/embed/${videoId}`;
+                const modal = document.getElementById("videoModal");
+                const videoIframe = document.getElementById("videoIframe");
+
+                modal.style.display = "block";
+                videoIframe.src = videoUrl;
+            }
 
-        function openTrailerModal(videoId) {
-            const videoUrl = `https://www.youtube.com/embed/${videoId}`;
             const modal = document.getElementById("videoModal");
+            const span = document.getElementsByClassName("close")[0];
             const videoIframe = document.getElementById("videoIframe");
 
-            modal.style.display = "block";
-            videoIframe.src = videoUrl;
-        }
-
-        const modal = document.getElementById("videoModal");
-        const span = document.getElementsByClassName("close")[0];
-        const videoIframe = document.getElementById("videoIframe");
-
-        span.onclick = function() {
-            modal.style.display = "none";
-            videoIframe.src = "";
-        }
-
-        window.onclick = function(event) {
-            if (event.target == modal) {
+            span.onclick = function() {
                 modal.style.display = "none";
                 videoIframe.src = "";
             }
-        }
 
-        function openModal(mediaType, imdbId) {
-            let baseUrl = 'https://vidsrc.xyz/embed/';
-            if (mediaType === 'movie') {
-                baseUrl += 'movie/';
-            } else if (mediaType === 'tv') {
-                baseUrl += 'tv/';
-            } else {
-                console.error('Unsupported media type');
-                return;
+            window.onclick = function(event) {
+                if (event.target == modal) {
+                    modal.style.display = "none";
+                    videoIframe.src = "";
+                }
             }
-            const videoUrl = baseUrl + imdbId;
-            modal.style.display = "block";
-            videoIframe.src = videoUrl;
 
-            const newUrl = `${window.location.pathname}?type=${mediaType}&id=${imdbId}`;
-            window.history.pushState({ path: newUrl }, '', newUrl);
-        }
+            function openModal(mediaType, imdbId) {
+                let baseUrl = 'https://vidsrc.xyz/embed/';
+                if (mediaType === 'movie') {
+                    baseUrl += 'movie/';
+                } else if (mediaType === 'tv') {
+                    baseUrl += 'tv/';
+                } else {
+                    console.error('Unsupported media type');
+                    return;
+                }
+                const videoUrl = baseUrl + imdbId;
+                modal.style.display = "block";
+                videoIframe.src = videoUrl;
 
-        document.addEventListener('DOMContentLoaded', function() {
-            fetchMovies(); // Fetches upcoming movies for the Coming Soon section
-            fetchRandomMovies(); // Fetches random movies for display on page load
+                const newUrl = `${window.location.pathname}?type=${mediaType}&id=${imdbId}`;
+                window.history.pushState({ path: newUrl }, '', newUrl);
+            }
 
-            document.addEventListener('keydown', function(e) {
-                if (e.key === '/' && document.activeElement.tagName !== 'INPUT') {
-                    e.preventDefault();
-                    document.querySelector('[name="search"]').focus();
+            document.addEventListener('DOMContentLoaded', function() {
+                fetchMovies(); // Fetches upcoming movies for the Coming Soon section
+                fetchRandomMovies(); // Fetches random movies for display on page load
+
+                document.addEventListener('keydown', function(e) {
+                    if (e.key === '/' && document.activeElement.tagName !== 'INPUT') {
+                        e.preventDefault();
+                        document.querySelector('[name="search"]').focus();
+                    }
+                });
+
+                const urlParams = new URLSearchParams(window.location.search);
+                const mediaType = urlParams.get('type');
+                const imdbId = urlParams.get('id');
+                if (mediaType && imdbId) {
+                    openModal(mediaType, imdbId);
                 }
             });
 
-            const urlParams = new URLSearchParams(window.location.search);
-            const mediaType = urlParams.get('type');
-            const imdbId = urlParams.get('id');
-            if (mediaType && imdbId) {
-                openModal(mediaType, imdbId);
+            function fetchRandomMovies() {
+                fetch(`https://api.themoviedb.org/3/movie/popular?api_key=${apiKey}&language=en-US&page=1`)
+                    .then(response => response.json())
+                    .then(data => {
+                        displayMovies(data.results, 'randomMovies');
+                    })
+                    .catch(error => console.error('Error fetching random movies:', error));
             }
-        });
 
-        function fetchRandomMovies() {
-            fetch(`https://api.themoviedb.org/3/movie/popular?api_key=${apiKey}&language=en-US&page=1`)
-                .then(response => response.json())
-                .then(data => {
-                    displayMovies(data.results, 'randomMovies');
-                })
-                .catch(error => console.error('Error fetching random movies:', error));
-        }
+            function fetchMovies() {
+                fetch(`https://api.themoviedb.org/3/movie/upcoming?api_key=${apiKey}&language=en`)
+                    .then(response => response.json())
+                    .then(data => displayComingSoon(data.results))
+                    .catch(error => console.error('Fetching movies failed:', error));
+            }
 
-        function fetchMovies() {
-            fetch(`https://api.themoviedb.org/3/movie/upcoming?api_key=${apiKey}&language=en`)
-                .then(response => response.json())
-                .then(data => displayComingSoon(data.results))
-                .catch(error => console.error('Fetching movies failed:', error));
-        }
-
-        function displayComingSoon(movies) {
-            const container = document.getElementById('comingSoon');
-            container.innerHTML = '';
-            const slider = document.createElement('div');
-            slider.className = 'slider-container flex overflow-x-auto pl-4 pr-2 py-2 space-x-4';
-            movies.forEach(movie => {
-                const movieCard = document.createElement('div');
-                movieCard.className = 'slider-item';
-                movieCard.innerHTML = `
-                    <img src="https://image.tmdb.org/t/p/w500${movie.poster_path}" alt="${movie.title}" class="rounded-lg w-full h-auto">
-                    <h3 class="text-lg font-semibold mt-2">${movie.title}</h3>
-                    <button class="stream-btn bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded" onclick="openModal('movie', '${movie.id}')">Stream</button>
-                `;
-                slider.appendChild(movieCard);
-            });
-            container.appendChild(slider);
-        }
-
-        function displayMovies(movies, containerId) {
-            const container = document.getElementById(containerId);
-            container.innerHTML = ''; // Clear previous results
-            movies.forEach(movie => {
-                if (movie.poster_path) {
-                    const movieTile = document.createElement('div');
-                    movieTile.className = 'movie-tile';
-                    movieTile.innerHTML = `
+            function displayComingSoon(movies) {
+                const container = document.getElementById('comingSoon');
+                container.innerHTML = '';
+                const slider = document.createElement('div');
+                slider.className = 'slider-container flex overflow-x-auto pl-4 pr-2 py-2 space-x-4';
+                movies.forEach(movie => {
+                    const movieCard = document.createElement('div');
+                    movieCard.className = 'slider-item';
+                    movieCard.innerHTML = `
                         <img src="https://image.tmdb.org/t/p/w500${movie.poster_path}" alt="${movie.title}" class="rounded-lg w-full h-auto">
-                        <h3>${movie.title}</h3>
-                        <p>${movie.overview || 'No description available.'}</p>
+                        <h3 class="text-lg font-semibold mt-2">${movie.title}</h3>
                         <button class="stream-btn bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded" onclick="openModal('movie', '${movie.id}')">Stream</button>
-                        <button class="trailer-btn bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" onclick="fetchTrailer('${movie.title}')">Trailer</button>
                     `;
-                    container.appendChild(movieTile);
+                    slider.appendChild(movieCard);
+                });
+                container.appendChild(slider);
+            }
+
+            function displayMovies(movies, containerId) {
+                const container = document.getElementById(containerId);
+                container.innerHTML = ''; // Clear previous results
+                movies.forEach(movie => {
+                    if (movie.poster_path) {
+                        const movieTile = document.createElement('div');
+                        movieTile.className = 'movie-tile';
+                        movieTile.innerHTML = `
+                            <img src="https://image.tmdb.org/t/p/w500${movie.poster_path}" alt="${movie.title}" class="rounded-lg w-full h-auto">
+                            <h3>${movie.title}</h3>
+                            <p>${movie.overview || 'No description available.'}</p>
+                            <button class="stream-btn bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded" onclick="openModal('movie', '${movie.id}')">Stream</button>
+                            <button class="trailer-btn bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" onclick="fetchTrailer('${movie.title}')">Trailer</button>
+                        `;
+                        container.appendChild(movieTile);
+                    }
+                });
+            }
+
+            
+
+            const toggleSwitch = document.getElementById('dark-mode-toggle');
+            const nightLightSwitch = document.getElementById('night-light-toggle');
+            const bodyElement = document.body;
+            const dotElement = document.querySelector('.dot');
+            const dotNightElement = document.querySelector('.dot-night');
+            const videoModalContent = document.querySelector('.video-modal-content');
+
+            toggleSwitch.addEventListener('change', () => {
+                if (toggleSwitch.checked) {
+                    bodyElement.classList.add('dark-mode');
+                    dotElement.classList.add('translate-x-full');
+                    dotElement.classList.add('bg-gray-800');
+                    videoModalContent.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
+                    document.querySelector('.video-modal').style.backgroundColor = 'rgba(0, 0, 0, 0.9)';
+                } else {
+                    bodyElement.classList.remove('dark-mode');
+                    dotElement.classList.remove('translate-x-full');
+                    dotElement.classList.remove('bg-gray-800');
+                    videoModalContent.style.backgroundColor = 'rgba(255, 255, 255, 1)';
+                    document.querySelector('.video-modal').style.backgroundColor = 'rgba(0, 0, 0, 0.4)';
                 }
             });
-        }
 
-        const toggleSwitch = document.getElementById('dark-mode-toggle');
-        const nightLightSwitch = document.getElementById('night-light-toggle');
-        const bodyElement = document.body;
-        const dotElement = document.querySelector('.dot');
-        const dotNightElement = document.querySelector('.dot-night');
-        const videoModalContent = document.querySelector('.video-modal-content');
+            nightLightSwitch.addEventListener('change', () => {
+                if (nightLightSwitch.checked) {
+                    bodyElement.classList.add('night-light');
+                    dotNightElement.classList.add('translate-x-full');
+                    dotNightElement.classList.add('bg-yellow-500');
+                } else {
+                    bodyElement.classList.remove('night-light');
+                    dotNightElement.classList.remove('translate-x-full');
+                    dotNightElement.classList.remove('bg-yellow-500');
+                }
+            });
 
-        toggleSwitch.addEventListener('change', () => {
-            if (toggleSwitch.checked) {
-                bodyElement.classList.add('dark-mode');
-                dotElement.classList.add('translate-x-full');
-                dotElement.classList.add('bg-gray-800');
-                videoModalContent.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
-                document.querySelector('.video-modal').style.backgroundColor = 'rgba(0, 0, 0, 0.9)';
-            } else {
-                bodyElement.classList.remove('dark-mode');
-                dotElement.classList.remove('translate-x-full');
-                dotElement.classList.remove('bg-gray-800');
-                videoModalContent.style.backgroundColor = 'rgba(255, 255, 255, 1)';
-                document.querySelector('.video-modal').style.backgroundColor = 'rgba(0, 0, 0, 0.4)';
-            }
-        });
-
-        nightLightSwitch.addEventListener('change', () => {
-            if (nightLightSwitch.checked) {
-                bodyElement.classList.add('night-light');
-                dotNightElement.classList.add('translate-x-full');
-                dotNightElement.classList.add('bg-yellow-500');
-            } else {
-                bodyElement.classList.remove('night-light');
-                dotNightElement.classList.remove('translate-x-full');
-                dotNightElement.classList.remove('bg-yellow-500');
-            }
-        });
-    </script>
-</body>
-</html>
+        
+        </script>
+    </body>
+    </html>
