/* removes any broswer added padding or margins */
* {margin: 0; padding: 0; box-sizing: border-box}
header {
	display: flex;
	justify-content: space-between;
	border: solid #d3d6da 2px;
}
/* refers to the divs that contains the links to help, stats and settings */
.link {
	display: inline-block;
	margin-left: 3px;
}
/* right portion of the header that contains links to help, stats and settings */
.header-right {
	margin-right: 5px;
}
/* css settings for the main panel of boxes */
.panel {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 4px;
}
/* boxes for the panel (six rows) */ 
.panel .box {
	display: inline-block;
	border: solid #d3d6da 2px;
	width: 50px;
	height: 50px;
	margin-top: 4px;
} 
.largecontainer {
	height: 150px;
}
/* boxes for the panel (six rows) */
.keys, .keysl3 {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 3px;
} 
/* color and box values */
.keys .box {
	background-color: #d3d6da;
	border-radius: 4px;
	width: 40px;
	height: 50px;
	margin-top: 3px;
	text-align: center;
}
/* color and keypad box values */
.keysl3 .box{
	background-color: #d3d6da;
	border-radius: 4px;
	width: 40px;
	height: 50px;
	margin-top: 3px;
	text-align: center;
}
/* target one div (enter key) to make it slightly larger */
.keysl3 .box:first-child {
	width: 63px;
}
/* target one div (delete key) to make it slightly larger */
.keysl3 .box:last-child {
	width: 63px;
}
/* make the letters on the keypad centered */
img {
	margin-top: 18px;
}
/* to make the lettering fit better */
#deletekey {
	margin-top: 5px;
}
/* to make the lettering fit better */
#enterkey {
	margin-top: 10px;
}