:root {
	--body: antiquewhite;
	--color1: rgba(255, 255, 255, 0.281);
	--color2: rgba(250, 144, 5, 0.265);
	--color3: rgba(0, 255, 255, 0.246);
	--color4: rgba(255, 0, 0, 0.593);
}

html, body {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	background-color: var(--body);
}

h1 {
	text-align: center;
	margin-top: 5rem;
	color: var(--color4);
	text-decoration: underline;
}

.content {
	background-color: var(--color1);
	width: 400px;
	height: 500px;
	margin: auto;
	margin-top: 5rem;
	border-radius: 10px;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
}

.result input[type="text"] {
	width: 80%;
	height: 50px;
	font-size: 2rem;
	border-radius: 10px;
	margin: 5% 7%;
	text-align: right;
	padding: 0 0.5rem;
	
}

.buttons {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	row-gap: 10px;
}

.buttons button {
	width: 80%;
	height: 50px;
	font-size: 2rem;
	border: solid 2px var(--color2);
	border-radius: 10px;
	margin: 5% 10%;
	cursor: pointer;
	background-color: var(--color2);
}

.buttons #equals {
	grid-column: 3 / 5;
	width: 90%;
	margin: auto;
}

.buttons button:hover {
	background-color: var(--color3);
}

.buttons button:active {
	background-color: var(--color2);
}

.operator {
	color: var(--color4)
}