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

body{
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

@font-face {
  font-family: 'Digital-7';
  src: URL('digital-7.ttf') format('truetype');
}

#container {
	background-color: #CCC;
	width: 350px;
	padding: 20px;
	border-radius: 5%;
	border: solid 2px darkgrey;
	box-shadow: 5px 10px 8px 10px darkgrey;
}

#screenborder{
	border: solid 4px darkgrey;
}

#screen {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	background-color: #000;
	color: #FFF;
	font-size: 36px;
	font-family: Digital-7;
	height: 2.5em;
	padding: 0.75em 0;
	overflow: hidden;
	border-left:0.5em solid transparent;
    border-right:0.5em solid transparent;
}

#keypad {
	font-family: 'Roboto Mono', monospace;
	display: grid;
	grid-gap: 10px;
	grid-template-columns: auto auto auto auto;
	grid-template-rows: auto auto auto auto auto;
	margin-top: 10px;
}

.button {
	text-align: center;
	font-size: 30px;
	line-height: 60px;
	background-color: #EEEEEE;
	padding: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 2px 2px darkgrey;
}
.button:hover{
	background-color: #DDDDDD;
	box-shadow: 2px 2px darkgrey;
}
.button:active{
	background-color: #EEEEEE;
	box-shadow: 0px 0px 0px 0px black;
}

.operator {
	background-color: #ccffff;
}
.operator:hover{
	background-color: #bbeaea;
}
.operator:active{
	background-color: #ccffff;
	box-shadow: 0px 0px 0px 0px black;
}

#equals {
	grid-column-start: 4;
	grid-row-start: 3;
	grid-row-end: 6;
	background-color: #1e90ff; /*dodgerblue*/
}
#equals:hover{
	background-color: #2167ff;
}
#equals:active{
	background-color: #1e90ff;
	box-shadow: 0px 0px 0px 0px black;
}

#c {
	background-color: #cd5c5c;  /*indianred*/
}
#c:hover{
	background-color: #b9302b;
}
#x:active{
	background-color: #cd5c5c;
	box-shadow: 0px 0px 0px 0px black;
}