article > h1 {
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 1rem;
	color: white;
	text-align: center;
}

article > p {
	color: #9d9892;
	font-size: 14px;
	width: min(100%, 650px);
	text-align: center;
	margin-inline: auto;
	margin-bottom: 1rem;
}

.switch {
	margin-bottom: 1rem;
}

	.switch a {
		text-decoration: none;
	}

	.switch .rust-btn {
		background: rgba(0, 0, 0, 0.65);
	}

	.switch > li.discord > .rust-btn {
		background: #5865F2;
	}

	.switch > li .icon {
		background: white;
	}

.total {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5px;
	background: #485e28;
	padding: 5px 8px;
	margin-top: 3px;
}

	.total > .icon {
		width: 10px;
		height: 10px;
		background-color: white;
	}

	.total > span {
		color: white;
	}


/*#region Table */

#ServerList {
	width: 100%;
	display: flex;
	flex-direction: column;
}

	#ServerList > li {
		width: 100%;
		display: grid;
		grid-template-columns: 165px 1fr 120px 120px 100px;
		transition: background-color 200ms;
	}

		/*#region header */

		#ServerList > li.header > span {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 45px;
			background-color: rgba(0, 0, 0, 0.8);
			font-size: 12px;
			font-weight: bold;
			border-bottom: 1px solid transparent;
			user-select: none;
			transition: background-color 300ms;
		}

			#ServerList > li.header > span:nth-of-type(2) {
				justify-content: flex-start;
				padding-left: 20px;
			}

			#ServerList > li.header > span:is(.asc, .desc):after {
				content: "\f107";
				font-family: "Font Awesome 6 Free";
				font-weight: 900;
				position: relative;
				top: 6px;
				transform: translateY(-50%);
				margin-left: 5px;
				font-size: 17px;
				transition: 300ms;
			}

			#ServerList > li.header > span.asc:after {
				transform: translateY(-50%) rotate(180deg);
			}

		/*#endregion */

		/*#region server */

		#ServerList > li.server {
			font-size: 13px;
		}

			#ServerList > li.server:nth-child(odd) {
				background-color: rgba(0, 0, 0, 0.3);
			}

			#ServerList > li.server:nth-child(even) {
				background-color: rgba(0, 0, 0, 0.15);
			}

			#ServerList > li.server:hover {
				background-color: rgba(228, 218, 209, .1);
			}

			#ServerList > li.server > a > img {
				margin: 14px 18px;
				border-radius: 4px;
				object-fit: cover;
				box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
				font-size: 0;
				color: transparent;
				height: 64px;
				width: 125px;
			}

			#ServerList > li.server > :is(div, a) {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}

			#ServerList > li.server > div > span:first-of-type {
				display: none;
				font-weight: bold;
				margin-bottom: 3px;
			}

			#ServerList > li.server > a:not(:first-of-type) {
				padding: 14px 18px;
				align-items: start;
				overflow: hidden;
				text-decoration: none;
			}

			#ServerList > li.server > a > span {
				width: 100%;
				font-weight: bold;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				color: white;
				text-decoration: none;
			}


			#ServerList > li.server.offline > a > span {
				color: var(--rust-red);
			}

			#ServerList > li.server .playerCounts {
				color: #bab1a899;
				font-size: 12px;
			}

			#ServerList > li.server .currentPlayers {
				font-weight: bold;
				color: white;
			}
			/*#endregion */

			/*#region tags */

			#ServerList > li.server .tags {
				margin-top: 10px;
				display: flex;
				flex-wrap: wrap;
				gap: 5px;
				list-style-type: none;
			}

				#ServerList > li.server .tags > li {
					background: #222222;
					color: #9d9892;
					padding: 2px 5px;
					font-weight: 900;
					font-size: 11px;
					white-space: nowrap;
				}

/*#endregion */


/*#endregion */