moeix-home/src/style.css

:root {
	--background-color: #fff;
	--font-color: #000;
	--font-color-lighter: rgb(87, 89, 88);
	--font-size-main: 3.045rem;
	--font-size-description: 1.245rem;
	--lineheight-description: 1.845rem;
	--box-color: #f2f2f2;
	--working-color: #137333;
	--working-color-background: #e6f4ea;
	--error-color-background: #fce8e6;
	--error-color: #c5221f;
	--working-with-error-color: #b05a00;
	--working-with-error-color-background: #fef7e0;
	--linear-start-color: #f37335;
	--linear-end-color: #ff4200fc;
	--icon-size: 48px;
}

header > h1,
h2 {
	background: linear-gradient(
		90deg,
		var(--linear-start-color),
		var(--linear-end-color)
	);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-family: "Red Hat Display", Inter, Noto Sans SC, sans-serif;
}

p {
	font-family: Inter, Noto Sans SC, sans-serif;
	line-height: 140%;
}

body {
	margin: 2rem 2rem;
	font-family: Inter, Noto Sans SC, sans-serif;
	color: var(--font-color);
	background-color: var(--background-color);
}

a {
	text-decoration: none;
	color: #1967d2;
}

header {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: flex-start;
	align-content: stretch;
}

header description {
	font-family: "Red Hat Display", Inter, Noto Sans SC, sans-serif;
	font-size: var(--font-size-description);
	line-height: var(--lineheight-description);
	color: var(--font-color-lighter);
	margin-left: 5px;
}

header div {
	line-height: var(--lineheight-description);
	margin-top: 1rem;
	flex-basis: 100%;
}

header h1 {
	font-size: var(--font-size-main);
	line-height: var(--font-size-main);
	margin: 0;
}

code {
	font-family: Fira Mono, monospace;
}

none {
	display: none;
}

icon {
	font-size: var(--icon-size) !important;
}

footer {
	color: var(--font-color-lighter);
	font-size: calc(var(--font-size-description) - 0.2rem);
}

footer > text {
	margin-top: 1rem;
	font-size: calc(var(--font-size-description) - 0.4rem);
}

footer > * {
	display: block;
}

.contents {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}

.contents .group {
	margin: 1rem 0;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	min-width: 0;
}

.contents .content {
	display: block;
	min-width: 0;
}

.contents .content h2 {
	font-weight: 500;
	margin-block-start: 0.5rem !important;
	margin-block-end: 0.5rem !important;
}

.contents .content h2.zh-cn {
	font-weight: 900 !important;
}

code {
	padding: 0.15em 0.3em;
	margin: 0;
	font-size: 85%;
	background-color: var(--box-color);
	border-radius: 3px;
	line-height: 200%;
}

.group#pops {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
}

.group#pops .pop[status="working"] {
	background-color: var(--working-color-background);
}

.group.pops .pop[status="working-with-error"] {
	background-color: var(--working-with-error-color-background);
}

.group.pops .pop[status="error"] {
	background-color: var(--error-color-background);
}

.error-text {
	color: var(--error-color);
}
.working-with-error-text {
	color: var(--working-with-error-color);
}
.working-text {
	color: var(--working-color);
}

.group#pops .pop {
	background-color: var(--box-color);
	padding: 2rem;
	min-height: 3rem;
	min-width: 14rem;
	border-radius: 9px;
	flex-grow: 1;
	margin-top: 1rem;
	margin-right: 1rem;
	flex-basis: 2rem;
}

.pops name {
	font-size: calc(var(--font-size-description) + 0.1rem);
	vertical-align: middle;
	font-family: "Red Hat Display", Inter, Noto Sans SC, sans-serif;
}

.pops asn {
	font-size: calc(var(--font-size-description) - 0.2rem);
	color: var(--font-color-lighter);
	vertical-align: middle;
	display: inherit;
	font-family: "Red Hat Display", Inter, Noto Sans SC, sans-serif;
}

.pops > status > i {
	vertical-align: middle;
}

.pops ipv4,
.pops ipv6,
.pops div {
	font-size: calc(var(--font-size-description) - 0.25rem);
	font-family: Inter, Noto Sans SC, sans-serif;
}

@media screen and (max-width: 480px) {
	body {
		margin: 6rem 2rem;
	}
	:root {
		--font-size-main: 3rem;
		--font-size-description: 1.045rem;
	}

	footer {
		font-size: calc(var(--font-size-description) - 0.2rem);
	}

	footer > text {
		font-size: calc(var(--font-size-description) - 0.4rem);
	}

	header description {
		width: 100%;
		order: -1;
	}
}

@media screen and (max-width: 1126px) {
	.contents .group {
		justify-content: flex-start;
		flex-direction: column;
	}
	.group#pops {
		width: 100%;
	}
}

@media screen and (max-width: 768px) {
	.contents .group {
		justify-content: flex-start;
		flex-direction: column;
	}
	.contents {
		justify-content: flex-start;
		flex-direction: column;
	}
	.group#pops {
		width: 100%;
	}
	.pop > * {
		overflow-x: auto;
		overflow-y: hidden;
		white-space: nowrap;
	}
}

@media screen and (min-width: 1126px) {
	.group#picture {
		width: 100%;
	}
	.contents .group#text {
		flex-direction: column;
	}
	.contents {
		justify-content: flex-start;
		flex-direction: column;
	}
}

@media screen and (min-width: 768px) {
	body {
		margin: 8% 10%;
	}

	header > * {
		display: inline-block;
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--font-color: #e8eaed;
		--font-color-lighter: #9aa0a6;
		--background-color: #121212;
		--box-color: rgb(40 40 40 / 73%);
		--working-color-background: rgba(129, 201, 149, 0.24);
		--error-color-background: rgba(242, 139, 130, 0.24);
		--working-with-error-color-background: rgba(253, 214, 99, 0.24);
		--working-color: #81c995;
		--error-color: #f28b82;
		--working-with-error-color: #fdd663;
		--linear-start-color: #0c8cca;
		--linear-end-color: #00bdff;
	}
	.contents .content#path img {
		filter: invert(93%);
	}
}

.content#prefix ul {
	padding: unset;
}

.content#prefix ul > li {
	list-style-type: "";
}

.pop > * {
	display: block;
}

::-webkit-scrollbar {
	width: 0px;
}

ul {
	padding-inline: 20px;
}

.content.loc > ul > li {
	margin: 10px 0;
}

.content.loc > ul > li > ul > li {
	margin: 5px 0;
}