@font-face {
	font-family: '04b03';
	src: url('/resources/04b_03.tff')
}

@font-face {
        font-family: '04b25';
        src: url('/resources/04b_25.tff')
}

html, body {
	width: 800px;
}

html {
	display: table;
	margin: auto;
}

body {
	display: table-cell;
	vertical-align: middle;
	background-image: url("/resources/background.png");
	color: #e6e6e6;
	font-family: '04b03';
}

tr:target {
	background-image: url("/resources/background-dark.png");
}

tr.details {
	display: none;
	column-span: all;
	background-image: url("/resources/background-dark.png");
}

tr:target + tr.details {
	display: table-row;
}

td.name a {
	color: #e6e6e6;
	text-decoration: none;
}

a:link {
	color: #53baff;
}

a:visited {
	color: #b053ff;
}

.magenta { color: #ff89ff; }
.yellow { color: #fffe00; }
.green { color: #6ae241; }
.blue { color: #8c8eff; }
.red { color: #ff7e7c; }
.gray { color: #b5b6b5; }
.orange { color: #ff9631; }
.sky { color: #74e7ff; }
.purple { color: #c69aff; }
.aqua { color: #62f8ce; }
.peridot { color: #c6eb00; }
.azure { color: #c6c7ff; }
.brown { color: #e79662; }
.rosy { color: #ff9ac6; }
.black { color: #1f231f; }

@media (prefers-color-scheme: light) {
	.magenta { color: #BD00BD; }
	.yellow { color: #6A6800; }
	.green { color: #33791B; }
	.blue { color: #0004FA; }
	.red { color: #d60300; }
	.gray { color: #666666; }
	.orange { color: #B85A00; }
	.sky { color: #247C8F; }
	.purple { color: #B400F5; }
	.aqua { color: #247F66; }
	.peridot { color: #6C7B1E; }
	.azure { color: #717194; }
	.brown { color: #9F6038; }
	.rosy { color: #A45678; }
	.black { color: #1f231f; }

	body {
		background: white;
		color: black;
	}

	tr:target {
		background: #dddddd;
	}

	tr.details {
		background: #dddddd;
	}

	td.name a {
		color: black;
	}

	a:link {
		color: #0000ee;
	}

	a:visited {
		color: #551A8B;
	}
}

h1 {
	width: 100%;
	font-family: '04b25';
	font-weight: bold;
	border-bottom: 1px solid #666666;
}

#servers {
	border-spacing: 0;
	table-layout: fixed;
	width: 100%;
}

#servers td, #servers th {
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
	border-bottom: 1pt solid #666666;
	border-right: 1pt solid #666666;
	padding: 0.3rem;
}

#servers th {
	border-top: 1pt solid #666666;
}

#servers tr {
	padding: 8pt;
}

.address {
	width: 200pt;
}

.address, td.details-left {
	text-align: left;
	border-left: 1pt solid #666666;
}

td.details-right {
	text-align: left;
	border-right: 1pt solid #666666;
	border-left: 0px;
}

#servers tr.details td {
	vertical-align: top;
}

.name {
	text-align: left;
	width: auto;
}

.room {
	text-align: right;
	width: 70pt;
}

.players {
	text-align: right;
	width: 60pt;
}

.version {
	text-align: right;
	width: 60pt;
}

.contact {
	font-weight: bold;
}

.contact, .contact + p {
	text-align: right;
}

h3, h2 {
	border-bottom: 1px solid #666666;
}