.calculator{
    width: 21rem;
    display: flex;
    margin:1rem;
    display: flex;
    flex-wrap: wrap;
    padding: 1rem;
    background-color:  #333333;
    font-family:Arial;
    border-radius: 5px;
    background:linear-gradient(to bottom, 
    #69FF97 5%,#00E4FF 100%);
    -webkit-box-shadow: 6px -1px 36px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 6px -1px 36px 0px rgba(0,0,0,0.75);
box-shadow: 6px -1px 36px 0px rgba(0,0,0,0.75);
}
.monitor{
    padding: 0.5rem 1rem;
    flex: 0 0 89%;
    background-color: white;
    font-size: 2rem;
    height: 4rem;
    color:#444444;
    border-radius: 5px;
    margin-bottom: 0.6rem;
}
.btn-group{
    flex: 0 0 77%;
    display: flex;
    flex-wrap: wrap;

}
.number, .btn--decimal,.btn--ac{
    height: 3.5rem;
    width: 4.8rem;
    text-align: center;
    padding-top: 1.2rem;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
	background: grey;
	background-color:#ffffff;
	border-radius:3px;
	border:1px solid #dcdcdc;
	display:inline-block;
	cursor:pointer;
	color:#333333;
	font-size: 1.5rem;
	font-weight:bold;
	text-decoration:none;
    text-shadow:0px 1px 0px #333333;
    margin:0.2rem;
}
.operator-group{
    margin:0.1rem;
    flex: 0 0 20%;
    justify-content: flex-start;
    display: flex;
    flex-wrap: wrap;
}
.operator,.btn--enter{
    padding-top: 1rem;
    text-align: center;
    height: 2.8rem;
    width: 4.1rem;
	background-color:#787878;
	border-radius:3px;
	border:1px solid #787878;
	display:inline-block;
	cursor:pointer;
	color:white;
	font-size: 1.5rem;
	font-weight:bold;
	text-decoration:none;
    text-shadow:0px 1px 0px #333333;
    margin:.1rem

}

.number:focus, .number:active,
.operator:focus, .operator:active,
.btn--enter:focus, .btn--enter:active,
.btn--ac:focus, .btn--ac:active{
    transform: translateY(3px);
}