:root {
	font-size: 16px;
	font-family: 'Righteous', cursive;
	--text-primary: #6f2a5b;
	--text-secondary: #ffffcc;
	--bg-primary: #120d0f;
	--bg-secondary: #2d1b32;
	--transition-speed: 250ms;
}

body {
	color: white;
	background-color: #1f141a;
	margin: 0;
	padding: 0;
}

body::-webkit-scrollbar {
	width: 0.40rem;
}

body::-webkit-scrollbar-track {
	background: #120d0f;
}

body::-webkit-scrollbar-thumb {
	background: #2d1b32;
}


main {
	margin-left: 1rem;
	padding: 1rem;
	font-size:25px;
	color: var(--text-secondary);
}

.navbar {
	width: 5rem;
	height: 100vh;
	position: fixed;
	background-color: var(--bg-primary);
	transition: width 250ms ease;
}

.navbar-nav {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.nav-item {
	width: 100%;
}

.nav-link {
	display: flex;
	align-items: center;
	height: 5rem;
	color: var(--text-primary);
	text-decoration: none;
	filter: grayscale(90%) opacity(1);
	transition: transform var(--transition-speed);
}

.nav-link:hover {
	filter: grayscale(0%) opacity(1);
	background: var(--bg-secondary);
}

.link-text {
	display: none;
	margin-left: 1rem;
}

.nav-link svg {
	min-width: 2rem;
	margin: 0 1.5rem;
}

.navbar:hover {
	width: 16rem;
}

.navbar:hover .link-text {
	display: block;
}

.fa-primary {
	color: #4a1c3d;
}

.fa-secondary {
	color: #6f2a5b;
}

.fa-primary,
.fa-secondary {
	transition: transform var(--transition-speed);
}

.logo {
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 1rem;
	text-align: center;
	color: var(--text-primary);
	background: var(--bg-primary);
	font-size: 1.5rem;
	text-transform: uppercase;
	letter-spacing: 0.3ch;
	width: 100%;
}

.logo svg {
	transform: rotate(0deg);
	transition: transform var(--transition-speed);
}

.navbar:hover .logo svg {
	transform: rotate(-180deg);
}