html {
	font-size: 14px;
}

body {
	margin:3rem;
	background-image:
	linear-gradient(195deg,
		#abecf5 10px,
		#f5ebf2 200px,
		rgba(255, 255, 255, 0) 330px),
	linear-gradient(352deg,
		#fff 50px,
		rgba(255, 255, 255, 0) 360px),
	linear-gradient(45deg,
		#bff8ff 213px,
		rgba(255, 255, 255, 0) 700px);
	height:calc(100vh - 6rem);
} 

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

* {
	font-family: "courier new";
	color: #393847;
}

#calculator {
	display: grid;
	width: min-content;
	grid-template-columns: repeat(4,65px);
	gap: 8px;
	background-image: linear-gradient(156deg, #92c9e41c, #a3b7b736, #e0e6e633);
	padding:20px;
    border-radius: 5px;
    box-shadow: inset 5px 5px rgba(236,234,235,.6), inset -5px -5px rgba(180,180,180,.6);
}

button, #display {
	width:100%;
	height:65px;
	border:0;
	box-sizing: border-box;
	outline:none;
}

#display {
	grid-column: span 4;
	background:#c8f5c38a;
    background: #29b4ffe8;
    color: #fff;
	padding:10px;
	font-size: 2.1rem;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
    overflow: hidden;
    box-shadow: inset 5px 5px rgba(180,180,180,.6), inset -5px -5px rgba(236,234,235,.6);
}

button {
	background-color: #F0EEED;
	font-size: 1.8em;
	text-shadow: 1px 1px rgba(250,250,250,.6);
    box-shadow: inset 5px 5px rgba(236,234,235,.6), inset -5px -5px rgba(180,180,180,.6);
    border-radius: 5px;
}

button:active {
    box-shadow: inset 5px 5px rgba(180,180,180,.6), inset -5px -5px rgba(236,234,235,.6);
}

#zero {
	grid-column: span 2;
}

.operator {
    background-color: #d0d0d0e8;
}

.other, #equals {
    background-color: #f9f323e8;
}