@font-face {
	font-family: 'Jersey 10';
	src: url('fonts/jersey-10.woff2');
	size-adjust: 150%;
	font-display: swap;
}

@font-face {
	font-family: 'fusion-pixel';
	src: url('fonts/fusion-pixel-12px-proportional-zh_hans.otf.woff2');
	font-display: swap;
}

@font-face {
	font-family: 'Lexend';
	src: url('fonts/Lexend-VariableFont_wght.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@keyframes dot-flashing {
	0% {
		background-color: var(--text-color);
	}
	50%, 100% {
		background-color: var(--text-color-faded);
	}
}

@view-transition {
	navigation: auto;
}

* {
	box-sizing: border-box;
	word-break: break-word;
}

html {
	color-scheme: dark;
	font-size: 16px;
}

body {
	margin: 0px;
	color: #20c6f6;
	background: #1c1c27;
	font-family: 'Jersey 10', 'fusion-pixel', sans-serif;
	scrollbar-color: #20c6f6 #292936;

	--text-color: #20c6f6;
	--text-color-faded: rgba(32, 200, 246, 0.2);
	--background-secondary: #292936;
	--button-hover-bg: #42424b;
}

@media (prefers-color-scheme: light) {
	body {
		color: #907a98;
		background: #d7ceda;
		scrollbar-color: #907a98 #eee7f0;

		--text-color: #907a98;
		--text-color-faded: rgb(144, 122, 152, 0.2);
		--background-secondary: #eee7f0;
		--background-content: #e3d7e6;
		--button-hover-bg: #e3d7e6;
	}
}

@media (prefers-color-scheme: dark) {
	body {
		color: #c9bed0;
		background: #241e26;
		scrollbar-color: #554a5c #241e26;

		--text-color: #c9bed0;
		--text-color-faded: rgba(201, 190, 208, 0.2);
		--background-secondary: #2d2630;
		--background-content: #241e26;
		--button-hover-bg: #3b313f;
	}
}

.container {
	position: absolute;
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
}

.main {
	display: flex;
	flex-direction: column;
	border: 2px solid;
	width: 100%;
	height: 100%;
	max-width: 800px;
	max-height: 92%;
	background: var(--background-secondary);
}

@media screen and (max-width: 576px) {
	.main {
		border: none;
		max-height: none;
	}
}

.loading-box {
	display: flex;
	justify-content: center;
	align-items: center;
}

.loading-box .loading {
	position: relative;
	width: 1em;
	height: 1em;
	background-color: var(--text-color);
	animation: dot-flashing 1s infinite linear alternate;
	animation-delay: -0.5s;
}

.loading-box .loading::before, .loading-box .loading::after {
	content: "";
	display: inline-block;
	position: absolute;
	top: 0;
	width: 1em;
	height: 1em;
	background-color: var(--text-color);
}

.loading-box .loading::before {
	left: -1.5em;
	animation: dot-flashing 1s linear infinite alternate;
	animation-delay: -1s;
}

.loading-box .loading::after {
	left: 1.5em;
	animation: dot-flashing 1s linear infinite alternate;
	animation-delay: 0s;
}

.loading-text {
	display: none;
	text-align: center;
}

.title-box {
	display: flex;
	border-bottom: 2px solid;
	font-size: 2rem;
	padding: 0 0.5rem;
	flex-shrink: 0;
	align-items: center;
	white-space: nowrap;
	
}

.title-box-text {
	overflow: hidden;
	text-overflow: ellipsis;
	view-transition-name: title;
}

.link-button {
	color: inherit;
	text-decoration: none;
}

.link-button:hover, .link-button:active {
	background-color: var(--button-hover-bg);
}

.back-button {
	display: flex;
	width: 3rem;
	height: 100%;
	margin-left: -0.5rem;
	margin-right: 0.5rem;
	align-items: center;
	justify-content: center;
}

.back-button svg {
	width: 1em;
	height: 1em;
}

.list-box {
	flex-grow: 1;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 0.5rem;
	display: flex;
  flex-direction: column;
}

.list-content {
	flex: 1 0 auto;
}

.footer-box {
	flex-shrink: 0;
	margin-left: calc(0.5rem * -1);
  margin-right: calc(0.5rem * -1);
  margin-bottom: calc(0.5rem * -1);
	background-color: var(--background-content);
	height: 80px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 1rem;
	box-sizing: border-box;
}

.footer-link {
	text-decoration: none;
	color: inherit;

	&:hover {
		text-decoration: underline !important;
	}
}

.server-item {
	position: relative;
	display: flex;
	border: 2px solid;
	padding: 0.5rem;
	background: var(--background-secondary);
}

.server-item-text {
	border: none;
	padding: 0;
}

.server-item {
	margin-bottom: 0.5rem;
}

.server-item > .loading-box {
	position: absolute;
	display: none;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}

.server-item.loading > .loading-box {
	display: flex;
}

.server-item.loading > :not(.loading-box):not(.server-section-label) {
	visibility: hidden;
}

.server-item.offline {
	opacity: 0.5;
}

.server-item.server-section {
	display: block;
}

.server-item.server-section > .loading-box {
	position: relative;
	width: auto;
	height: auto;
}

.server-icon {
	position: relative;
	width: 84px;
	height: 84px;
	margin-right: 0.5rem;
	flex-shrink: 0;
}

.server-icon img {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	transition: opacity 0.5s linear;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
}

.server-icon .server-image, .server-icon.loaded .server-preimage {
	opacity: 0;
}

.server-icon.loaded .server-image {
	opacity: 1;
}

.server-info {
	overflow: hidden;
	flex-grow: 1;
}

.server-name {
	font-size: 1.25rem;
}

.server-version {
	display: inline-block;
	vertical-align: middle;
	position: relative;
	top: -1px;
	font-size: 0.75em;
	padding: 0 0.5em;
	background: var(--text-color);
	color: var(--background-secondary);
}

.server-tagtext {
	display: inline-block;
	vertical-align: middle;
	position: relative;
	top: -1px;
	font-size: 0.75em;
	padding: 0 0.5em;
	background: var(--text-color);
	color: var(--background-secondary);
}

.server-desc {
	white-space: pre-wrap;
}

.server-online {
	float: right;
	margin-left: 0.5rem;
	white-space: nowrap;
}

.server-online .loading-box {
	height: 2rem;
	margin: 0 1.5em;
	font-size: 0.5rem;
}

.server-item.offline .server-online {
	display: none;
}

.server-section-label {
	font-size: 1.25rem;
	margin-bottom: 0.2rem;
}

.server-summary-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.server-summary-link:hover, .server-summary-link:active {
	background-color: var(--button-hover-bg);
}

.server-summary-link .link-icon {
	position: relative;
	top: 3px;
	display: inline-block;
	background: var(--text-color);
	width: 1.25em;
	height: 1.25em;
	margin-right: 0.125em;

	-webkit-mask-image: url(icons/link.svg);
	-webkit-mask-repeat: no-repeat;
	mask-image: url(icons/link.svg);
	mask-repeat: no-repeat;
}

.server-address-item:hover, .server-address-item:active {
	background-color: var(--button-hover-bg);
}

.button {
	color: inherit;
	background-color: inherit;
	font-family: inherit;
	font-size: inherit;
	border: 2px solid;
	min-width: 5rem;

	&:hover {
		background-color: var(--button-hover-bg);
	}
}

.borderless-button {
	display: flex;
	align-items: center;
	justify-content: center;
	appearance: none;
	background: none;
	border: none;
	color: inherit;
	font-family: inherit;
	font-size: 1.25rem;
}

.borderless-button svg {
	width: 1em;
	height: 1em;
}

.borderless-button:disabled {
	opacity: 0.5;
}

.borderless-button:not(:disabled) {
	cursor: pointer;
}

.borderless-button:not(:disabled):hover, .borderless-button:not(:disabled):active {
	background-color: var(--button-hover-bg);
}

.dialog-box {
	color: var(--text-color);
	border: 2px solid;
	background: var(--background-secondary);
	padding: 0.5rem;
	min-width: 240px;
	outline: none;
}

.dialog-box::backdrop {
	backdrop-filter: blur(2px);
}

.dialog-title {
	font-size: 1.25rem;
	margin-bottom: 0.5rem;
}

.dialog-content {
	word-break: break-word;

	&.center {
		text-align: center;
	}

	&:not(:last-child) {
		margin-bottom: 0.5rem;
	}

	label {
		display: block;
	}

	input {
		width: 100%;
		padding: 0 0.25rem;
	}
}

.dialog-footer {
	display: flex;
	justify-content: flex-end;

	button {
		color: inherit;
		background-color: inherit;
		font-family: inherit;
		font-size: inherit;
		margin-left: 0.5rem;
		border: 2px solid;
		min-width: 5rem;

		&:hover {
			background-color: var(--button-hover-bg);
		}
	}
}