: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;
}

h2,
h1 {
	background: linear-gradient(
		90deg,
		var(--linear-start-color),
		var(--linear-end-color)
	);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

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

body {
	margin: 2rem 2rem;
	font-family: "Google Sans", Roboto, 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;
}

app h1 {
	font-family: "Google Sans", Roboto, Noto Sans SC, sans-serif;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: normal;
}

header description {
	font-family: "Google Sans", Roboto, 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);
}

header > div {
	display: inline-flex;
	align-items: flex-start;
	flex-direction: column;
	justify-content: center;
}

app > header > img {
	margin-right: 1rem;
	margin-bottom: 1rem;
}

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: row-reverse;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}

contents group {
	margin: 1rem 0;
	display: flex;
	flex-direction: row;
	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;
}

contents content#map img {
	height: 100%;
	width: 100%;
	max-height: 350px;
	max-width: 700px;
	min-height: 150px;
	min-width: 300px;
	border-radius: 10px;
	display: block;
	margin: 1.5rem 0;
}

contents content#path img {
	width: 100%;
	min-width: 300px;
	max-height: 600px;
	border-radius: 10px;
	margin: 1.5rem 0;
}

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 content#status {
	flex-basis: 100%;
}

group#pops img {
	height: 48px;
	vertical-align: middle;
}

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: 24%;
	border-radius: 9px;
	flex-grow: 1;
	margin-top: 1rem;
	margin-right: 1rem;
	flex-basis: 2rem;
}

pop > system {
	margin-top: 1rem;
}

pop > span,
pop > system {
	margin-bottom: 1rem;
}

pop name {
	font-size: calc(var(--font-size-description) + 0.1rem);
	vertical-align: middle;
	margin-left: 0.5rem;
}

pop location {
	font-size: calc(var(--font-size-description) - 0.2rem);
	color: var(--font-color-lighter);
	vertical-align: middle;
	display: inherit;
	margin-left: calc(0.5rem + 53px);
}

pop > status > i {
	vertical-align: middle;
}

pop ipv4,
pop ipv6,
pop system {
	font-size: calc(var(--font-size-description) - 0.25rem);
	font-family: Roboto, 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 {
		order: -1;
	}
}

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

	group#pops {
		width: 50%;
	}

	group#picture {
		width: 40%;
	}

	group#pops pop {
		flex-basis: 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%;
	}

	group#picture {
		width: 100% !important;
	}

	pop > * {
		overflow-x: auto;
		overflow-y: hidden;
		white-space: nowrap;
	}

	group#pops pop {
		margin-right: unset !important;
	}
}

@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;
	}

	header > div {
		flex-direction: row;
		align-items: center;
	}
}

@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;
}

pop > system[type="wireguard"] {
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
}

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