:root {
	--bg-color: #b56515;
	--new-game-color: #333433;
	--join-game-color: #410505;
	--name-color: #ffcf8b;
	--gap: 25px;
	--button-width: 250px;
	--button-height: 50px;
}

body {
	background-color: var(--bg-color);
}

button, input {
	border-radius: 10px;
	transition: 0.5s;
}

button:hover, input:hover {
	box-shadow: 0 0 0 4px var(--bg-color), 0 0 0 8px var(--hover-color);
}

.container, form {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gap)
}

.container h1 {
	font-size: 60px;
	margin-bottom: 30px;
}

#name, #game_id, #new_game, #join_game, #credits, #back {
	width: var(--button-width);
	height: var(--button-height);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: large;
}

#new_game {
	background-color: var(--new-game-color);
	color: white;
	--hover-color: var(--new-game-color);
}

#join_game {
	background-color: var(--join-game-color);
	color: white;
	--hover-color: var(--join-game-color);
}

#name, #game_id {
	background-color: var(--name-color);
	text-align: center;
	color: black;
	--hover-color: var(--name-color);
}

#name::placeholder, #game_id::placeholder {
  color: black;    
  opacity: 0.75;     
}

#credits, #back {
	background-color: black;
	color: white;
	--hover-color: black;
}