:root {--layout:desktop}
#top {
	height: 3.5em;
	grid-template-columns: auto auto;
	justify-content: center;
	gap: 1em;
}
#sign {
	grid-template-columns: 3.5em auto;
	gap: 0.5em;
}
#logo {
	place-self: center;
	width: 3em;
	height: 3em;
}
#site {
	place-self: center;
	color: var(--background-color);
	font-weight: bold;
	font-size: 1.5rem;
}
#mobile-top {display: none}
#navigation {grid-template-columns: repeat(3, 10em)}
.navigation {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	background-color: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	font-size: 1rem;
}
.navigation:hover {background-color: var(--hover-color)}
.navigation:active {background-color: var(--active-color)}
.navigation::before {
	transition: height 0.1s ease-in;
	content:"";
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 0%;
	background-color: var(--background-color);
}
.navigation.current::before {height: 100%}
.navigation::after {
	content:"";
	display: block;
	position: absolute;
	z-index: 2;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 0%;
	height: 0.25em;
	transition: width 0.1s ease-in;
	background-color: var(--interface-color);
	border-radius: 0.125em;
}
.navigation:hover::after {width: 25%}
.navigation.current::after {
	width: 80%;
	background-color: var(--focus-color);
}
.navigation.failed::after {background-color: #FF0000}
.navigation.loading::after {animation: navigation-loading 1s linear 0s infinite forwards}
@keyframes navigation-loading {
	0%{width:0}
	50%{opacity:1}
	100%{
		width: 80%;
		opacity: 0;
	}
}
.navigation>span {
	position: relative;
	z-index: 3;
}