* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
	background-color: #D1EBFF;
}

#main {
	margin: 0 auto;
	width: 100%;
}

#calcualtor {
	width: 44%;
	background-color: #000000;
	margin: 0 auto;
	transform: translate(0, 30%);
	padding: 10px;
	overflow: hidden;
	border-radius: 6%;
	-webkit-box-shadow: 9px 10px 27px rgba(0,0,0,1.00);
	box-shadow: 9px 10px 27px rgba(0,0,0,1.00);
}

#display {
	border: 1px solid #000;
	font-size: 1.3em;
	background-color: #393939;
	padding: 10px 5px;
	border-radius: 6px;
	margin-bottom: 20px;
	color: rgba(255,255,255,1.00);
}
#btn-equls ,#btn-plus,#btn-minus,#btn-mul,#btn-Div{
	background-color: rgba(255,135,2,1.00);
	border-radius: 9%;
	color: rgba(255,255,255,1.00);
	font-size: 1.3em;
	line-height: -50%;
}

#btn-clear, #btn-clear-last-action, #btn-back-space {
	border-radius: 9%;
	background-color: rgba(151,151,151,1.00);
	color: rgba(34,34,34,1.00);
	font-size: 1.3em;
	line-height: -50%;
}
p {
	color: rgba(255,255,255,1.00);
	text-align: center;
	font-size: large;
	font-family: nixie-one;
	font-style: normal;
	font-weight: 400;
	margin-top: 20px;
}





.btn {
	color: #DBDBDB;
	background-color: #393939;
	text-align: center;
	border: 1px solid #BDBDBD;
	border-radius: 40%;
	float: left;
	width: 23.5%;
	margin: 2px;
	height: 50px;
	padding: 10px 5px;
	box-shadow: 1px 1px 2px #000;
	font-size: 1.3em;
	cursor: pointer;
	user-select: none;
	line-height: -50%;
}

.btn:hover {
    background-color: #5e5e5e;
}

.btn:active{
    box-shadow: 1px 1px 5px #000 inset;
    padding: 9px 5px;
}

@media screen and (max-width:649px){
#calcualtor {
	width: 90%;
	height: 50%;
}

}

@media screen and (min-width:650px){
#calcualtor {
	width: 50%;
	height: 50%;
}

}

@media screen and (max-width:317px){
#main #calcualtor {
	width: 98%;
	height: 70%;
}

}

@media screen and (min-width:876px){
#calcualtor {
	width: 40%;
	height: 40%;
}

}