body,
html {
	margin: 0;
	height: 100%;
	color: white;
}

* {
	font-family: 'Orbitron', sans-serif;
}


canvas {
    width: 100%;
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
}

#loadingSpinner {
	width: 20px;
	height: 20px;
}

thead {
	background-color: lightgray;
	height: 32px;
	border-radius: 4px;
}

td {
	background-color: white;
	padding: 8px;
	border-radius: 4px;
}

/*
input, button {
    background-color: black;
}




.game {
    background-color: white;
    width: 79.7%;
    height:99.3%;
    position: absolute;
    margin-left: 20%;
    top: 0;
    border: solid black;
}
.gameCanvas{
    width: 100%;
    height: 100%;
    border: none;
    z-index: -1;
} */

section {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	height: 100%;
	flex-direction: column;
}

body {
	background-image: url("/src/assets/backgrounds/2.png");
	/* background: linear-gradient(0deg, rgb(18, 19, 34), rgb(30, 35, 44)); */
}

.container {
	width: fit-content;
	background-color: rgba(255, 255, 255, 0.75);
	/* background-color: rgba(0, 0, 0, 0.2); */
	color: black;
	padding: 8px;
	border-radius: 8px;
	text-align: center;
}


.publicGamesContainer > h1 {
	margin: 0;
	margin-top: .67em;
	padding: 0;
}

.publicGamesContainer > h5 {
	margin: 0;
	padding: 0;
}

#particles-js {
	position: absolute;
	pointer-events: none;
	z-index: -1;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}

#score {
	position: absolute;
	top: 32px;
	user-select: none;
	font-size: 3em;
	background: -webkit-linear-gradient(rgba(23, 76, 175), #1d5cd3);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 900;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: black;
}

#distance {
	position: absolute;
	top: 96px;
	user-select: none;
	font-size: 2em;
	color: lightgray;
	color: white;
}

#quitGameButton {
	position: absolute;
	top: 64px;
	left: 64px;
}

#game,
#end {
	display: none;
}

@media screen and (max-width: 1200px) {
	main {
	  flex-direction: column;
	}
  
	.chat > #messages {
	  min-height: 128px;
	  max-height: 128px;
	}
}

main {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

.ui {
	user-select: none;
	pointer-events: none;
	z-index: 1;
}