@charset "utf-8";
/*topmenu*/
#topmenu {
	display: block;
	color: var(--topmenu-foreground);
	background-color: var(--topmenu-background);
	border-bottom: 1px solid var(--topmenu-border);
	text-align: left;
	margin-bottom: 0;
	font-size: 0;
	position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}
#topmenu::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 1px;
	left: 0;
	border-bottom: 1px solid var(--background);
}
#topmenu a {
	display: inline-block;
	color: var(--topmenu-foreground);
	background-color: var(--topmenu-background);
	border-width: 0 1px 0 0;
	border-style: solid;
	border-color: var(--topmenu-inner-border);
	padding: 0 1rem;
	margin: 0;
	text-decoration: none;
	font-size: 0.9rem;
	line-height: 2.5rem;
}
/*making room for fixed position topmenu above content*/
#content {
	/*2.5rem line height + 1px border + 1rem spacing*/
	padding-top: calc(2.5rem + 1px + 1rem);
	min-height: calc(100vh - 2.5rem - 1px);
}
#topmenu a:hover {
	color: var(--topmenu-background);
	background-color: var(--topmenu-foreground);
}
#topmenu #top-thalassa {
	font-size: 0;
	padding: 0;
	width: 2.5rem;
	height: 2.5rem;
	vertical-align: top;
	background-color: var(--topmenu-foreground);
	border-right-color: var(--topmenu-background);
	position: relative;
}
#topmenu #top-thalassa::after {
	mask-image: url(top_thalassa.svg);
	-webkit-mask-image: url(top_thalassa.svg);
	position: absolute;
	content: "";
	top: 20%;
	left: 20%;
	width: 60%;
	height: 60%;
	mask-type: luminance;
	mask-size: contain;
	-webkit-mask-type: luminance;
	-webkit-mask-size: contain;
	background-color: var(--topmenu-background);
}

@media only screen and (max-width: 640px)
{
	/*topmenu icons*/
	#topmenu {
		font-size: 0;
	}
	#topmenu a,
	#topmenu #top-thalassa {
		font-size: 0;
		padding: 0;
		width: 48px;
		height: 48px;
		position: relative;
	}
	#topmenu a::after {
		position: absolute;
		content: "";
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		mask-type: luminance;
		mask-size: contain;
		-webkit-mask-type: luminance;
		-webkit-mask-size: contain;
		background-color: var(--topmenu-foreground);
	}
	#topmenu a:hover::after {
		background-color: var(--topmenu-background);
	}
	/*making room for fixed position topmenu above content*/
	#content {
		/*48px button height + 1px border + 1rem spacing*/
		padding-top: calc(48px + 1px + 1rem);
		min-height: calc(100vh - 48px - 1px);
	}
	/*topmenu icon images*/
	#top-home::after {
		mask-image: url(top_home.svg);
		-webkit-mask-image: url(top_home.svg);
	}
	#top-search::after {
		mask-image: url(top_search.svg);
		-webkit-mask-image: url(top_search.svg);
	}
	#top-store-files::after {
		mask-image: url(top_upload.svg);
		-webkit-mask-image: url(top_upload.svg);
	}
	#top-admin::after {
		mask-image: url(top_admin.svg);
		-webkit-mask-image: url(top_admin.svg);
	}
	#top-sign-in::after {
		mask-image: url(top_sign_in.svg);
		-webkit-mask-image: url(top_sign_in.svg);
	}
	#top-sign-out::after {
		mask-image: url(top_sign_out.svg);
		-webkit-mask-image: url(top_sign_out.svg);
	}
	/*built in custom topmenu icons*/
	#top-newsletter::after {
		mask-image: url(top_newsletter.svg);
		-webkit-mask-image: url(top_newsletter.svg);
	}
	#top-help::after {
		mask-image: url(top_help.svg);
		-webkit-mask-image: url(top_help.svg);
	}
	#top-patreon::after {
		mask-image: url(top_patreon.svg);
		-webkit-mask-image: url(top_patreon.svg);
	}
}
/*extra narrow for topmenu*/
/*you may need to make this breakpoint happen wider*/
/*if you added a lot of custom topmenu items*/
@media only screen and (max-width: 480px)
{
	#topmenu a,
	#topmenu #top-thalassa {
		width: 36px;
		height: 36px;
	}
	/*make room for topmenu*/
	#content {
		padding-top: calc(36px + 1px + 1rem);
	}
}