:root {
	--rosewater: #f2d5cf;
	--flamingo: #eebebe;
	--pink: #f4b8e4;
	--mauve: #ca9ee6;
	--red: #e78284;
	--maroon: #ea999c;
	--peach: #ef9f76;
	--yellow: #e5c890;
	--green: #a6d189;
	--teal: #81c8be;
	--sky: #99d1db;
	--sapphire: #85c1dc;
	--blue: #8caaee;
	--lavender: #babbf1;
	--text: #c6d0f5;
	--subtext1: #b5bfe2;
	--subtext0: #a5adce;
	--overlay2: #949cbb;
	--overlay1: #838ba7;
	--overlay0: #737994;
	--surface2: #626880;
	--surface1: #51576d;
	--surface0: #414559;
	--base: #303446;
	--mantle: #292c3c;
	--crust: #232634;
}

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

body {
	color: var(--text);
	background-color: var(--base);
	font-family: sans-serif;
	font-size: 1rem;
	display: flex;
	justify-content: center;
}

/* Icons block click events without this */
.icon {
	pointer-events: none;
}

#casio {
	display: grid;
	grid-template-areas:
		"expression expression expression"
		"input input input"
		"one two three"
		"four five six"
		"seven eight nine"
		"minus zero delete"
	;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(6, 1fr);
	gap: 8px;
	padding: 16px;
	box-sizing: border-box;
	height: 100%;
	max-width: 100%;
	aspect-ratio: 2 / 4;
}

#expression {
	font-family: monospace;
	text-wrap: nowrap;
	overflow-x: hidden;
	text-align: center;
	border: none;
	border-radius: 8px;
	background-color: var(--surface0);
	display: flex;
	justify-content: center;
	align-items: center;
	grid-area: expression;
}

#user-input {
	outline: 0;
	border: none;
	border-radius: 8px;
	font-family: monospace;
	background-color: var(--surface0);
	color: var(--text);
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	grid-area: input;
}

.keypad-button {
	font-family: monospace;
	border: none;
	background-color: var(--surface0);
	color: var(--text);
	border-radius: 8px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.keypad-button:hover {
	cursor: pointer;
}

.keypad-button:active {
	outline: solid 2px var(--text);
	z-index: 1;
}

.keypad-button>img {
	height: 2rem;
	width: 2rem;
}

#expression,
#user-input,
.keypad-button {
	font-size: 2rem;
}

#expression,
#user-input {
	box-sizing: border-box;
	padding: 0 8px;
}

#keypad-1 {
	grid-area: one;
}

#keypad-2 {
	grid-area: two;
}

#keypad-3 {
	grid-area: three;
}

#keypad-4 {
	grid-area: four;
}

#keypad-5 {
	grid-area: five;
}

#keypad-6 {
	grid-area: six;
}

#keypad-7 {
	grid-area: seven;
}

#keypad-8 {
	grid-area: eight;
}

#keypad-9 {
	grid-area: nine;
}

#keypad-0 {
	grid-area: zero;
}

#keypad-minus {
	grid-area: minus;
}

#keypad-delete {
	grid-area: delete;
}