css styling updated, added check for user mobile

1000_bots_webextension/background.js

@@ -20,13 +20,13 @@
 
 "use strict";
 
-const DEBUG = false;
+const DEBUG = true;
 
 // Use chrome or browser depending on the environment
 const browser = chrome || browser;
 
 // Custom user-agent to spoof Googlebot
-const user_agent =
+let user_agent =
 	"Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)";
 const target_urls = "*://*/*";
 
@@ -43,6 +43,38 @@ browser.storage.sync
 		console.error("Error setting duration:", error);
 	});
 
+function check_user_agent() {
+	// On active tab execute script
+	browser.tabs
+		.query({ active: true, currentWindow: true })
+		.then((tabs) => {
+			browser.scripting.executeScript({
+				target: { tabId: tabs[0].id },
+				files: ["checkUser.js"],
+			});
+		})
+		.catch((error) => {
+			console.error(`Failed to execute script: ${error}`);
+		});
+}
+
+function if_user_agent_mobile() {
+	// Get boolean from storage
+	browser.storage.sync.get("isMobile").then((result) => {
+		if (result.isMobile) {
+			if (DEBUG)
+				console.log("User is on a mobile device, changing userAgent.");
+			user_agent =
+				"Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5X Build/MMB29P) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/W.X.Y.Z Mobile Safari/537.36 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)";
+			if (DEBUG) console.log("User-Agent set to mobile device.");
+			if (DEBUG) console.log("User-Agent:", user_agent);
+		} else {
+			if (DEBUG)
+				console.log("User is not on a mobile device. Continuing...");
+		}
+	});
+}
+
 // Set extension status to ON
 function set_extension_status_ON() {
 	browser.storage.sync
@@ -56,6 +88,14 @@ function set_extension_status_ON() {
 				title: "You are now surfing the web as a bot 🤖",
 			});
 		})
+		.then(() => {
+			// Check if the user is on a mobile device
+			check_user_agent();
+		})
+		.then(() => {
+			// If the user is on a mobile device change the user-agent
+			if_user_agent_mobile();
+		})
 		.then(() => {
 			// Start user-agent spoofing
 			return startUserAgentSpoofing();
@@ -183,14 +223,21 @@ function stopUserAgentSpoofing() {
 function refreshAllTabs() {
 	return browser.tabs.query({}).then((tabs) => {
 		tabs.forEach((tab) => {
-			browser.tabs
-				.reload(tab.id)
-				.then(() => {
-					if (DEBUG) console.log(`Refreshed tab: ${tab.id}`);
-				})
-				.catch((error) => {
-					console.error(`Error refreshing tab ${tab.id}:`, error);
-				});
+			if (tab.url.startsWith("https://")) {
+				browser.tabs
+					.reload(tab.id)
+					.then(() => {
+						if (DEBUG) console.log(`Refreshed tab: ${tab.id}`);
+					})
+					.catch((error) => {
+						console.error(`Error refreshing tab ${tab.id}:`, error);
+					});
+			} else {
+				if (DEBUG)
+					console.log(
+						`Skipped refreshing tab ${tab.id} (URL does not start with "https://")`
+					);
+			}
 		});
 	});
 }
@@ -215,20 +262,24 @@ function injectContentScript() {
 									`Content script injected into tab ${tab.id}`
 								);
 
-							// Use a hardcoded duration for removal
-							const duration = 80000; // 8 seconds or whatever you need
-
 							// Set a timeout to remove the content after the hardcoded duration
 							setTimeout(() => {
-								browser.storage.sync.set({
-									bannerInjected: true,
-								});
+								browser.storage.sync
+									.set({
+										bannerInjected: true,
+									})
+									.then(() => {
+										if (DEBUG)
+											console.log(
+												"Banner injected flag set to true."
+											);
+									});
 								if (DEBUG)
 									console.log(
 										"Duration expired. Removing content."
 									);
 								removeInjectedContent(); // Ensure this is defined
-							}, duration);
+							}, DISPLAY_DURATION);
 						})
 						.catch((error) => {
 							console.error(

1000_bots_webextension/background_chrome.js

@@ -20,13 +20,13 @@
 
 "use strict";
 
-const DEBUG = false;
+const DEBUG = true;
 
 // Use chrome or browser depending on the environment
 const browser = chrome || browser;
 
 // Custom user-agent to spoof Googlebot
-const user_agent =
+let user_agent =
 	"Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)";
 const target_urls = "*://*/*";
 
@@ -43,6 +43,38 @@ browser.storage.sync
 		console.error("Error setting duration:", error);
 	});
 
+function check_user_agent() {
+	// On active tab execute script
+	browser.tabs
+		.query({ active: true, currentWindow: true })
+		.then((tabs) => {
+			browser.scripting.executeScript({
+				target: { tabId: tabs[0].id },
+				files: ["checkUser.js"],
+			});
+		})
+		.catch((error) => {
+			console.error(`Failed to execute script: ${error}`);
+		});
+}
+
+function if_user_agent_mobile() {
+	// Get boolean from storage
+	browser.storage.sync.get("isMobile").then((result) => {
+		if (result.isMobile) {
+			if (DEBUG)
+				console.log("User is on a mobile device, changing userAgent.");
+			user_agent =
+				"Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5X Build/MMB29P) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/W.X.Y.Z Mobile Safari/537.36 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)";
+			if (DEBUG) console.log("User-Agent set to mobile device.");
+			if (DEBUG) console.log("User-Agent:", user_agent);
+		} else {
+			if (DEBUG)
+				console.log("User is not on a mobile device. Continuing...");
+		}
+	});
+}
+
 // Set extension status to ON
 function set_extension_status_ON() {
 	browser.storage.sync
@@ -56,6 +88,14 @@ function set_extension_status_ON() {
 				title: "You are now surfing the web as a bot 🤖",
 			});
 		})
+		.then(() => {
+			// Check if the user is on a mobile device
+			check_user_agent();
+		})
+		.then(() => {
+			// If the user is on a mobile device change the user-agent
+			if_user_agent_mobile();
+		})
 		.then(() => {
 			// Start user-agent spoofing
 			return startUserAgentSpoofing();
@@ -183,14 +223,21 @@ function stopUserAgentSpoofing() {
 function refreshAllTabs() {
 	return browser.tabs.query({}).then((tabs) => {
 		tabs.forEach((tab) => {
-			browser.tabs
-				.reload(tab.id)
-				.then(() => {
-					if (DEBUG) console.log(`Refreshed tab: ${tab.id}`);
-				})
-				.catch((error) => {
-					console.error(`Error refreshing tab ${tab.id}:`, error);
-				});
+			if (tab.url.startsWith("https://")) {
+				browser.tabs
+					.reload(tab.id)
+					.then(() => {
+						if (DEBUG) console.log(`Refreshed tab: ${tab.id}`);
+					})
+					.catch((error) => {
+						console.error(`Error refreshing tab ${tab.id}:`, error);
+					});
+			} else {
+				if (DEBUG)
+					console.log(
+						`Skipped refreshing tab ${tab.id} (URL does not start with "https://")`
+					);
+			}
 		});
 	});
 }
@@ -215,20 +262,24 @@ function injectContentScript() {
 									`Content script injected into tab ${tab.id}`
 								);
 
-							// Use a hardcoded duration for removal
-							const duration = 80000; // 8 seconds or whatever you need
-
 							// Set a timeout to remove the content after the hardcoded duration
 							setTimeout(() => {
-								browser.storage.sync.set({
-									bannerInjected: true,
-								});
+								browser.storage.sync
+									.set({
+										bannerInjected: true,
+									})
+									.then(() => {
+										if (DEBUG)
+											console.log(
+												"Banner injected flag set to true."
+											);
+									});
 								if (DEBUG)
 									console.log(
 										"Duration expired. Removing content."
 									);
 								removeInjectedContent(); // Ensure this is defined
-							}, duration);
+							}, DISPLAY_DURATION);
 						})
 						.catch((error) => {
 							console.error(

1000_bots_webextension/background_ff.js

@@ -26,7 +26,7 @@ var user_agent =
 var target_urls = "*://*/*";
 var status = 0;
 
-const DEBUG = false; // Set to true to enable debug mode
+const DEBUG = true; // Set to true to enable debug mode
 
 // Duration to display the injected HTML (in milliseconds)
 const DISPLAY_DURATION = 8000; // Set to 8 seconds
@@ -137,16 +137,23 @@ function removeInjectedContent() {
 function refreshAllTabs() {
 	browser.tabs.query({}, (tabs) => {
 		tabs.forEach((tab) => {
-			browser.tabs.reload(tab.id, () => {
-				if (browser.runtime.lastError) {
-					console.error(
-						`Error refreshing tab ${tab.id}:`,
-						browser.runtime.lastError
+			if (tab.url.startsWith("https://")) {
+				browser.tabs.reload(tab.id, () => {
+					if (browser.runtime.lastError) {
+						console.error(
+							`Error refreshing tab ${tab.id}:`,
+							browser.runtime.lastError
+						);
+					} else {
+						if (DEBUG) console.log(`Refreshed tab: ${tab.id}`);
+					}
+				});
+			} else {
+				if (DEBUG)
+					console.log(
+						`Skipped refreshing tab ${tab.id} (URL does not start with https://)`
 					);
-				} else {
-					if (DEBUG) console.log(`Refreshed tab: ${tab.id}`);
-				}
-			});
+			}
 		});
 	});
 }
@@ -158,7 +165,11 @@ function set_extension_status_ON() {
 	browser.browserAction.setTitle({
 		title: "You are now surfing the web as a bot 🤖",
 	});
-	injectContentScript();
+	refreshAllTabs();
+
+	setTimeout(() => {
+		injectContentScript();
+	}, 500);
 }
 
 function set_extension_status_OFF() {

1000_bots_webextension/checkUser.js

@@ -0,0 +1,35 @@
+function isAgentMobile() {
+	const regex =
+		/Mobi|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
+	return regex.test(navigator.userAgent);
+}
+
+function hasTouchSupport() {
+	return "ontouchstart" in window || navigator.maxTouchPoints > 0;
+}
+
+function isMobileScreen() {
+	const minWidth = 768; // Minimum width for desktop devices
+	return window.innerWidth < minWidth || screen.width < minWidth;
+}
+
+function isMobile() {
+	// Check if at least 2 of the 3 conditions are true
+
+	const isMobileAgent = isAgentMobile(); // Renamed variable to avoid conflict
+	const touchSupport = hasTouchSupport(); // Renamed variable to avoid conflict
+	const mobileScreen = isMobileScreen(); // Renamed variable to avoid conflict
+
+	const conditions = [isMobileAgent, touchSupport, mobileScreen];
+	const trueConditions = conditions.filter((condition) => condition);
+
+	return trueConditions.length >= 2; // Return true if at least 2 conditions are true
+}
+
+const user = isMobile();
+
+// Check if the user is on a mobile device
+if (user) {
+	if (DEBUG) console.log("User is on a mobile device, changing userAgent.");
+	browser.storage.sync.set({ isMobile: user });
+}

1000_bots_webextension/content.js

@@ -5,7 +5,7 @@ let DEBUG; // Declare the DEBUG variable in the outer scope
 
 browser.storage.sync.get("debug").then((result) => {
 	DEBUG = result.debug;
-	console.log("DEBUG mode:", DEBUG);
+	if (DEBUG) console.log("DEBUG mode:", DEBUG);
 });
 
 // Duration to show the banner (in milliseconds)
@@ -37,7 +37,7 @@ function initializeCSSProperties(result) {
 function injectCSS() {
 	// Inject the CSS file
 	const link = document.createElement("link");
-	link.href = browser.runtime.getURL("style.css");
+	link.href = browser.runtime.getURL("rtbh_style.css");
 	link.rel = "stylesheet";
 	document.head.appendChild(link);
 
@@ -48,17 +48,15 @@ function injectCSS() {
 function createBanner() {
 	// Create the banner container
 	const banner = document.createElement("div");
-	banner.classList.add("extension-banner-container");
+	banner.classList.add("banner");
 
 	const marqeeText = "YOU ARE NOW SURFING THE WEB AS A BOT 🤖 ";
 
 	const bannerContent = `
-	<div class="banner montserrat">
-		<div class="marquee">
-			<span class="marquee__inner" style="--ad: 80s;">
-				${new Array(30).fill(marqeeText).join("")}
-			</span>
-		</div>
+	<div class="marquee">
+		<span class="marquee__inner" style="--ad: 60s;">
+			${new Array(30).fill(marqeeText).join("")}
+		</span>
 	</div>
 	`;
 
@@ -80,7 +78,7 @@ function removeBanner() {
 			if (DEBUG) console.log("Banner removed after duration.");
 
 			// Remove the injected CSS file
-			const link = document.querySelector('link[href$="style.css"]'); // Match any href ending with "style.css"
+			const link = document.querySelector('link[href$="rtbh_style.css"]'); // Match any href ending with "rtbh_style.css"
 			link.parentNode.removeChild(link);
 		}
 	}, DISPLAY_DURATION);

1000_bots_webextension/content_chrome.js

@@ -37,7 +37,7 @@ function initializeCSSProperties(result) {
 function injectCSS() {
 	// Inject the CSS file
 	const link = document.createElement("link");
-	link.href = browser.runtime.getURL("style.css");
+	link.href = browser.runtime.getURL("rtbh_style.css");
 	link.rel = "stylesheet";
 	document.head.appendChild(link);
 
@@ -48,17 +48,15 @@ function injectCSS() {
 function createBanner() {
 	// Create the banner container
 	const banner = document.createElement("div");
-	banner.classList.add("extension-banner-container");
+	banner.classList.add("banner");
 
 	const marqeeText = "YOU ARE NOW SURFING THE WEB AS A BOT 🤖 ";
 
 	const bannerContent = `
-	<div class="banner montserrat">
-		<div class="marquee">
-			<span class="marquee__inner" style="--ad: 80s;">
-				${new Array(30).fill(marqeeText).join("")}
-			</span>
-		</div>
+	<div class="marquee">
+		<span class="marquee__inner" style="--ad: 60s;">
+			${new Array(30).fill(marqeeText).join("")}
+		</span>
 	</div>
 	`;
 
@@ -80,7 +78,7 @@ function removeBanner() {
 			if (DEBUG) console.log("Banner removed after duration.");
 
 			// Remove the injected CSS file
-			const link = document.querySelector('link[href$="style.css"]'); // Match any href ending with "style.css"
+			const link = document.querySelector('link[href$="rtbh_style.css"]'); // Match any href ending with "rtbh_style.css"
 			link.parentNode.removeChild(link);
 		}
 	}, DISPLAY_DURATION);

1000_bots_webextension/content_ff.js

@@ -37,7 +37,7 @@ function initializeCSSProperties(result) {
 function injectCSS() {
 	// Inject the CSS file
 	const link = document.createElement("link");
-	link.href = browser.runtime.getURL("style.css");
+	link.href = browser.runtime.getURL("rtbh_style.css");
 	link.rel = "stylesheet";
 	document.head.appendChild(link);
 
@@ -48,17 +48,15 @@ function injectCSS() {
 function createBanner() {
 	// Create the banner container
 	const banner = document.createElement("div");
-	banner.classList.add("extension-banner-container");
+	banner.classList.add("banner");
 
 	const marqeeText = "YOU ARE NOW SURFING THE WEB AS A BOT 🤖 ";
 
 	const bannerContent = `
-	<div class="banner montserrat">
-		<div class="marquee">
-			<span class="marquee__inner" style="--ad: 80s;">
-				${new Array(30).fill(marqeeText).join("")}
-			</span>
-		</div>
+	<div class="marquee">
+		<span class="marquee__inner" style="--ad: 60s;">
+			${new Array(30).fill(marqeeText).join("")}
+		</span>
 	</div>
 	`;
 
@@ -118,7 +116,7 @@ function createBanner() {
 
 						// Remove the injected CSS file
 						const link = document.querySelector(
-							'link[href="style.css"]'
+							'link[href="rtbh_style.css"]'
 						);
 						if (link) {
 							link.parentNode.removeChild(link); // Corrected to remove the link

1000_bots_webextension/manifest.json

@@ -1,10 +1,13 @@
 {
   "name": "Refuse to be Human — Surf the Web as Googlebot",
   "short_name": "Refuse to be Human",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Surf the Web as Googlebot. Ever wondered what the Googlebot get’s to see online that you do not?",
   "homepage_url": "http://1000scores.com/portfolio-items/mediengruppe-bitnik-1000-bots/",
   "manifest_version": 3,
+  "icons": {
+    "48": "icon_ON_48.png"
+  },
   "background": {
     "service_worker": "background.js"
   },
@@ -29,10 +32,11 @@
         "<all_urls>"
       ],
       "js": [
-        "content.js"
+        "content.js",
+        "checkUser.js"
       ],
       "css": [
-        "style.css"
+        "rtbh_style.css"
       ],
       "run_at": "document_idle"
     }
@@ -40,7 +44,8 @@
   "web_accessible_resources": [
     {
       "resources": [
-        "style.css"
+        "rtbh_style.css",
+        "fonts/*"
       ],
       "matches": [
         "<all_urls>"

1000_bots_webextension/manifest_chrome.json

@@ -1,10 +1,13 @@
 {
   "name": "Refuse to be Human — Surf the Web as Googlebot",
   "short_name": "Refuse to be Human",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Surf the Web as Googlebot. Ever wondered what the Googlebot get’s to see online that you do not?",
   "homepage_url": "http://1000scores.com/portfolio-items/mediengruppe-bitnik-1000-bots/",
   "manifest_version": 3,
+  "icons": {
+    "48": "icon_ON_48.png"
+  },
   "background": {
     "service_worker": "background.js"
   },
@@ -29,10 +32,11 @@
         "<all_urls>"
       ],
       "js": [
-        "content.js"
+        "content.js",
+        "checkUser.js"
       ],
       "css": [
-        "style.css"
+        "rtbh_style.css"
       ],
       "run_at": "document_idle"
     }
@@ -40,7 +44,8 @@
   "web_accessible_resources": [
     {
       "resources": [
-        "style.css"
+        "rtbh_style.css",
+        "fonts/*"
       ],
       "matches": [
         "<all_urls>"

1000_bots_webextension/manifest_ff.json

@@ -2,6 +2,9 @@
   "homepage_url": "http://1000scores.com/portfolio-items/mediengruppe-bitnik-1000-bots/",
   "name": "Refuse to be Human — Surf the Web as Googlebot",
   "short_name": "Refuse to be Human",
+  "icons": {
+    "48": "icon_ON_48.png"
+  },
   "browser_specific_settings": {
     "gecko": {
       "id": "trash@bitnik.org",
@@ -9,13 +12,16 @@
     }
   },
   "description": "Surf the Web as Googlebot. Ever wondered what the Googlebot get’s to see online that you do not?",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "background": {
     "scripts": [
       "background.js"
     ],
     "persistent": true
   },
+  "web_accessible_resources": [
+    "fonts/*"
+  ],
   "permissions": [
     "tabs",
     "activeTab",

1000_bots_webextension/package_me.sh

@@ -7,7 +7,7 @@ export_folder="packaged"
 extension_name="refused_to_be_human"
 
 # Files to include in the package
-include_files="background.js content.js icon_OFF_48.png icon_ON_48.png manifest.json style.css"
+include_files="fonts/texgyreheros-bolditalic.woff background.js checkUser.js content.js icon_OFF_48.png icon_ON_48.png LICENSE manifest.json rtbh_style.css"
 
 # Get the current version using jq to parse JSON (if jq is available)
 current_version=$(jq -r '.version' manifest.json)

1000_bots_webextension/rtbh_style.css

@@ -0,0 +1,126 @@
+@font-face {
+	font-family: "TeXGyreHeros-BoldItalic";
+	font-style: normal;
+	font-weight: 900;
+	src: url("fonts/texgyreheros-bolditalic.woff") format("woff");
+}
+
+:root {
+	--banner-bg-color: black;
+	--banner-color: white;
+	--bg: #8f8f8f;
+}
+
+.banner {
+	background: var(--banner-bg-color);
+	color: var(--banner-color);
+	position: fixed;
+	padding: 1rem;
+	z-index: 40;
+	font-family: "TeXGyreHeros-BoldItalic";
+	font-weight: 900;
+	transform: rotate(-30deg);
+	bottom: 5%;
+	right: -15%;
+	width: 110%;
+	font-size: 2rem;
+	line-height: 3rem;
+	transition: opacity 0.2s linear;
+	/* fade-in and fade-out for the screen take-over */
+	animation: var(--duration) ease-in-out var(--delay) 1 reverse forwards show;
+}
+
+.banner:hover {
+	opacity: 0.05;
+}
+
+@keyframes show {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 0.8;
+	}
+}
+
+/* Larger than mobile screen */
+@media (min-width: 40rem) {
+	.banner {
+		right: -20%;
+		font-size: 6rem;
+		line-height: 7rem;
+	}
+}
+
+/* Larger than tablet screen */
+@media (min-width: 80rem) {
+	.banner {
+		font-size: 8rem;
+		line-height: 9rem;
+	}
+}
+
+/* Larger than desktop screen */
+@media (min-width: 120rem) {
+	.banner {
+		font-size: 10rem;
+		line-height: 11rem;
+	}
+}
+
+/* BANNER ANIMATION */
+
+.marquee {
+	overflow: hidden;
+	position: relative;
+	padding-left: 100%;
+	/* Some browsers may require -webkit-animation */
+	-webkit-animation: reduce 30s linear infinite;
+	animation: reduce 30s linear infinite;
+
+	--offset: 20vw;
+	--move-initial: calc(-70% + var(--offset));
+	--move-final: calc(-50% + var(--offset));
+}
+
+.marquee__inner {
+	white-space: nowrap;
+	display: inline-block;
+	/* Some browsers may require -webkit-animation */
+	-webkit-animation: scroll var(--ad) linear infinite;
+	animation: scroll var(--ad) linear infinite;
+	transform: translate3d(var(--move-initial), 0, 0);
+}
+
+/* Creates two blck-to-transparent gradients at the ends of the marquee */
+.marquee::before,
+.marquee::after {
+	z-index: 1;
+	top: 0;
+	left: 0;
+	position: absolute;
+	width: 40%;
+	height: 100%;
+	content: "";
+	display: block;
+	background: linear-gradient(to right, var(--banner-bg-color), transparent);
+}
+
+.marquee::after {
+	left: auto;
+	right: 0;
+	transform: rotate(180deg);
+}
+
+/* Some browsers may require @-webkit-keyframes */
+@keyframes reduce {
+	to {
+		padding-left: 0;
+	}
+}
+
+@keyframes scroll {
+	to {
+		transform: translateX(-100%);
+	}
+}

1000_bots_webextension/style.css

@@ -1,171 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
-
-:root {
-	--main-bg-color: black;
-	--main-color: white;
-	--bg: #8f8f8f;
-}
-
-.montserrat {
-	font-family: "Montserrat", sans-serif;
-	font-optical-sizing: auto;
-	font-weight: 800;
-	font-style: italic;
-}
-
-.extension-banner-container {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100vw;
-	height: 100vh; /* Full screen height */
-	background-color: transparent;
-	z-index: 9999; /* High z-index to ensure it blocks everything below */
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	pointer-events: none; /* Allow clicks to pass through */
-	background: linear-gradient(var(--main-color), var(--bg));
-	opacity: 0;
-	/* fade-in and fade-out for the screen take-over */
-	animation: var(--duration) ease-in-out var(--duration) 1 normal forwards
-			show,
-		var(--duration) ease-in-out var(--delay) 1 reverse forwards show;
-}
-
-@keyframes show {
-	0% {
-		opacity: 0;
-	}
-	100% {
-		opacity: 0.8;
-	}
-}
-
-.banner {
-	background: var(--main-bg-color);
-	color: var(--main-color);
-	position: relative;
-	padding: 1rem;
-	font-size: 5rem;
-	line-height: 11rem;
-	transform: rotate(-25deg); /* Rotates the banner */
-	width: 200vw; /* Extra-wide to ensure the marquee scrolls smoothly across */
-	height: auto;
-
-	/* Apply gradients to the banner itself */
-	/* Add a left-to-transparent gradient on the left */
-	/* Add a right-to-transparent gradient on the right */
-}
-
-.banner::before,
-.banner::after {
-	position: absolute;
-	top: 0;
-	z-index: 9999;
-	width: 15%;
-	height: 100%;
-	content: "";
-}
-
-.banner::before {
-	left: 0;
-	background: linear-gradient(to right, var(--main-bg-color), transparent);
-}
-
-.banner::after {
-	right: 0;
-	background: linear-gradient(to left, var(--main-bg-color), transparent);
-}
-
-.marquee {
-	overflow: hidden;
-	position: relative;
-	width: 100%;
-}
-
-.marquee__inner {
-	display: inline-block;
-	white-space: nowrap;
-	/* Adjust the speed using --ad which can be set dynamically in the HTML */
-	animation: scroll var(--ad, 100s) linear infinite;
-	transform: translate3d(0, 0, 0); /* Force hardware acceleration */
-}
-
-.marquee span {
-	display: inline-block;
-	padding-right: 2rem; /* Add some space between each repeat */
-}
-
-/* Keyframes to make the animation appear infinite without gaps */
-@keyframes scroll {
-	0% {
-		transform: translate3d(
-			-50%,
-			0,
-			0
-		); /* Start in the middle of the loop */
-	}
-	100% {
-		transform: translate3d(-100%, 0, 0); /* Move left but only 50% */
-	}
-}
-
-/* Mobile screens */
-@media (max-width: 30rem) {
-	.extension-banner-container {
-		width: 110vw;
-		height: 110vh;
-	}
-	.banner {
-		transform: rotate(-60deg);
-		width: 250vw;
-		margin-left: -15rem;
-	}
-}
-
-/* Tablet screens */
-@media (min-width: 48rem) {
-	.banner {
-		transform: rotate(-50deg);
-		width: 225vw;
-		margin-left: -5rem;
-	}
-}
-
-/* iPad Mini */
-@media (min-width: 48rem) and (max-width: 64rem) and (orientation: landscape) {
-	.banner {
-		transform: rotate(-40deg);
-		width: 225vw;
-		margin-left: -5rem;
-	}
-}
-
-/* Laptop screens */
-@media (min-width: 64rem) {
-	.extension-banner-container {
-		width: 115vw;
-		height: 115vh;
-	}
-	.banner {
-		transform: rotate(-30deg);
-		width: 210vw;
-		margin-left: -5rem;
-		margin-top: -5rem;
-	}
-}
-
-/* Desktop screens */
-@media (min-width: 80rem) {
-	.extension-banner-container {
-		width: 115vw;
-		height: 115vh;
-	}
-	.banner {
-		transform: rotate(-32deg);
-		width: 200vw;
-		margin-left: -15rem;
-		margin-top: -15rem;
-	}
-}