/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

/* Main CSS */
body {
	font-family: 'Bebas Neue', cursive;
	letter-spacing: 1px;
	margin: 0;
	cursor: crosshair;
}
h2 {
	position: absolute;
	font-size: 50px;
	z-index: 1;
	top: 0;
	left: 0;
	padding-left: 2em;
}

canvas {
	background: rgb(209, 195, 218);
	background: linear-gradient(
			180deg,
			rgba(209, 195, 218, 0.2) 0%,
			rgba(206, 239, 255, 0.2) 100%
		),
		url('../img/bg.jpg');
}

/* Button CSS */
button {
	margin-top: 0.3em;
	padding: 0.5em 1em 0.5em 1em;
	border-radius: 3px;
	border: none;
	width: 10em;
	background: #545454;
	color: #fcfcfc;
	font-size: 20px;
	font-weight: 600;
	outline: none;
}
button:hover {
	background: #ed9b42;
}
button:active {
	background: #b56712;
}

/* Modal CSS */
.modal {
	display: none;
	background-color: rgba(0, 0, 0, 0.4);
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 1;
	overflow: auto;
}

#modal-content {
	background-color: #f0f0f0;
	max-width: 450px;
	max-height: 500px;
	padding: 2em;
	border-radius: 5px;
	margin: 250px auto;
	text-align: center;
	user-select: none;
	font-size: 20px;
}

/* #modal-start {
	display: block;
}

#modal-continue {
	display: block;
}

#modal-gameover {
	display: block;
} */