html { font-size: 14px; }

@media (min-width: 768px) {
	html { font-size: 16px; }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; }

html { position: relative; min-height: 100%; }

body { margin-bottom: 60px; }

.buttonBlock { display: flex; flex: 0 0 25%; border: 0px; justify-content: center; align-items: center; height: 32%; cursor: pointer; background-color: white; color: black; }
.calculator-button { display: flex; flex: 0 0 25%; border: 1px solid #ccc; justify-content: center; align-items: center; height: 32%; background-color: #f7f7f7; color: #333; font-size: 1.5rem; font-weight: bold; cursor: pointer; border-radius: 8px; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1); transition: all 0.1s ease-in-out; }
	.calculator-button:hover { background-color: #ededed; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); }
	.calculator-button:active { background-color: #dddddd; transform: translateY(2px); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.calculator-buttonEquals { background-color: #ff9500; color: white; }
	.calculator-buttonEquals:hover { background-color: #e58700; }
	.calculator-buttonEquals:active { background-color: #cc7800; }
.confine { height: 25%; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calculator-button { -webkit-user-select: none; /* For Chrome, Safari, etc. */ user-select: none; }