html, body { 
	height: 100%;
	padding: 0;
}

.container {
	display: flex;
	height: 100%;
}

.calc {
	width: 100%;
}

.skwexam-find {
	width: 20%;
	height: 100%;
	padding: 16px;
	box-sizing: border-box;
	overflow: auto;
	resize: horizontal;
}

@media (max-width: 800px) {
	.calc, .skwexam-find {
		width: 100%;
	}
}

.calc {
	display: grid;
	padding: 8px;
	grid-template-columns: repeat(4, 1fr);	
	flex-direction: column;
	box-sizing: border-box;
	height: 100%;
}

button {
	background-color: var(--button-colour);
	color: var(--text-colour);
	margin: 8px;
	border: none;
	font-size: 24px;
}

.digits {
	grid-column: 1 / -1;
	margin: 8px;
	padding: 8px;
	text-align: right;
	background-color: var(--digits-colour);
	
	display: flex;
	justify-content: center;
	flex-direction: column;  
}

@media (hover: hover) and (pointer: fine) {
	button:hover {
		background-color: var(--button-hover-colour);
	}
}

button:active {
	background-color: var(--button-hover-colour);
}

.operator {
	background-color: var(--accent-colour);
	color: #FFFFFF;
}

@media (hover: hover) and (pointer: fine) {
	.operator:hover {
		background-color: var(--accent-hover-colour);
	}
}

.operator:active {
	background-color: var(--accent-hover-colour);
}

.skwexam-label {
	color: var(--skwexam-label-colour);
	font-size: 18px;
}