html, body, #wrapper {
	height:100%;
}

h1 {
	text-align:center;
	font-family: 'Kalam', cursive; 
	margin: 0px;
	font-size: 150%;
}

h2 {
	text-align:center;
	font-family: 'Hind', Bold; 
	margin: 0;
	font-size: 100%;
}


#wrapper {
	display: block;
    position: absolute;
	width: 100%;
	height: 100%;
	min-width: 250px;
	min-height:500px;
	max-width: 400px;
	max-height:650px;
}

.div-calc{
	display: block;
    position: absolute;
    border-top-left-radius: 80% 10%;
    border-top-right-radius: 80% 10%;
    border-bottom-left-radius: 80% 10%;
    border-bottom-right-radius: 80% 10%;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
	background-color: silver;
	box-shadow:0px 0px 5px 5px gray inset;

}

.div-result{
	display: block;
    position: absolute;
    top: 20%;
    left: 10%;
    width: 80%;
    height: 10%;
	background-color: darkgray;
	border-radius: 15px;
	box-shadow:0px 0px 2px 2px #7C748F inset;
}

#id-result{
	font-family: 'Hind', Bold;
	text-align: right;
	font-size: 2.25em;
	margin:0;
	color: #413D4B;
}

.div-buttons{
	display: block;
    position: absolute;
    top: 35%;
    left: 10%;
    width: 80%;
    height: 50%;
}

.div-row{
    position: relative;
	margin-left:2px;
	margin-right:2px;
    height: 20%;
}

.key{
	top: 0px;
	width:  23.2%;
    height: 100%;
    padding: 0px;
    border-left: 0px;
    border-right: 0px;
	border-radius: 15px;
	color: white;
	background-color: #413D4B;
	box-shadow:0px 0px 2px 2px #7C748F inset;
}

.key-plus{
	position:absolute;
	top:0px;
	height:200%;
	z-index: 2;	
	margin-left:4px;
	margin-right:2px;
}