.dial {
	height: 400px;
	width: 400px;
}

.timer {
	position: relative;
	display: inline-block;

	position: absolute;
	width: 400px;
	height: 400px;
	top: 50%;
	left: 50%;
	margin: -200px 0 0 -200px;
}

* {
	font: inherit;
}

body {
	background-color: #e9ecef;
	font-family: "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans",
		"Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.timer input {
	display: block;
	border: none;
	background-color: #e9ecef;
	width: 240px;
	font-size: 90px;
	text-align: center;
}

.timer button {
	border: none;
	font-size: 36px;
	cursor: pointer;
	background-color: transparent;
}

.timer button:focus {
	outline: none;
}

.timer input:focus {
	outline: none;
}

.controls {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}