:root { /* Setting variable for the stylesheet */
	--padding-width: 10rem;
}

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

header nav h1:hover,
header nav h1:active {
    background: linear-gradient(to right, rgb(147, 147, 147), #f4f4f4);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

header nav h1 a {
	font-size: calc(1vw + .5rem);
	cursor: pointer;
	font-weight: 600;
}

header nav ul {
	display: flex;
}

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

header nav ul li:hover,
header nav ul li:active {
	cursor: pointer;
	border-image-source: linear-gradient(to right, #1900ff, #004cff);
}

header nav a {
    text-decoration: none;
    /* color: #f4f4f4; */
    font-size: calc(1vw + 0.4rem);
	font-weight: 700;
}

a {
    text-decoration: none;
    color: #6e6e73;
    font-size: calc(1vw + 0.5rem);
}

header nav li:hover a,
header nav li:active a {
    background: linear-gradient(to right, rgb(147, 147, 147), #f4f4f4);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.menu {
	display: none;
}

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

	header nav h1 a {
		font-size: calc(1vw + 1rem);
		font-weight: 700;
	}

	.large {
		display: none;
	}

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

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

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

	.small ul li {
		margin-left: 0;
	}

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