* {
	touch-action: manipulation;
}

body {
	overflow: hidden;
	overflow-anchor: none;
}

.content-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 30px;
	height: 100vh;
	width: 100vw;
}

.number-output {
	max-width: 100vw;
	overflow: auto;
	font: 20vh Helvetica, Arial, sans-serif;
}

.option-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	font: bold 20px Helvetica, Arial, sans-serif;
}

.num-input {
	border: 4px solid black;
	border-radius: 0;
	width: 100vw;
	height: 60px;
	max-width: 500px;
	box-sizing: border-box;
	font: inherit;
}

.num-input:focus {
	outline: none;
	border: 4px solid dodgerblue;
}

.num-input:invalid {
	background-color: lightcoral;
}

.num-input::placeholder {
	color: gray;
}

.num-input:invalid::placeholder {
	color: whitesmoke;
}

.btn-container {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.btn {
	border: none;
	background-color: dodgerblue;
	color: white;
	width: 100vw;
	height: 60px;
	max-width: 500px;
	box-sizing: border-box;
	text-align: center;
	font: bold 20px Helvetica, Arial, sans-serif;
}

.btn:hover {
	cursor: pointer;
	border: 4px solid black;
}

.btn:active {
	background-color: white;
	color: dodgerblue;
}