*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Gill Sans', 'Gill Sans MT' ,Calibri, 'Trebuchet MS',sans-serif;
}
body{
	background-color: black;
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;

}
.Calculator{
	width: 80vw;
	max-width: 300px;
	height: 380px;
	background-color: white;
	border-radius: 10px;
	box-shadow: 1px 5px 20px blue, -1px -5px 20px blue;


}
.display{
	width: 100%;
	height: 20%;
	display: flex;
	align-items: center;
	justify-content: cemter;
	padding: 10px;

}
.display input{
	width: 100%;
	height: 100%;
	border-radius: 10px;
	box-shadow: 1px 5px 10px black, -1px -5px 20px black;
	background-color: transparent;
	border: none;
	color: black;
	padding: 10px;
	text-align: right;
	font-size: 28px;
}
.buttons{
	width: 100%;
	height: 80%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.row{
	width: 100%;
	height: 15%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;

}
.row button{
	width: 18%;
	height: 80%;
	border-radius: 10px;
	box-shadow: 1px 5px 10px black, -1px -5px 20px black;
	background-color: transparent;
	border: none;
	color: black;
	cursor: pointer;
	font-size: 20px;
}
.row1 button{
	color: slateblue;
}
.row button:hover{
	box-shadow: 1px 2px 10px black;
	font-size: small;
	color: rgba(255,255,255,0.506);
}

#equal{
	width: 40%;
	color: slateblue;
}