src/styles/Nav.css
:root {
	--padding-width: 10rem;
}

.header {
	position: fixed;
	left: -0px;
	top: 0;
	padding-top: 1.3rem;
	padding-left: var(--padding-width);
	padding-right: var(--padding-width);
	width: calc(100vw - calc(var(--padding-width) * 2));
	z-index: 101;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #232135;
}

.header.light {
	background: var(--gradient);
	color: #f5f5f5;
	transition: all 1s;
  }

.nav h1 {
	font-size: calc(1vw + 1.3rem);
	cursor: pointer;
}

.nav ul {
	display: flex;
}

.nav ul li {
	list-style: none;
	margin-left: 4rem;
	border-bottom: solid #232135;
	border-image-slice: 1;
	border-width: 2px;
	font-size: calc(1vw + 0.5rem);
}

.nav ul li:hover,
.nav ul li:active {
	cursor: pointer;
	border-image-source: linear-gradient(to right, #6253e8, #1da1f2);
}

.menu-and-theme{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.2rem;
}

.theme-switch{
	margin-left: 3rem;
	background: transparent !important;
	transition: all 0.6s;
	cursor: pointer;
}

.theme-switch > svg{
	color: #fff;
	width: 1.2rem;
	height: 1.2rem;
	transition: all 1s;
}


.menu {
	display: none;
}

@media only screen and (max-width: 800px) {
	:root {
		--padding-width: 2.5rem;
	}

	.large {
		display: none;
	}

	.menu {
		display: block;
		z-index: 100;
		cursor: pointer;
	}

	.small {
		display: flex;
		position: fixed;
		min-height: 100%;
		justify-content: center !important;
		align-items: center !important;
		right: 0;
		top: 0;
		min-width: 100%;
		background-color: #232135;
		z-index: 16;
	}

	.light .small{
		background-color: #1da1f2;
		color: #fff;
	}

	.small > ul {
		flex-direction: column;
		padding: 0;
	}

	.small ul li {
		margin-left: 0;
		width: fit-content;
		text-align: center;
		font-size: calc(1vw + 1.6rem);
	}

	.theme-switch{
		margin-left: 0rem;
		background: transparent !important;
		transition: all 0.6s;
	}
}
