:root {
  --calckey-size: 60px;
  --dk-brushed-metal-linear: 
    -webkit-repeating-linear-gradient(left, hsla(0,0%,30%,0) 0%, hsla(0,0%,30%,0)   6%, hsla(0,0%,30%, .1) 7.5%),
    -webkit-repeating-linear-gradient(left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%),
    -webkit-repeating-linear-gradient(left, hsla(0,0%,30%,0) 0%, hsla(0,0%,30%,0) 1.2%, hsla(0,0%,30%,.15) 2.2%),
    linear-gradient(180deg, hsl(0,0%,18%)  0%, hsl(0,0%,30%) 47%, hsl(0,0%,18%) 53%, hsl(0,0%,10%)100%)
  ;
}

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
/*   background-color: #404040; */
/*   background: linear-gradient(330deg, #444 0%, #999  50%, #666  100%); */
  /* color: #EEE; */
  /* text-shadow: 1px 1px 2px #222; */
}

.App {
  text-align: center;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto auto auto;
  grid-template-areas: 
    "header" 
    "main" 
    "footer";
  
}

.App-header {
  grid-area: header;
}

.App-main {
  grid-area: main;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas:
    ". . ."
    ". calculator ."
    ". . .";
}

.App-footer {
  grid-area: footer;
}

#calculator {
  grid-area: calculator;
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-template-columns: auto;
  grid-gap: 5px;
  padding: 20px;
  background-color: hsl(0,0%,20%);;
  background-image: var(--dk-brushed-metal-linear);
  background-size: 20% 100%;
  border-radius: 20px;
  box-shadow: inset -2px 2px 4px 0px rgba(255,255,255,.5), inset 3px -3px 6px 0px rgba(0,0,0,.5);
  -webkit-box-shadow: inset -2px 2px 4px 0px rgba(255,255,255,.5), inset 3px -3px 6px 0px rgba(0,0,0,.5);
  -moz-box-shadow: inset -2px 2px 4px 0px rgba(255,255,255,.5), inset 3px -3px 6px 0px rgba(0,0,0,.5);
}

#display {
  color: black;
  font-family: 'Segment7Standard', sans-serif;
  letter-spacing: 0.07em;
  text-shadow: 1px 1px 2px #555;
  font-size: 1.375em;
  height: 35px;
  max-width: 237px;
  overflow: hidden;
  background-color: #7E8C74;
  border: 1px rgba(0,0,0,.7) solid;
  border-radius: 5px;
  line-height: 40px;
  text-align: right;
  padding: 0 8px 0 8px;
  box-shadow: inset -2px 2px 3px 0px rgba(0,0,0,.5), inset 1px -1px 3px 0px rgba(0,0,0,.5);
}

#calcLabel {
  display: flex;
  margin: 5px;
  justify-content: space-between;
  font-size: 0.750em;
}


#keypad {
  display: grid;
  grid-template-rows: repeat(5, var(--calckey-size));
  grid-template-columns: repeat(4, var(--calckey-size));
  grid-gap: 5px;
}

.calckey {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  font-size: 1.2em;
  background-color: #666;
  border: 1px black solid;
  align-items: center;
  line-height: var(--calckey-size);
  border-radius: 5px;
  cursor: pointer;
  box-shadow: inset -1px 1px 2px 0px rgba(255,255,255,.5), inset 1px -1px 2px 0px rgba(0,0,0,.5);
  -webkit-box-shadow: inset -1px 1px 2px 0px rgba(255,255,255,.5), inset 1px -1px 2px 0px rgba(0,0,0,.5);
  -moz-box-shadow: inset -1px 1px 2px 0px rgba(255,255,255,.5), inset 1px -1px 2px 0px rgba(0,0,0,.5);
}

.calckey.calckey-clicked {
  font-size: 1.1em;
  box-shadow: inset -2px 2px 4px 0px rgba(255,255,255,.5), inset 2px -2px 4px 0px rgba(0,0,0,.5);
  -webkit-box-shadow: inset -2px 2px 4px 0px rgba(255,255,255,.5), inset 2px -2px 4px 0px rgba(0,0,0,.5);
  -moz-box-shadow: inset -2px 2px 4px 0px rgba(255,255,255,.5), inset 2px -2px 4px 0px rgba(0,0,0,.5);
}

#zero {
  grid-column-end: span 2;
}

#divide, #multiply, #subtract, #add, #equals {
  background-color: #6A76A7;
}

#clear, #posneg, #percent {
  background-color: #4444;
}

h1 {
  margin-bottom: 0;
  text-align: center;
}

#article {
padding: 0 15% 1%;
color:black;
font-style: normal;
}