@media (prefers-color-scheme: light) {
	body {
		--background: #ffffff;
		--color: #131313;
	}

	.logo2 {
		display: none;
	}

	.menu li a:hover .logo1 {
		display: none;
	}

	.menu li a:hover .logo2 {
		display: inline-block;
	}

	footer a {
		color: #131313;
	}
}

@media (prefers-color-scheme: dark) {
	body {
		--background: #131313;
		--color: #ffffff;
	}

	.logo1 {
		display: none;
	}

	.menu li a:hover .logo2 {
		display: none;
	}

	.menu li a:hover .logo1 {
		display: inline-block;
	}

	footer a {
		color: #fff;
	}
}

body {
	margin: 0;
	background-color: var(--background);
	font-family: "Montserrat", sans-serif;
	overscroll-behavior: none;
	overflow: auto;

	align-items: center;
	justify-content: center;
}

p,
h1,
h2,
h3,
h4 {
	color: var(--color);
}

.logo1,
.logo2 {
	width: 35px;
	fill: currentColor;
	padding: 10px 5px;
}

header {
	position: fixed;
	background-color: var(--background);
	padding: 15px;
	border-radius: 40px;
	left: 30px;
	margin-left: 10px; /* Increase the value to create more space */
	margin-top: 10px;
}

.menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: left;
}

.menu li {
	margin: 0 5px;
	display: flex;
	align-items: center; /* Center vertically */
}

.menu li a {
	color: var(--color);
	text-decoration: none;
	padding: 5px 15px;
	border-radius: 20px;
	transition: background-color 0.3s;
	font-size: 35px;
	font-weight: 800;
}

.menu li a:hover {
	background-color: var(--color);
	color: var(--background);
}

footer {
	background-color: var(--background); /* Optional: for visibility */
	padding: 2px 8px;
	text-align: center;
	align-content: center;
	position: fixed;
	bottom: 0px;
	font-size: 15px;
	font-weight: 600;
	border-radius: 0px 10px 0px 0px;
}

footer a {
	display: inline-block;
	margin: 0px 5px;
	text-decoration: none;
}

@media (min-width: 1200px) {
}

@media (max-width: 700px) {
	/* Mobile layout */

	body {
		margin: 0;
		padding-top: 0;
	}

	header {
		padding: 2vw; /* Reduce the padding */
		display: flex;
		justify-content: center; /* Center horizontally */
		position: fixed;
		background-color: var(--background);
		border-radius: 0;
		left: 0;
		right: 0; /* Stretch header across the screen */
		margin: 0; /* Remove the left margin */
	}

	.menu li a {
		padding: 5px 3vw; /* Reduce the padding */
		font-size: 4vw; /* Reduce the font size */
	}

	.menu li a:hover {
		color: var(--color); /* Remove the hover effect */
		background-color: var(--background);
	}

	.logo1,
	.logo2 {
		width: 6vw; /* Reduce the logo size */
		padding: 5px; /* Reduce the padding */
	}

	@media (prefers-color-scheme: light) {
		.menu li a:hover .logo1 {
			display: inline-block;
		}

		.menu li a:hover .logo2 {
			display: none;
		}
	}

	@media (prefers-color-scheme: dark) {
		.menu li a:hover .logo1 {
			display: none;
		}

		.menu li a:hover .logo2 {
			display: inline-block;
		}
	}
}