h1 {
	margin-block-end: 4px;
}

#canvas {
	background-color: #1e1e1e;
	box-shadow: 0 0 3px 1px black;
}

.game-container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.container {
	flex-direction: row;
}

.score-container {
	width: 256px;
	display: flex;
	justify-content: space-around;
	flex-direction: row;
}

.scoreboard-container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

table {
	border-collapse: collapse;
	box-shadow: 0 0 3px 1px black;
}

th, td {
	padding: 5px;
	text-align: center;
	vertical-align: middle;
}

thead {
	background-color: #121212;
}

td {
	background-color: #1e1e1e;
}

.submit-score {
	text-align: left;
	margin-top: 20px;
}

#submit {
	background-color: #bb86fc;
	color: black;
	border-radius: 3px;
	padding: 12px;
	border: none;
	cursor: pointer;
	font-weight: bold;
	box-shadow: 0 0 3px 1px black;
}

@keyframes change-color {
	to {background-color: #e1e1e1;}
}

@keyframes active-animation {
	to { 
		color: #e1e1e1;
		background-color: #121212;
	}
}

#submit:hover {
	animation: change-color 0.3s forwards;
}

#submit:active {
	animation: active-animation 0.05s forwards;
}

input[type=text], input[type=password] {
	border: none;
	border-radius: 3px;
	padding: 6px;
	background-color: #e1e1e1;
	box-shadow: 0 0 3px 1px black;
	outline: none;
}

#username {
	margin-bottom: 10px;
}

#error-messages {
	width: 15%;
	position: fixed;
	padding: 8px;
	background-color: #CF6679;
	color: black;
	text-align: center;
	font-size: 18px;
	border-radius: 4px;
	box-shadow: 0 0 3px 1px black;
}