html, body {
  font-family: 'Varela', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  height: auto;
  width: 100%;
  background: white;
  color: white;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 1%;
  width: 854px;
  height: 598px;
  border: 2px solid #FDDBC9;
  border-radius: 35px;
  background: #FDDBC9;
}

.key-container {
  display: grid;
  grid-template-rows: repeat(7, auto);
  border: 1px solid #A87961;
  box-shadow: inset 0px 2px 2px 0px #A87961, inset 2px 0px 2px 0px #A87961, inset -2px 2px 2px 0px #A87961, inset 0px -2px 2px 0px #A87961;
  width: 780px;
  height: 330px;
  margin: 3.5% 0 0 0;
  border-radius: 12px;
}

.row1 {
  display: flex;
  justify-content: space-around;
  margin: 1% 0.5% 0 0.5%;
}

.row2, .row3, .row4, .row5 {
  display: flex;
  justify-content: space-around;
  margin: 0 0.5% 0 0.5%;
}

.row6 {
  display: flex;
  justify-content: space-around;
  margin: 0 0.5% 0% 0.5%;
}

.f-keys {
  font-size: 0.1em;
  letter-spacing: -0.05em;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  background: #202124;
  border-radius: 5px;
  border: 2px solid black;
  padding: 0;
  height: 23px;
  width: 48px;
}

.touchID {
  width: 23px;
  border-radius: 5px;
}

.esc {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 0.7em;
}

.esc > span:first-of-type {
  margin: 0 0 0 4%;
}

.square-key-cont {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 2px solid black;
  background: #202124;
  height: 45px;
  width: 45px;
  border-radius: 5px;
  font-size: 0.9em;
}

.square-content {
  height: 100%;
}

.delete {
  font-size: 0.7em;
  justify-content: flex-end;
  align-items: flex-end;
  width: 70px;
}

.delete > span {
  margin: 0 4% 4% 0;
}

.row3 > div, .row4 > div, .row5 > div, .row6 > div {
  justify-content: center;
}

.tab:first-of-type {
  align-items: flex-start;
  justify-content: flex-end;
  width: 70px;
}

.tab > span {
  margin: 0 0 4% 4%;
  font-size: 0.7em;
}

.row4 > .caps {
  align-items: flex-start;
  width: 82px;
}

.return {
  font-size: 0.7em;
  justify-content: flex-end !important;
  align-items: flex-end;
  width: 82px;
}

.return > span:first-of-type {
  margin: 0 4% 4% 0;
}

.lock {
  margin: 0 0 4% 4%;
  font-size: 0.7em;
}

.period {
  margin: 0 0 11% 4%;
}

.shift:first-of-type {
  width: 110px;
  font-size: 0.7em;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.shift:first-of-type > span {
  margin: 0 0 4% 4%;
}

.shift:last-of-type {
  width: 110px;
  font-size: 0.7em;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.shift:last-of-type > span {
  margin: 0 4% 4% 0;
}

.row6 > .fn {
  font-size: 0.7em;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  width: 45px;
}

.fn > span {
  margin: 0 0 4% 6%;
}

.ctrl {
  margin-top: 20%;
  font-size: 0.7em;
}

.cmd {
  width: 55px;
}

.spacebar {
  width: 260px;
}

.down-arrow {
  transform: rotate(180deg);
}

.trackpad {
  margin: 1% 0;
  width: 320px;
  height: 220px;
  border: 1px solid #9F6E57;
  border-radius: 10px;
}