@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,700,800,900');
body {
  font-family: 'Montserrat', sans-serif;
}

.container {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: [header] 78px [body] auto [footer] 78px;
  justify-items: center;
  align-items: center;
}

.container .body {
  display: inline-grid;
  grid-template-columns: 100%;
  justify-items: center;
}

.container .body .body-container {
 
  background: #282828;
  margin: 30px 0px;
  padding: 20px 10px;
  border-radius: 30px;
  display: inline-grid;
  grid-template-columns: 40% 60%;
  grid-template-rows: [body] auto;
  margin-top: 300px;
  width: 345px;
  height: 380px;
}

.header {
  text-align: center;
}

.header>h1 {
  display: inline;
  vertical-align: top;
}

.container .body>div {
  text-align: center;
}

.container .body .section-left {
  display: inline-grid;
  grid-template-columns: 73px 73px 73px 73px;
  grid-template-rows: 73px 73px 73px 73px 730px;
  /* grid-template-areas: "box box box box" "box box box box" "box box box box" "space space space space" "loop loop loop loop"; */
  justify-items: center;
  align-items: center;
  grid-gap: 12px;
  
}

.container .body .section-right {
  display: inline-grid;
  grid-template-columns: 140px 140px 140px 140px;
  grid-template-rows: 140px 140px 140px 140px;
  justify-items: center;
  align-items: center;
  grid-gap: 12px;
  justify-content: center;
}

.container .body .section-left .space {
  grid-column: 1 / span 4;
}

/* .container .body .section-left .loop {
  color: #E8E7E7;
} */

/* .container .body .section-left .loop select {
  height: 34px;
  display: block;
} */

.key-pad {
  background: #E8E7E7;
  border-radius: 12px;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  text-transform: lowercase;
}

.key-pad>h3 {
  margin: 5px;
  color: #282828;
}

.orange {
  border: 2px solid #FF670E;
}

.blue {
  border: 2px solid #33A0E1;
}

.yellow {
  border: 2px solid #FFCC00;
}

.space {
  border: 2px solid #ff4b3e;
}

.footer {
  text-align: center;
  justify-items: center;
  align-items: center;
}

.footer a, .footer a:visited, .footer a:hover, .footer a:focus {
  text-decoration: none;
  color: #FF670E;
}