html { height: 100%; }

body {
	font-family: sans-serif;
	height: 100%;
	margin: 0;
	background: #000;
	background: radial-gradient(circle at 22%, #fdfeff 0%, #6a757e 5%, #0e1922 20%, #000 100%);
	backdrop-filter: blur(15px);
}

h1 {
	text-shadow: 0 0 4px #24ecff;
	font-size: 60px;
	margin-top: 0;
	margin-left: 15px;
}

@media (max-width: 630px) {
	h1 { font-size: 40px; }
}

div {
	margin-left: 30px;
	margin-bottom: 40px;
	width: 80%;
	word-wrap: break-word;
	padding: 10px;
	color: #fff;
	background-color: #6f6f6f6f;
	border-top: 3px solid #ababab6f;
	border-bottom: 3px solid #3a3a3a6f;
	border-left: 2px solid #3a3a3a6f;
	border-right: 2px solid #3a3a3a6f;
}

div p {
	margin: 0;
	opacity: .9;
}

@media (max-width: 500px) {
	div { margin-left: 15px; }
}

a { color: #24ecff6f; }


/* Somewhat recreate the look of the in game server picker */
td:first-child, td:nth-child(4) { text-align: right; }
td:nth-child(3) { text-align: center; }
th { text-align: left; }
/* Give a gap between everything in the table to make it more readable */
th, td { padding-right: 15px; }

/* Deal with the table at smaller screen sizes.
Doesn't let us keep the Barotraumaish look but it's better than being nonfunctional or hard to read */
@media (max-width: 643px) {
	th, td, td:first-child, td:nth-child(4) { text-align: center; }
}
#server_list { overflow-x: auto; }