* {
    margin: 0px;
    padding: 0px;
}
.clear{
	clear: both;
}
body{
	background-color: #C8E0F4;
	background-image: url("../images/i.jpg");
	background-size: cover;
	
}


.calculator {
    width: calc(95px * 4 + 3 * 5px);
    height: calc(90px * 5 + 4 * 5px + 120px);
	background-color: #9DD1F1;
	margin: 80px auto;
	-webkit-box-shadow: 0px 0px 5px #7A808B;
	box-shadow: 0px 0px 5px #7A808B;
	
}
.calculator .res_show{
	width: 100%;
	height: 120px;
	position: relative;
	background-color: #031927;
	white-space: nowrap; 
    overflow: hidden;
    text-overflow: clip;
}
#res_text{
	color: white;
	font-size: 30px;
	font-family: graduate;
	font-style: normal;
	font-weight: 400;
	direction: ltr;
	position: absolute;
	top: 45px;
	right: 20px;
}

.calculator .buttons{
	width: 100%;
	height: calc(90px * 5 + 4 * 5px);
}
.calculator .buttons .line{
	margin-bottom: 5px;
}
.calculator .buttons .line .btn{
	width: 95px;
	height: 90px;
	border: 5px groove #205D8F;
	float: left;
	color: white;
	background-color: #508AA8;
	font-size: 25px;
	font-family: graduate;
	font-style: normal;
	font-weight: 400;
	margin-right: 5px;
}
.calculator .buttons .line .btn:hover{
	background-color: #457B9D;
	color: mediumblue;
}
.calculator .buttons .line:nth-child(1) .btn:nth-child(3){
	margin-right: 0px;
}
.calculator .buttons .line .btn:nth-child(4){
	margin-right: 0px;
}
#clear{
	width: calc(95px * 2 + 5px);
	background-color: #E57676;
}
#result{
	background-color: #50B6B9;
}
#clear:hover{
	background-color: #E63946;
}
#result:hover{
	background-color: #00B520;
}