/* Classes */
.keyboard {
  display: grid;
  grid-template-areas:
    "keyboard-cluster keyboard-cluster keyboard-cluster"
    "arrow-cluster nav-cluster numpad-cluster"
    "media-cluster media-cluster numpad-cluster";
  width: fit-content;
  height: fit-content;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.key-cluster {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  width: fit-content;
  height: fit-content;
  padding: clamp(0.5rem, 1.5vw, 1.1rem) clamp(0.9rem, 1.5vw, 1.1rem);
  margin: clamp(0.1rem, 0.5vw, 0.5rem);
  border: 0.1rem solid var(--side-grey);
  border-radius: 1vw;
}

/* ID */
#keyboard-cluster {
  grid-area: keyboard-cluster;
}

#arrow-cluster {
  grid-area: arrow-cluster;
  padding: clamp(0.1rem, 0.6vw, 0.75rem) clamp(0.75rem, 1.1vw, 2rem);
}

#nav-cluster {
  grid-area: nav-cluster;
  padding: clamp(0.1rem, 0.75vw, 0.75rem) clamp(0.75rem, 1.1vw, 2rem);
}

#media-cluster {
  grid-area: media-cluster;
  padding: clamp(0.1rem, 0.75vw, 0.75rem) clamp(0.5rem, 0.48vw, 2rem);
}

#numpad-cluster {
  grid-area: numpad-cluster;
  padding: clamp(0.1rem, 1vw, 0.82rem) clamp(1rem, 1.8vw, 2rem);
}

#MetaLeft,
#MetaRight {
  padding: clamp(0.075rem, 0, 1rem) clamp(0, 0.25vw, 1rem);
  font-size: clamp(0.5rem, 1.3vw, 1.4rem);
  font-weight: normal;
}

#Fn {
  background-color: rgba(0, 0, 0, 0.25);
}

#NumLock {
  padding: 0.4vw 0;
  font-size: clamp(0.4rem, 0.8vw, 1rem);
}