:root {
	--background-color: inherit; /* Light mode background color */
	--font-color: inherit; /* Light gray font color for body text */
	--title-color: inherit; /* White font color for titles */
	--switch-color: #ccc;
	--switch-toggle-color: white;
}

/* Dark mode styles */
.dark-mode {
	--background-color: #1b1d21; /* Dark mode background color */
	--font-color: #e0e0e0; /* Light gray font color for body text in dark mode */
	--title-color: #ffffff; /* White font color for titles in dark mode */
	--switch-color: #2b2e32;
	--switch-toggle-color: #1b1d21;
}

/* Switch Styles */
.switch {
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 100;
	display: inline-block;
	width: 40px;
	height: 20px;
	cursor: pointer;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--switch-color);

	-webkit-transition: 0.4s;
	transition: 0.4s;
}

.slider:before {
	position: absolute;
	content: '';
	height: 16px;
	width: 16px;
	left: 4px;
	bottom: 2px;
	background-color: var(--switch-toggle-color);
	-webkit-transition: 0.4s;
	transition: 0.4s;
}

input:checked + .slider {
}

input:checked + .slider:before {
	z-index: 200;
	-webkit-transform: translateX(16px);
	-ms-transform: translateX(16px);
	transform: translateX(16px);
}

.switch-icon {
	width: 14px; /* Set a specific width */
	height: 14px; /* Set a specific height */
	position: absolute;
	top: 3px;
	left: 23px;
	z-index: 200;
	opacity: 0.25;
}