* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  padding: 0 3%;
  background-color: rgb(221, 225, 231);
}

.container {
  width: 100%;
  max-width: 1200px;
}

.container-fluid {
  width: 100%;
}

.row {
  display: grid;
  justify-content: center;
  gap: 10px;
  grid-template-rows: max-content;
}

.row--0 {
  grid-template-columns: repeat(13,5.7%) 1fr;
}

.row--1 {
  grid-template-columns: 0.7fr  repeat(12, 5.7%) 0.87fr;
  
}

.row--2 {
  grid-template-columns: 0.65fr repeat(11, 5.7%) 1fr;
}

.row--3 {
  grid-template-columns: 0.71fr repeat(10, 5.7%) 1fr;
}

.row--4 {
  grid-template-columns: 1fr 0.9fr 1fr 5.3fr 1fr 0.75fr 0.75fr 1.3fr;
}

.keyboard {
  padding: 3%;
  background-color: rgb(221, 225, 231);
  border-radius: 15px;
  box-shadow: 3px 3px 8px rgba(199, 199, 199, 0.98),
    -3px -3px 8px rgba(246, 246, 246, 0.912);
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -ms-border-radius: 15px;
  -o-border-radius: 15px;
}

.alphanumeric {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(5, max-content);
  gap: 10px;
}

.key {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3px;
  font-size: 1.2rem;
  border: none;
  padding: 10px;
  overflow: hidden;
  background-color: rgb(221, 225, 231);
  color: #888888;
  border-radius: 5px;
  box-shadow: 2px 2px 5px rgba(199, 199, 199, 0.98),    -2px -2px 6px rgba(246, 246, 246, 0.912),    inset 1px 1px 2px rgba(246, 246, 246, 0.912),    inset -1px -1px 2px rgba(199, 199, 199, 0.98);
  cursor: pointer;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  transition: all 0.1s;
  -webkit-transition: all 0.1s;
  -moz-transition: all 0.1s;
  -ms-transition: all 0.1s;
  -o-transition: all 0.1s;
}

.key-square{
  aspect-ratio: 1/1;
}

.key:active {
  box-shadow: 1px 1px 2px rgba(246, 246, 246, 0.912),
    -1px -1px 2px rgba(199, 199, 199, 0.98),
    inset 2px 2px 5px rgba(199, 199, 199, 0.98),
    inset -2px -2px 6px rgba(246, 246, 246, 0.912);
  color: rgba(98, 98, 98, 0.68);
  font-size: 1.1rem;
}

.fa-level-down-alt{
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
}
@media  screen and (max-width: 992px) {
  .row , .alphanumeric{
    gap: 8px;
  }
  .key{
    font-size: 1rem;
  }
  .key:active{
    font-size: 0.9rem;
  }
  img{
    width: 1.4rem;
  }
}

@media  screen and (max-width: 768px) {
  .row , .alphanumeric{
    gap: 6px;
  }
  .key{
    font-size: 0.8rem;
  }
  .key:active{
    font-size: 0.8rem;
  }
  img{
    width: 1.2rem;
  }
}

@media  screen and (max-width: 576px) {
  .row , .alphanumeric{
    gap: 4px;
  }
  .key{
    font-size: 0.6rem;
  }
  .key:active{
    font-size: 0.5rem;
  }
  img{
    width: 0.8rem;
  }
}