/* body::before {
	content: "";
	position: fixed;
	inset: 0;
	background-image: url("../images/grain.png");
	opacity: 0.08;
	mix-blend-mode: overlay;
} */

/* Fonts */
@font-face { /* Hosting a custom font face */
	font-family: 'Abtera'; /* font family name to be used later in css */
	src: url('../fonts/Abtera-Regular.ttf') format('truetype'); /* specifies where the font is located */
	/* .ttf means truetype format */
	font-weight: 400; /* Using font weight 400 automatically loads Abtera-Regular */
	font-style: normal; /* font style (italic, bold, etc) */
}

@font-face {
	font-family: 'Abtera';
	src: url('../fonts/Abtera-Medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: 'Abtera';
	src: url('../fonts/Abtera-SemiBold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
}

@font-face {
	font-family: 'Abtera';
	src: url('../fonts/Abtera-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
}

:root {
	--sidebar-width: 140px; /* Defined a CSS variable for sidebar width to help with multi-platform support*/
}

body {
	margin: 0; /* Adjust default margin */
	min-height: 100vh; /* ensures body has full viewport height */
	background: #000000; /* background color */
	font-family: 'Abtera', sans-serif; /* Use the custom global font */
	/* background: linear-gradient(to bottom, #9bb0dd 0%, #e2e8ff 30%, #ecebff 80%, #ead2dd 100%); */
}

/* Header */
.header {
	position: fixed; /* fixes the header at the top of the viewport when scrolling */
	top: 0; /* positions the header at the top */
	left: 0; /* positions the header at the left edge */
	width: 100%; /* header spans full width of the viewport */
	height: 64px; /* height is jsut 64 px */
	display: flex; /* use flexbox for layout in header */
	align-items: center; /* */
	justify-content: space-between;
	background: #000000;
	border-bottom: 1px solid #ffffff;
	z-index: 1000;
	padding: 0 20px;
}

.left-section {
	display: flex;
	align-items: center;
	gap: 16px;
}

.divider {
	width: 2px;
	border-radius: 999px;
	height: 32px;
	background: white;
}

.menu-button {
	height: 64px;
	padding: 0 12px;
	display: flex;
	align-items: center;
	cursor: pointer;
}

.arrow {
	width: 18px;
	height: 18px;
	border-right: 3px solid #ffffff;
	border-bottom: 3px solid #ffffff;
	transform: rotate(-45deg);
	border-radius: 3px;
	transition: transform 0.4s ease;
}

.arrow.flipped {
	/* transform: scaleX(-1) rotate(-45deg); */
	transform: rotate(135deg);
}

.profile-pic {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 2px solid #ffffff;
	margin-right: 2rem;
	/* margin: 7px 16px; */
	object-fit: cover;
	cursor: pointer;
	transition: border-color 0.3s ease, transform 0.3s ease;
}

.profile-pic:hover {
	border-color: #d00000;
	transform: scale(1.05);
}

/* Main Content*/
.main-content {
	margin-left: 0;
	margin-top: 64px;
	transition: margin-left 0.4s ease;
}

.main-content.shifted {
	margin-left: var(--sidebar-width);
}

/* Hero css */
.hero {
	padding: 2rem;
	/* font-family: 'Space Grotesk', "Helvetica Neue", sans-serif; */
	letter-spacing: -0.05em;
	color: #ffffff;
}

.name {
	margin: 0;
	font-size: clamp(36px, 8vw, 80px);
	font-weight: 600;
	text-align: left;
}

.title-carousel {
	height: 35px;
	overflow: hidden;
	margin-top: -5px;
}

.title-track span {
	height: 35px;
	font-size: clamp(16px, 3vw, 30px);
	line-height: 35px;
	color: #d00000;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

/* Side navbar css */
.side-nav {
	position: fixed;
	top: 64px;
	width: var(--sidebar-width);
	left: calc(-1 * var(--sidebar-width) - 2px);
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 60px;
	transition: left 0.4s ease;
	background: #000000;
	z-index: 999;
	border-right: 2px solid #d00000
}

.side-nav a {
	color: white;
	text-decoration: none;
	text-align: left;
	font-size: 20px;
	padding-left: 16px;
	padding-right: 16px;
	font-family: 'Space Grotesk', "Helvetica Neue", sans-serif;
}

.side-nav.active {
	left: 0;
}