html{
	
	--acct-bar-height:3.25rem;
	--acct-bar-padding:.5rem;
	--acct-logged-out-pfp:url('/assets/icons/fox2.png');
	--acct-pfp-bg-size:100% auto;
	--acct-pfp-bg-pos:50%;
	
	--acct-bar-background:color-mix(in srgb, white, var(--user-accent-color));
	--acct-bar-pfp-border-color:var(--user-accent-color);
	
	--acct-icon-logged-out-dark-mode:0;
	--acct-icon-logged-out-hover-dark-mode:0;
	
	--site-logo-image:url("/assets/sitelogo2.png");
	--nav-bg-color:color-mix(in srgb, var(--user-accent-color), white);
	--nav-bg-color:color-mix(in srgb, var(--user-accent-color), black);

}

html[data-darkmode="1"]{
	--acct-icon-logged-out-dark-mode:1;
	--acct-icon-logged-out-hover-dark-mode:0;	
	--acct-bar-background:color-mix(in srgb, black, var(--user-accent-color));
	--site-logo-image:url("/assets/sitelogo1.png");
	--dark-text-color:white;
	--light-text-color:#333;
	--nav-bg-color:color-mix(in srgb, var(--user-accent-color), white);
}

#account-bar{
	width:100vw;
	height:var(--acct-bar-height);
	display:flex;
	align-items:center;
	background:var(--acct-bar-background);
	justify-content:flex-end;
	padding:var(--acct-bar-padding);
	padding-top:calc(var(--acct-bar-padding) * 1);
	padding-right:calc(var(--acct-bar-padding) * 2);
	box-sizing:border-box;
	border-bottom:0.063rem solid var(--user-accent-color);
	box-shadow: 0 0 calc(var(--acct-bar-height) / 2) 0 var(--user-accent-color);
}
#pfp{
	aspect-ratio:1/1;
	height:100%;
	border-radius:100%;
	border:0.063rem solid transparent;
}

#pfp>div{
	background-size:var(--acct-pfp-bg-size);
	background-position:var(--acct-pfp-bg-pos);
	background-repeat:no-repeat;
	width:100%;
	height:100%;
	border-radius:100%;
}
#pfp:hover,
#pfp.active{
	filter: drop-shadow(0 0 calc(var(--acct-bar-padding) / 2) var(--acct-bar-pfp-border-color));
	border: 0.063rem solid var(--acct-bar-pfp-border-color);
}
#pfp.logged-out:hover,
#pfp.logged-out.active{
	background-color:color-mix(in srgb, white, var(--user-accent-color) 40%);
}
#pfp.logged-out:active{
	filter:drop-shadow(0 0 calc(var(--acct-bar-padding) / 2) var(--acct-bar-pfp-border-color)) brightness(0.85) contrast(1.2);
}
#pfp.logged-out>div{
	--acct-pfp-bg-size:80% auto;
	background-image:var(--acct-logged-out-pfp);
	
	filter:invert(var(--acct-icon-logged-out-dark-mode));
}

#pfp.default-pfp>div{
	--acct-pfp-bg-size:100% auto;
}

#pfp.logged-out:hover>div{
	mix-blend-mode:soft-light;
	filter:invert(var(--acct-icon-logged-out-hover-dark-mode));
}

#site-logo{
	height:100%;
	aspect-ratio:600 / 240;
	width:auto;
	background:var(--site-logo-image);
	background-size:auto 100%;
	background-position:50%;
	background-repeat:no-repeat;
	margin-right:auto;
	
}

#account-panel{
	position:absolute;
	right:0;
	top:100%;
	padding:1rem 1.5rem;
	border:0.063rem outset var(--user-accent-color);
	border-top:none;
	border-right:none;
	border-radius:0 0 0 0.25rem;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	box-sizing:border-box;
	background:var(--acct-bar-background);
	grid-gap:1rem;
}

#account-panel>div.login-panel{
	display:grid;
	grid-template-columns:repeat(1,auto);
	grid-gap:.75em 0.25rem;
}

button.log-in{
	height:1.75em;
	font-size:1rem;
	width:10em;
}
button.sign-up{
	height:1.75em;
	width:10em;
	font-size:1rem;
	background:var(--user-accent-color);
	border:none;
	border-radius:.75em;
}

#account-panel .color-panel{
	display:grid;
	grid-template-columns:repeat(auto-fit,1rem);
	grid-gap:.25rem;
	flex-grow:1;
}
#account-panel .color-panel div{
	width:1rem;
	height:1rem;
	box-sizing:border-box;
	border:0.063rem solid #333;
}

#account-panel .color-panel div:nth-child(1){
	background:var(--accent-color-0);
}
#account-panel .color-panel div:nth-child(2){
	background:var(--accent-color-1);
}
#account-panel .color-panel div:nth-child(3){
	background:var(--accent-color-2);
}
#account-panel .color-panel div:nth-child(4){
	background:var(--accent-color-3);
}
#account-panel .color-panel div:nth-child(5){
	background:var(--accent-color-4);
}
#account-panel .color-panel div:nth-child(6){
	background:var(--accent-color-5);
}
#account-panel .color-panel div:nth-child(7){
	background:var(--accent-color-6);
}
#account-panel .color-panel div:nth-child(8){
	background:var(--accent-color-7);
}
#account-panel .color-panel div:nth-child(9){
	background:var(--accent-color-8);
}
#account-panel .color-panel div:nth-child(10){
	background:var(--accent-color-9);
}
#account-panel .color-panel div:nth-child(11){
	background:var(--accent-color-10);
}

#account-panel .light-dark-mode-toggle{
	width:2rem;
	height:2rem;
	/*background-size:100% auto;
	background-position:50%;
	background-repeat:no-repeat;
	background-image:url('/assets/icons/darkmode.svg')*/
	background:var(--text-color-panel-header);
	-webkit-mask-image: url('/assets/icons/lightmode.svg');
	mask-image: url('/assets/icons/lightmode.svg');
	mask-size:100%;

}

#account-panel>.display-opts{
	display:flex; 
	width:100%;
}

html[data-darkmode="1"] #account-panel .light-dark-mode-toggle{
		-webkit-mask-image: url('/assets/icons/darkmode.svg');
		mask-image: url('/assets/icons/darkmode.svg');
}

nav{
	display:flex;
	justify-content:center;
	grid-gap:0px;
	background-color:var(--nav-bg-color);
	color:var(--light-text-color);
	position:relative;
}


nav .nav-item{
	padding:.25rem .5rem;
	user-select:none;
}

nav .nav-item:hover{
	background:var(--acct-bar-background);
	color:var(--text-color-panel-header);
}

nav .nav-item.force-active{
	background:var(--acct-bar-background);
	color:var(--text-color-panel-header);
}

nav .nav-dropdown{
	width: 7.5rem;
	position: absolute;
	z-index: 1000000;
	background: var(--nav-bg-color);
	top: 100%;
	left: -18.75rem;
	border-top:0.063rem inset var(--acct-bar-background);
	box-shadow: inset 0 0.313rem 0.313rem -0.313rem #333333aa,
			0 0.313rem .313rem -.313rem #333;
	display:flex;
	flex-direction:column;
}


nav .nav-dropdown div{
	width:100%;
	padding:.25rem .5rem;
	box-sizing:border-box;
	user-select:none;
}

nav .nav-dropdown div:hover{
	background:var(--acct-bar-background);
	color:var(--text-color-panel-header);
}

#hamburger-menu > span{
	font-size:1.25rem;
}
#hamburger-menu{
	display:none;
}

#hamburger-menu,#mobile-nav .mobile-nav-close{
	font-size:1.5rem;
	padding:.075em;
	border-radius:0.15em;
}

#mobile-nav .mobile-nav-close{
	color:var(--dark-text-color);
	position:absolute;
	right:.25em;
	top:.125em;
}

#mobile-nav .mobile-nav-close>span{
	font-size:1.75rem
}

#mobile-nav .top-panel{
	display:flex;
	justify-content:center;
	padding-top:.5rem;
	margin-bottom:.5rem;
}
#mobile-nav .top-panel img{
	width:40%;
}

#hamburger-menu:hover,#mobile-nav .mobile-nav-close:hover
#hamburger-menu:active,#mobile-nav .mobile-nav-close:active{
	background:var(--acct-bar-background);
	color:var(--text-color-panel-header);
	
}

#mobile-nav{
	display:flex;
	flex-direction:column;
	position:absolute;
	left:-100vw;
	width:100vw;
	top:0;
	height:100vh;
	background:var(--content-bg);
	box-sizing:border-box;
	padding:0.125em .5em;
	grid-gap:.25em;
}
#mobile-nav.has-transition{
	transition:left .8s;
}

#mobile-nav.mobile-nav-open{
	left:0;
}

#mobile-nav .mobile-nav-item{
	padding:.125em .25em;
	font-size:1.5rem;
}

#mobile-nav .mobile-nav-item:nth-child(2n){
	background:color-mix(in srgb, gray, var(--content-bg));
}
#mobile-nav .mobile-nav-item:nth-child(2n+1){
	background:color-mix(in srgb, gray 35%, var(--content-bg));
}

#mobile-nav .mobile-nav-item[data-indent="1"]{
	padding-left:0.5em;
}

#mobile-nav .mobile-nav-item[data-indent="2"]{
	padding-left:0.5em;
}

#account-panel .account-panel-menu{
	display:flex;
	flex-direction:column;
	width:100%;
	justify-content:center;
	align-items:center;
	grid-gap:.125em;
}
#account-panel .account-panel-menu>div{
	user-select:none;
	color:var(--text-color-panel-header);
}
#account-panel .account-panel-menu>div:hover{
	color:color-mix(in srgb,var(--user-accent-color),var(--text-color-panel-header));
}

@media (max-aspect-ratio:7/10) {	
	nav > *{
		display:none;
	}
	nav{
		min-height:1rem;
		justify-content:flex-start;
	}
	nav > #hamburger-menu{
		display:block;
		margin:.065em .33em;
	}
}