body {
	font-family: 'Press Start 2P', cursive;
	margin: 0;
	padding: 0;
}

#game-board {
	border: 1px solid black;
	margin: 0 auto;
	display: block;
	background-image: url('./../images/background-2.gif');
	background-size: fill;
}

button {
	margin: 0 auto;
	padding: 18px;
	display: block;
	background-color: green;
	color: white;
	font-size: 18px;
	border: none;
}

.main {
	background-color: rgb(42, 46, 61);
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-content: center;
	height: 100vh;
}

.logos {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	margin: 50px;
}

.logos-description {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 50px;
}

.how-to {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	color: white;
}

.how-to__description {
	padding: 10px;
	font-size: 14px;
	line-height: 16px;
	letter-spacing: 2px;
	max-width: 400px;
}

.galaga {
	max-width: 200px;
	margin: 20px;
	display: block;
}
.galaga-description {
	max-width: 150px;
	margin: 20px;
	display: block;
}

.ironhack {
	max-width: 150px;
	margin: 20px;
	display: block;
	filter: drop-shadow(-1px 1px 0 white) drop-shadow(1px -1px 0 white)
		drop-shadow(1px 1px 0 white) drop-shadow(-1px -1px 0 white);
}
.ironhack-description {
	max-width: 70px;
	margin: 20px;
	display: block;
	filter: drop-shadow(-1px 1px 0 white) drop-shadow(1px -1px 0 white)
		drop-shadow(1px 1px 0 white) drop-shadow(-1px -1px 0 white);
}

.controller-keys {
	width: 150px;
	padding: 10px;
}

.controller-spacebar {
	width: 200px;
	padding: 10px;
}

.game {
	background-color: black;
	height: 100vh;
	display: flex;
	justify-content: space-around;
}

.game > canvas {
	border: 5px solid rgb(42, 46, 61);
}
.right-side-game {
	color: white;
}

.hidden {
	display: none;
}