#functions {
	max-height: 40%;
}

#f-table button {
	height: var(--space-big);
	min-width: var(--space-big);
}

#f-table td {
	vertical-align: middle;
}

#keyboard button {
	max-width: var(--space-large);
}

#keyboard p {
	margin-bottom: var(--space-micro);
}

#keyboard .scrollable {
	max-height: calc(5 * (var(--space-large) + var(--space-micro)) + 2 * var(--space-tiny));
}

#keyboard #division section {
	margin: 0;
}

#input-formula {
	align-items: center;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	min-width: var(--space-wide);
	min-height: var(--space-big);
	vertical-align: middle;
}

#input-name {
	justify-content: flex-end;
}

#input-color {
	height: var(--space-big);
	min-width: var(--space-big);
}

#results {
	align-items: center;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	padding-left: var(--space-medium);
	padding-top: var(--space-small);
	padding-bottom: var(--space-small);
	vertical-align: middle;
}

@media only screen and (max-width: 800px) {
	#keyboard, #keyboard div {
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
	}
	#keyboard button {
		min-width: var(--space-medium);
		width: 100%;
		max-width: 100%;
	}
	#keyboard section:first-child {
		box-sizing: border-box;
		width: 60%;
	}
	#keyboard section:last-child {
		box-sizing: border-box;
		width: 40%;
	}
	#move {
		bottom: initial;
	}
	#results, #settings {
		display: none;
	}
}