nav {
	position: relative;
	direction: ltr;

	/*margin: 20px 0 46px 0;*/
	margin: 0 0 25px 0;
	padding: 0;

	width: 100%;
	height: 54px;

	border: 2px solid var(--background-color);
	white-space: nowrap;
	box-sizing: border-box;
}

#innernav {
	position: absolute;
	display: flex;

	margin: 0;
	padding: 0;

	width: 100%;
	height: 100%;

	background-color: var(--color-darkest-semi);
}

/*#innernav a *[class^="icon-"] {
	margin-right: 0.25em;
}*/

#innernav a, #innernav a:visited, #innernav a:hover {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;

	margin: 0;
	padding: 0;

	flex-grow: 1;
	height: 100%;
	width: 25%;

	box-sizing: border-box;

	/*line-height: 50px;*/

	background-color: rgba(255, 255, 255, 0.0);
	text-decoration: none;
	font-weight: bold;
	text-align: center;
	color: white;
	font-size: 18px;

	overflow: hidden;

	user-select: none;

	/*-webkit-transition: all 0.50s;
	transition: all 0.50s;*/
	transition: font-size  0.50s,
				background 0.50s,
				color      0.50s;

	background: linear-gradient(
		rgba(255,255,255,0.3),
		rgba(255,255,255,0.1),
		rgba(255,255,255,0.1),
		rgba(255,255,255,0.3)
	);
}

#innernav a:hover {
	font-size: 20px;
	text-decoration: none;
	-webkit-transition: all 0.50s;
	transition: all 0.50s;

	background: linear-gradient(
		rgba(255,255,255,0.5),
		rgba(255,255,255,0.2),
		rgba(255,255,255,0.2),
		rgba(255,255,255,0.5)
	);
}

#innernav a:active {
	background-color: rgba(255, 255, 255, 0.8);
	letter-spacing: 4px;
	text-decoration: none;
	-webkit-transition: all 0.0s;
	transition: all 0.0s;
}

#innernav a > span:not(.notification_circle):not(.gaming_notifications) {
	max-width: CALC(100% - 2.5em);
	display: inline-block;
	overflow: hidden;
	text-overflow: ellipsis;
}

/*.nav_new {
	position: absolute;
	top: 0;
	left: -100px; # Must be changed to 0px for entrance

	width: 70px;
	height: 50px;
	padding: 35px 0 5px 0;
	box-sizing: border-box;

	background-color: white;

	color: black;
	font-size: 16px;
	line-height: 10px;
	font-weight: bold;
	text-align: center;

	transform: rotate(-45deg);
	transform-origin: bottom left;

	transition: left 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}*/

#mobile_nav_btn {
	display: none;
}

#mobile_nav_btn_close {
	display: none;
}

#mobile_notification_count, #mobile_friend_request_count, #mobile_admin_count {
	/*margin-left: 0.25em;*/
	line-height: 1.5em;
}


#bottomnav {
	display: flex;
	position: relative;

	top: 100%;
	left: -2px;
	right: -2px;

	height: 26px;
	width: calc(100% + 4px);

	box-sizing: border-box;
}

#bottomnav > div {
	display: flex;
	white-space: break-spaces;

	margin: 0;
	height: 100%;

	box-sizing: border-box;
}

#bottomnav_left {
	display: flex;
	justify-content: space-between;
	align-items: center;

	width: 33%;
	padding: 0 0 0 15px;
	background-color: var(--background-color);
	border-radius: 0 0 0 10px;
}
#change_language_icon {
	font-weight: bold;
	padding: 0 0.22em 0 0.2em;
	font-size: 0.85em;
}
#bottomnav_brightness {
	display: flex;
	padding: 0;
}
#bottomnav_brightness > div {
	padding: 0.25em;
	border-radius: 100%;
}
#bottomnav_brightness > div:hover {
	background-color: var(--color-base);
	color: var(--background-color);
}
#bottomnav_brightness > div.selected {
	background-color: var(--text-color);
	color: var(--background-color);
}

#bottomnav_middle {
	justify-content: space-between;
	width: 34%;
	position: relative;
	border-top: 2px solid var(--background-color);
}

#bottomnav_middle::before, #bottomnav_middle::after {
	content: ' ';
	display: block;
	position: absolute;
	top: -2px;

	border-width: 13px;
	border-style: solid;
	width: 26px;
	height: 26px;

	box-sizing: border-box;
}

#bottomnav_middle::before {
	border-color: var(--background-color) transparent transparent var(--background-color);
	left: 0;
}

#bottomnav_middle::after {
	border-color: var(--background-color) var(--background-color) transparent transparent;
	right: 0;
}

#bottomnav_user {
	position: relative;

	width: 33%;
	text-align: right;
	padding: 0 15px 0 0;
	background-color: var(--background-color);
	border-radius: 0 0 10px 0;
	/*justify-content: flex-end;*/

	height: unset;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-end;
	z-index: 15;

	overflow-y: hidden;
}
#bottomnav_user:hover {
	height: fit-content;
	padding-bottom: 0.25em;
	border-bottom-left-radius: 10px;
	overflow-y: visible;
	border-bottom: 1px solid var(--text-color);
}

#bottomnav_user > div {
	height: 1.6em;
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

#bottomnav_user > div > a > span:first-child::after {
	content: '  ';
}

#bottomnav_user_pfp {
	height: 1.5em;
	width: 1.5em;
	margin-right: 0.25em;

    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

/* April fools 2025 present counter */
.present_counter {
	display: flex;
	gap: 0.25em;
}
#bottomnav_user .present_counter {
	position: absolute;
	left: 0;
	top: 0;
	background-color: var(--background-color);
	padding: 0 0.5em;
}

/* ---------- Mobile phone CSS ---------- */

@media only screen and (max-width: 916px) {

	nav {
		/*margin-top: 10px;*/
		position: relative;
		width: 100%;
		border-top: 2px solid var(--background-color);
		border-bottom: 2px solid var(--background-color);
		/*white-space: initial;*/
		/*overflow: initial;*/
	}

	#innernav {

		/*width: calc(100% - 2px);*/
		width: 100%;
		height: 100%;

	}

	#innernav a {
		border: 1px solid var(--background-color);
	}

	#innernav a, #innernav a:visited, #innernav a:hover {
		/*height: 50px;*/
		text-decoration: none;
		font-weight: bold;
		text-align: center;
		color: white;
	}

	#innernav a:hover {
		text-decoration: none;
		font-size: 20px;
	}

	#innernav a:active {
		letter-spacing: 4px;
		text-decoration: none;
	}

	.nav_new {
		font-size: 13.5px;
	}

	#bottomnav_left, #bottomnav_user {
		width: 280px;
		flex-shrink: 0;
	}

	#bottomnav_middle {
		/*width: calc(100% - 280px - 280px);*/
		flex-grow: 1;
	}

}

/* Styles for bigger screens ONLY */
@media only screen and (min-width: 590px) {

	.nav_mobile, #mobile_nav_user, #mobile_nav_present_count, #mobile_nav_btn_close {
		display: none !important;
	}

	#innernav a:not(:first-child) {
		border-left: 2px solid var(--background-color);
	}

}

@media only screen and (max-width: 590px) {

	nav {
		position: fixed;
		top: 0;
		right: -110vw;

		width: 100vw;
		height: 100vh;

		margin: 0;
		padding: 0;
		box-sizing: border-box;

		border: none;

		background-image: var(--theme-background-overlay-image), var(--theme-background-overlay-image2), var(--theme-background-image);
		background-color: var(--color-darkest);

		transition: right 0.5s;

		overflow-y: auto;
		overscroll-behavior: contain; /* Avoids page body scroll */

		z-index: 200;
	}

	#mobile_nav_btn {
		position: fixed;
		top: 12px;
		right: 12px;
		display: inline-block;
		text-align: center;
		line-height: 30px;
		border: 2px solid white;
		border-radius: 100%;
		background-color: rgba(0,0,0,0.5);
		width: 36px;
		height: 36px;
		box-sizing: border-box;
		color:white;
		font-size: 20px;
		z-index: 90;

		transition: right 0.5s;
	}

	#innernav {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 0.3em;

		height: auto;
		box-sizing: border-box;

		padding: 0.3em;
		padding-bottom: 6em;
		background: none;

		z-index: 202;
		/*z-index: 2147483647;*/
	}

	#innernav a, #innernav a:visited, #innernav a:hover {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-shrink: 0;
		flex-grow: 1;

		width: unset;
		height: 3rem;
		box-sizing: border-box;

		color: var(--text-color);
		background: var(--background-color); /*#EFEFEF*/

		border: 2px outset gray;
		border-radius: 10px;
	}

	#innernav a:hover {
		border-color: var(--color-dark);
		background-color: var(--color-base);
		color: white;
	}

	.nav_new {
		transform: none;
		height: 100%;
		font-size: inherit;
		padding: 7px 0 !important;
		line-height: 35px;
		border-right: inherit;
	}

	#bottomnav {
		display: none;
	}

	/*.nav_mobile {
		display: inline-block !important;
	}*/

	/*#mobile_nav_btn_close {
		display: inline-block;
	}*/

	#mobile_nav_user, #mobile_nav_present_count {
		font-weight: bold;
		color: white;
		margin-top: 20px;
		/*margin-bottom: 4px;*/
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		white-space: break-spaces;
		filter: drop-shadow(0 0 2px black) drop-shadow(0 0 2px black);
	}
	#mobile_nav_user_pfp {
		height: 30px;
		width: 30px;
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
	}

	/* April fools 2025 present counter */
	#mobile_nav_present_count {
		font-weight: normal;
		margin: 0;
	}

}

@media (prefers-reduced-motion: reduce) {

	nav, #innernav a, #mobile_nav_btn {
		transition: none !important;
	}

}