/* FONTS
  font-family: 'Roboto', sans-serif;
  font-family: 'Shrikhand', cursive
*/

/* COLORS
  Teal: rgba(102,150,142,1)
  brownish: #3e2723
  purpleish: #9198e5
*/

body {
  margin: 0px 0px;
  background: linear-gradient(to right, #9198e5 0%, lightblue 30%, lightblue 70%, #9198e5 100%);
  background-size: cover;
  color: #3e2723;
}

.main-container {
  width: 1000px;
  height: 100%;
  margin: 20px auto 0px auto;
  border-color: #3e2723;
  border-style: solid;
  border-width: 2px;
  border-radius: 6px;
}

.title-container {
  text-align: center;
  margin: 30px auto 20px auto;
}
#title {
  font-size: 40px;
  font-family: sans-serif;
}


.keys-container {
  height: auto;
  width: 330px;
  margin: 0px auto 20px auto;
  /* outline-color: darkblue;
  outline-style: solid;
  outline-width: 1px; */
}
.keys-main {
  display: inline-flex;
  height: auto;
  width: auto;
  margin: 0px auto 0px auto;
}
.keys-group-dir {
  margin: 0px 1px 0px 1px;
  display: grid;
  grid-template-columns: 50px 50px 50px;
  grid-template-rows: 20px 50px 50px;
  background-color: #3e2723;
  padding: 6px;
  border-radius: 4px;
}
.keys-item {
  background-color: lightblue;
  outline: 1px solid #3e2723;
  padding: 20px 0px 0px 0px;
  font-size: 14px;
  text-align: center;
  border-radius: 4px;
}
.gap {
  background-color: #3e2723;
}
.ki-title {
  padding: 2px;
  grid-column-start: 1;
  grid-column-end: 4;
}


.buttons-container {
  width: 248px;
  height: auto;
  margin: 0px auto;
  /* outline-color: green;
  outline-style: solid;
  outline-width: 1px; */
}
.buttons-container button {
  font-weight: 600;
  color: black;
  width: 80px;
  height: 44px;
  border-style: solid;
  border-radius: 5px;
  border-width: 2px;
}
#start-btn {
  background-color: lightgreen;
  border-color: green;
}
#pause-btn {
  background-color: rgb(150,190,240);
  border-color: blue;
}
#reset-btn {
  background-color: lightyellow;
  border-color: gold;
}
#start-btn:hover, #pause-btn:hover, #reset-btn:hover {
  background-color: pink;
  border-color: pink;
}



.status-container {
  display: grid;
  font-size: 14px;
  font-weight: bolder;
  margin: 4px auto 4px auto;
  width: 360px;
  height: 50px;
  grid-template-columns: 120px 120px 120px;
  grid-template-rows: 50px;
  /* outline-color: green;
  outline-style: solid;
  outline-width: 1px; */
}
.mode-container {
  margin: 0px auto 0px auto;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  /* outline-color: yellow;
  outline-style: solid;
  outline-width: 1px; */
}
.lastkey-container {
  margin: 0px auto 0px auto;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  /* outline-color: yellow;
  outline-style: solid;
  outline-width: 1px; */
}
#lastkey-label {}
.coords-container {
  margin: 0px auto 0px auto;
  font-family: 'Roboto', sans-serif;
  /* outline-color: yellow;
  outline-style: solid;
  outline-width: 1px; */
}
#coords {
  margin: auto auto auto auto;
  text-align: center;
}



.canvas-container {
  margin: 20px auto 20px auto;
  width: 802px;
  height: 802px;
  /* outline-color: red;
  outline-style: solid;
  outline-width: 1px; */
}
#canvas {
  margin: 0px 0px;
  background-color: lightblue;
  outline-color: #9198e5;
  outline-style: solid;
  outline-width: 2px;
}


footer {
  margin: 20px auto auto auto;
}
.social-container {
  width: 70px;
  height: 70px;
  margin: 0px auto;
}
#git-img {
  height: 70px;
  width: 70px;
}