*, ::before, ::after {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	transition: all 0.2s ease;
}

@keyframes fade-in {
	from {
		opacity: 0;
	} to {
		opacity: 1;
	}
}

body {
	animation: fade-in 0.75s ease;
	min-height: 100vh;
	background: #f3f3f3;
	font-family: sans-serif;
	color: #111;
	padding: 0.5rem 1rem;
}

.keyboard {
	display: grid;
	grid-template-columns: 100%;
	grid-auto-rows: max-content;
	gap: 0.5rem;
}

.keyboard .row {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 0.5rem;
}

.keyboard .row .key {
	background: #cdcdcd;
	border-radius: 10px;
	cursor: pointer;
	padding: 0.5rem 1rem;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: 700;
	user-select: none;
}

.keyboard .row .key .katex * {
	font-weight: 700;
}

.keyboard .row .key:hover {
	background: #b1b1b1;
}

.keyboard .row .key:active,
.keyboard .row .key:focus {
	background: #a0a0a0;
}

.math-input {
	padding: 0.5rem 1rem;
	background: #fff;
	border-radius: 10px;
	border: 1px solid #cdcdcd;
	margin-bottom: 0.75rem;
	outline: none;
}

.math-input:hover {
	background: #f5f5f5;
}

.math-input:active,
.math-input:focus {
	background: #f5f5f5;
	border-color: #b1b1b1;
}