* {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 1rem;
	background: #f2f4f7;
	color: #202833;
	font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.calculator {
	max-width: 32rem;
	margin: 2rem auto;
	overflow: hidden;
	background: #fff;
	border: 1px solid #dce1e7;
	border-radius: 0.75rem;
	box-shadow: 0 0.25rem 1rem rgb(20 35 50 / 8%);
}

.toolbar {
	padding: 1rem 1.25rem;
	background: #245b87;
	color: #fff;
}

h1 {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 600;
}

.content {
	display: grid;
	gap: 0.5rem;
	padding: 1.25rem;
}

label {
	margin-top: 0.5rem;
	font-weight: 600;
}

select,
input {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.55rem 0.7rem;
	border: 1px solid #b9c3ce;
	border-radius: 0.4rem;
	background: #fff;
	color: inherit;
	font: inherit;
}

select:focus,
input:focus {
	border-color: #245b87;
	outline: 2px solid rgb(36 91 135 / 20%);
}

h2 {
	margin: 1rem 0 0;
	font-size: 1rem;
}

output {
	padding: 0.75rem;
	border-radius: 0.4rem;
	background: #eef4f8;
	font-size: 1.25rem;
	font-weight: 600;
}