body {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 3rem, 0, 0, 0;
	font-family: Arial, Helvetica, sans-serif;
}

.title {
    text-align: center;
	h1 {
		font-size: xx-large;
        margin-bottom: 0;
	}
	h2 {
        margin-top: 1rem;
		font-size: x-large;
	}
    padding-bottom: 2rem;
}

.grid {
	display: flex;
	flex-direction: column;
	gap: 7.5px;
	margin-bottom: 20px;
}

.row {
	display: flex;
	gap: 7.5px;
}

.crouton-tile {
	width: 50px;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 2px solid #545454;
	background-color: #c4c2c2;
    border-radius: 2px;
    img { width: 40px; height: 40px;}
}

.keyboard {
	padding: 2rem;
	button {
		width: 70px;
		height: 70px;
	}
}

.keyboard-tile {
	width: 90px;
	height: 90px;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 2px solid #c4c2c2;
	background-color: #545454;
	img {
		width: 60px;
	}
}

.guessed > div, button.guessed {
	background-color: #36ae15;
    border-color: #3abd16;
    border-radius: 5px;
}