:root {
	/* declare variables */
	--theme-core-color-bg: #2a2a2a;
	--theme-core-color-fg: #dbd2c3;
	--theme-core-color-accent: #86ba64;
	--theme-core-color-accent-fg: #030603;
	--theme-core-color-accent-bg: #9eaea6;
}

a {
	color: var(--theme-core-color-accent);
}

body {
	background-color: var(--theme-core-color-bg);
	background-image: url("https://www.transparenttextures.com/patterns/egg-shell.png"); /* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
	color: var(--theme-core-color-fg);
}

button {
	background-color: var(--theme-core-color-fg);
	background-image: url("https://www.transparenttextures.com/patterns/egg-shell.png"); /* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
	color: var(--theme-core-color-bg);
	border: var(--theme-core-color-fg);
}

footer {
	display: flex;
	justify-content: center;
}

main {
	display: flex;
	justify-content: center;
}

section.calculator {
	flex-wrap: wrap;
	flex-direction: row;
	height: auto;
	width: 31vw;
}

section.calculator button {
	display: flex;
	margin: .3rem;
	height: 100%;
	width: 100%;
	min-width: 4.2rem;
	min-height: 4.2rem;
	aspect-ratio: 1 / 1;
}

section.calculator button.btn-equals {
	height: 5rem;
}

section.calculator section.numpad-row {
	display: flex;
	flex-direction: row;
}

.accent {
	background-color: var(--theme-core-color-accent);
	color: var(--theme-core-color-accent-fg);
}

.display {
	align-items: end;
	background-color: var(--theme-core-color-accent-bg);
	border: 1px solid var(--theme-core-color-fg);
	display: flex;
	flex-direction: row;
	font-family: Doto, sans-serif;
	font-weight: 400;
	font-style: normal;
	min-height: 4.2rem;
	justify-content: end;
	width: 100%;
	aspect-ratio: 4 / 1;
	min-width: 19rem;
}

.display-output {
	color: var(--theme-core-color-accent-fg);
	padding-left: .5rem;
	font-size: 4rem;
}

.icon-copyleft {
  display: inline-block;
  transform: rotate(180deg);
}

@media only screen and (max-width: 786px) {

	section.calculator {
		width: 85vw;
	}

}