/* Entire Document */

body{
  background: #3A284C;
  text-align: center; 
  color: #D3F5EF;
  font-family: 'Orbitron', sans-serif;
    margin: 0;
}

/* Nav */

nav {
  background: black;
  padding-bottom: 10px;
  padding-top: 10px;
  width: 100%;
  position: fixed;
  bottom: 0;
  font-family: sans-serif;
  font-family: "Circle", Verdana, Tahoma;
  text-align: center;
  vertical-align: middle;
}

#nic {
  color: #40CC33;
  text-decoration: none;
}

#nic:hover {
  color: #4A9943;
}

/* Calculator Body */

#calculatorBackground{

	background: #2A1340;
	border: 3px solid white; 
    position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 0 auto; 
	text-align: center;  
	width: 350px; 
}

table{
	margin: 0 auto; 
	padding-bottom: 20px; 
}
/* Display */
#display{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: #412D54;
  height: 30px; 
  text-align: right; 
  margin: 10px; 
  font-size: 23px; 
 }


/* Buttons In General */
button{
  color: #D3F5EF;
  width: 50px; 
  height: 50px; 
  font-family: 'Orbitron', sans-serif;
  font-size: 24px; 
  background: #794CA8;
   margin: 3px 2px; 
  text-decoration: none;
  border: none;
  box-shadow: 0 2px #B07BE5;
}

button:focus {outline:0;}

button:hover {background-color: #352545}
button:active {
  box-shadow: 0 2px #62447F;
  transform: translateY(4px);
}
/* Num */


/* Operators */

.operator{
  background: #518562; 
  box-shadow: 0 2px #B0C9B8; 
}
.operator:hover {
	background-color: #475C4E
}
.operator:active{
	 box-shadow: 0 2px #518562;
	 transform: translateY(4px);
}

/* Enter */

.enter{
	background: #5C57C9; 
	box-shadow: 0 2px #918DE3; 
}
.enter:hover{
	background: #3E3B8F; 
}
.enter:active{
	 box-shadow: 0 2px #5C57C9;
	 transform: translateY(4px);
}

/* Clear and Delete */

.delete{
	background: #913235; 
	box-shadow: 0 2px #C44448; 
}
.delete:hover{
	background: #5C2022; 
}
.delete:active{
	 box-shadow: 0 2px #913235;
	 transform: translateY(4px);
}

@media screen and (max-width: 700px) {

	button{
		width: 40px; 
		height: 40px; 
		font-size: 17px;
	}
	#calculatorBackground{
		width: 300px;
	}
}