
html, body {
	height: 100%;
}

/* 顶栏部分 */
header {
	position: fixed;
	top: 0;
	width: 100%;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 15px;
	gap: 10px;
	z-index: 114514;
}

header #logoImage {
	height: 25px;
	overflow: hidden;
}

header #navLinks {
	flex-shrink: 0;
	white-space: nowrap;
}

header .backdrop {
	position: absolute;
	inset: 0 0 -20px 0;
	background: #F9F9FBEE;
	--mask: linear-gradient(to bottom, black 0%, black calc(100% - 40px), #000000CC calc(100% - 30px), transparent 100%);
	mask-image: var(--mask);
	-webkit-mask-image: var(--mask);
	z-index: -1;
	backdrop-filter: blur(3px);
	pointer-events: none;
}


/* 公用 */
.flex {
	display: flex;
	align-items: center;
}

.spaceBetween {
	justify-content: space-between;
}


/* 主体部分 */
main {
	padding: 80px max(calc(50vw - 700px), 15px);
}

main .pageTitle {
	font-size: 1.7em;
	margin-bottom: 10px;
}

main .pageTitle > small {
	font-size: .6em;
	display: block;
}

main .switcher {
	overflow-x: scroll;
	white-space: nowrap;
}

main .switcher>div {
	position: relative;
	display: inline-block;
	padding: 5px 0;
	transition: color .3s, padding .3s;
	margin: 10px 10px 5px 0;
}

main .switcher>div.title {
	padding: 0;
	font-size: 1.1em;
	color: black!important;
	opacity: 1!important;
}

main .switcher>div.title::after {
	font-family: "remixicon";
	content: "\EA6D";
	opacity: .5;
}

main .switcher>div:not(.active):hover {
	color: var(--SimsvMainColor);
}

main .switcher>div:not(.active):active {
	color: var(--SimsvMainColor);
	opacity: .8;
}

main .switcher>div.active {
	color: var(--SimsvMainColor);
	padding: 5px 10px;
}

main .switcher>div:not(.title)::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -3px;
	height: 2px;
	width: 100%;
	background: var(--SimsvMainColor);
	border-radius: 4px;
	transition: transform .3s, opacity .3s;
	transform: scaleX(.5);
	opacity: 0;
}

main .switcher>div:not(.title).active::after {
	opacity: 1;
	transition: transform .3s, opacity .3s;
	transform: scaleX(1);
}

.msg {
	font-size: .9em;
	text-align: center;
	margin: 50px 0;
	opacity: .8;
}