* {
	box-sizing: border-box;
}
html,
body {
	height: 100%;
}

body {
	background: rgb(131, 58, 180);
	background: linear-gradient(
		90deg,
		rgba(131, 58, 180, 1) 0%,
		rgba(253, 29, 29, 1) 50%,
		rgba(252, 176, 69, 1) 100%
	);
}

.app {
	width: 350px;
	height: 250px;
	background-color: #fff;
	margin: 50px auto 0 auto;
	padding: 40px;
	border-radius: 5px;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

.counter {
	width: 100px;
	height: 100px;
	border-radius: 5px;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
	background-color: #e6e6e6;
	text-align: center;
	line-height: 100px;
	font-size: 34px;
	margin: 0 auto;
}

.controls {
	display: flex;
	justify-content: space-around;
	margin-top: 40px;
}

.controls button {
	padding: 7px 12px;
	cursor: pointer;
	background-color: #6b7a8f;
	color: white;
	border: none;
	border-radius: 3px;
}

.controls button:hover {
	background-color: #5a677a;
}