userContent.css

@-moz-document url("about:newtab"), url("about:home"), url(about:privatebrowsing) {
	/* Sets background image and autoscale image to browser window. */
	body{
		background-image: url("wallpaper/bg.jpg") !important;
		background-size: cover !important;
		background-repeat: no-repeat !important;
		background-attachment: fixed !important;
		background-position-x: center !important;
		background-position-y: bottom !important;
	}

	/* Center and constrain the main content area */
	.body-wrapper {
		max-width: 600px !important;
		margin: 0 auto !important;
		padding: 30px 30px 40px 30px !important;
	}

	/* Firefox logo styling - center it properly with better spacing */
	.logo-and-wordmark {
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		text-align: center !important;
		margin-bottom: 40px !important;
		margin-top: 20px !important;
		padding: 0 20px !important;
	}

	/* Replace Firefox logo with custom orbital SVG icon */
	.logo-and-wordmark .logo {
		/* Use your orbital(1).svg file */
		background: url("wallpaper/orbital(1).svg") no-repeat center center !important;
		background-size: contain !important;
		width: 60px !important;
		height: 60px !important;

		/* Hide the original Firefox logo */
		color: transparent !important;
		fill: transparent !important;

		/* Style the new logo */
		filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.3)) !important;

		/* If you need to make it white/invert colors, uncomment this: */
		/* filter: invert(1) drop-shadow(0 2px 10px rgba(0, 0, 0, 0.3)) !important; */
	}

	/* Alternative Method 2: Embed SVG directly in CSS */
	/*
	.logo-and-wordmark .logo {
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='white' d='M256 56c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m0-8C141.163 48 48 141.163 48 256s93.163 208 208 208 208-93.163 208-208S370.837 48 256 48L256 48z'/%3E%3C/svg%3E") no-repeat center center !important;
		background-size: contain !important;
		width: 96px !important;
		height: 96px !important;
		color: transparent !important;
		fill: transparent !important;
		filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.3)) !important;
	}
	*/

	/* Hide the original SVG content */
	.logo-and-wordmark .logo svg,
	.logo-and-wordmark .logo svg * {
		display: none !important;
	}

	/* If you want to also replace or hide the "Firefox" text */
	.logo-and-wordmark .wordmark {
		/* Hide Firefox text completely */
		/* display: none !important; */

		/* Or replace with custom text */
		/* color: transparent !important; */
		/* font-size: 0 !important; */
	}

	/* Add custom text after hiding Firefox wordmark */
	.logo-and-wordmark .wordmark::after {
		/* content: "Your Custom Text" !important; */
		/* color: rgba(255, 255, 255, 0.9) !important; */
		/* font-size: 48px !important; */
		/* text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important; */
	}

	/* Style the Firefox text/wordmark separately */
	.logo-and-wordmark .wordmark {
		/* Change text color */
		color: rgba(255, 255, 255, 0.9) !important;
		text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;

		/* Uncomment for different text effects: */

		/* Change font size */
		/* font-size: 1.2em !important; */

		/* Add letter spacing */
		/* letter-spacing: 2px !important; */

		/* Change font weight */
		/* font-weight: 300 !important; */
	}

	/* Style the entire logo container */
	.logo-and-wordmark {
		/* Add background behind logo */
		/* background: rgba(255, 255, 255, 0.1) !important; */
		/* border-radius: 15px !important; */
		/* padding: 15px 25px !important; */

		/* Add hover effect */
		transition: all 0.3s ease !important;
	}

	.logo-and-wordmark:hover {
		/* transform: scale(1.05) !important; */
		/* filter: brightness(1.1) !important; */
	}

	/* Style the outer search container */
	.search-wrapper {
		max-width: 480px !important; /* Smaller than the body wrapper */
		margin: 0 auto !important;
		padding: 30px 40px !important; /* More padding to create space around search box */
		background: rgba(255, 255, 255, 0.15) !important;
		border: 1px solid rgba(255, 255, 255, 0.15) !important;
		border-radius: 25px !important;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
	}

	/* Remove background from inner wrapper to avoid double styling */
	.search-inner-wrapper {
		background: transparent !important;
		border: none !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	/* Style the actual search button/input */
	.search-wrapper .search-handoff-button,
	.search-wrapper .search-button,
	.search-handoff-button,
	.fake-focus .search-handoff-button {
		background: rgba(255, 255, 255, 0.1) !important;
		border: 1px solid rgba(255, 255, 255, 0.2) !important;
		border-radius: 20px !important;
		box-shadow: none !important;
		color: rgba(255, 255, 255, 0.9) !important;
		margin: 0 !important;
		width: calc(100% - 0px) !important; /* Ensure it fits within the padded container */
		max-width: none !important;
	}

	/* Hover effects */
	.search-wrapper:hover {
		background: rgba(255, 255, 255, 0.2) !important;
		border-color: rgba(255, 255, 255, 0.25) !important;
	}

	.search-wrapper .search-handoff-button:hover,
	.search-wrapper .search-button:hover,
	.search-handoff-button:hover {
		background: rgba(255, 255, 255, 0.15) !important;
		border-color: rgba(255, 255, 255, 0.3) !important;
	}

	/* Style the search icon and text */
	.search-wrapper .search-handoff-button .fake-caret,
	.search-wrapper .search-handoff-button .fake-textbox {
		color: rgba(255, 255, 255, 0.8) !important;
	}

	/* Style top sites if present */
	.top-site-outer .tile {
		background: rgba(255, 255, 255, 0.1) !important;
		border-radius: 10px !important;
		border: 1px solid rgba(255, 255, 255, 0.1) !important;
	}

	.top-site-outer:hover .tile {
		background: rgba(255, 255, 255, 0.15) !important;
		border-color: rgba(255, 255, 255, 0.2) !important;
	}

	/* Style top site titles */
	.top-site-outer .title {
		color: rgba(255, 255, 255, 0.9) !important;
		text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
	}

	/* Center the top sites section */
	.top-sites {
		display: flex !important;
		justify-content: center !important;
		flex-wrap: wrap !important;
	}
}