/* ===========================
   TOPBAR NAVIGATION
   =========================== */

.topbar
{
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	height: 3.2rem;
	background: rgb(245, 245, 245);
	font-family: "Carlito", sans-serif;
	color: rgb(12, 9, 10);
	display: flex;
	align-items: center;
	padding: 0 1rem;
	z-index: 1000;
}


.topbar .menu-toggle
{
	flex: 0 0 auto;
}

.menu-toggle
{
	/* HARD SIZE LOCK */
	width: 44px;
	height: 44px;
	min-width: 44px;
	min-height: 44px;
	max-width: 44px;
	max-height: 44px;

	/* CENTER THE ICON */
	display: flex;
	align-items: center;
	justify-content: center;

	/* VISUALS */
	background: none;
	border: none;
	color: rgb(12, 9, 10);
	font-family: "Carlito", sans-serif;
	line-height: 1;

	cursor: pointer;

	/* STACKING */
	position: relative;
	z-index: 1001;

	/* TAP SAFETY */
	padding: 0;
}


.brand-title
{
	color: rgb(12, 9, 10);
	font-family: "Carlito", sans-serif;
}

/* ===========================
   SIDE NAVIGATION DRAWER
   =========================== */

.sidenav
{
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;

	display: flex;
	flex-direction: column;

	padding-top: 1rem;
	padding-bottom: 1rem;

	z-index: 1000;
	transform: translateX(-100%);
	transition: .3s ease;

	background:
		radial-gradient(1200px 700px at 20% 10%, rgba(255, 255, 255, 0.10), transparent 55%),
		radial-gradient(900px 600px at 85% 30%, rgba(80, 200, 255, 0.12), transparent 55%),
		rgba(12, 14, 18, 0.92);
}

.sidenav.open
{
	transform: translateX(0);
}

.sidenav a
{
	display: block;
	padding: 12px 24px;
	font-family: "Carlito", sans-serif;
	color: rgba(254, 252, 255, 1);
	font-size: 1.5rem;
	font-weight: 500;
	text-decoration: none;
}

.sidenav a:hover
{
	background-color: rgba(87, 87, 87, 1);
	color: rgba(254, 252, 255, 1);
}

.sidenav a.active
{
	background-color: rgba(219, 249, 219, 1);
	color: rgba(44, 53, 57, 1);
}

.close-btn
{
	border: none;
}