:root {
	--main-bg: rgba(4, 4, 96, 0.35);
	--bg-color: rgba(76, 76, 76, 1.00);
	--bg-color2: rgba(76, 76, 76, 0.05);
	--text-color: rgba(224, 224, 224, 1.00);
	--button-bg: rgba(49, 45, 75, 0.85);
	--button-text: #ffffff;
	--button-hover-bg: rgba(49, 45, 75, 1);
	--button-active-bg: #312d4b;
	--input-bg: #312d4b;
	--border-color: rgba(0, 0, 0, 0.05);
	--border-color2: rgba(0, 0, 0, 0.00);
}

[data-theme="light"] {
	--main-bg: rgba(4, 4, 96, 0.35);
	--bg-color: rgba(255, 255, 255, 1.00);
	--bg-color2: rgba(255, 255, 255, 0.05);
	--text-color: rgba(44, 44, 44, 1.00);
	--border-color: rgba(255, 255, 255, 0.05);
	--border-color2: rgba(255, 255, 255, 0.05);
}

.theme-toggle {
	position: fixed;
	top: 20px;
	right: 20px;
}

.theme-button {
	background-color: var(--button-bg);
	color: var(--button-text);
	border: 1px solid rgba(255, 255, 255, 0.1);
	padding: 10px;
	border-radius: 8px;
	font-size: 16px;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
}

.theme-button:hover {
	background-color: var(--button-hover-bg);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	transform: translateY(-1px);
}

.theme-button.active {
	background-color: var(--button-active-bg);
}

.theme-button i {
	pointer-events: none;
	font-size: 18px;
}