:root {
  --col-1: #990000;
  --col-2: #f77e21;
  --col-3: #f24c4c;
  --col-4: #ffcd38;
  --col-5: #ffee63;
}

.col-1 {
  background-color: var(--col-1);
}
.col-2 {
  background-color: var(--col-2);
}
.col-3 {
  background-color: var(--col-3);
}
.col-4 {
  background-color: var(--col-4);
}
.col-5 {
  background-color: var(--col-5);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.title {
  margin-bottom: 4em;
}
.keyboard {
  display: flex;
  flex-direction: column;
}
.row {
  display: flex;
  list-style: none;
}

li {
  background-color: antiquewhite;
  height: 3em;
  width: 3em;
  color: rgba(0, 0, 0, 0.7);
  border-radius: 0.4em;
  line-height: 3em;
  margin: 0.4em;
  transition: 0.3s;
  text-align: center;
  font-size: 1em;
  text-transform: uppercase;
}

li:hover {
  cursor: pointer;
  background-color: #000000;
  color: var(--col-4);
  border-radius: var(--col-2);
  border-radius: 0.4em;
  border: 2px solid var(--col-2);
}

#back,
#tab {
  width: 5em;
}
#enter,
#caps {
  width: 6em;
}

#left-shift,
#right-shift {
  width: 8em;
}

.selected {
  animation: vibrate-1 0.3s linear infinite both;
}

/* ----------------------------------------------
 * Generated by Animista on 2022-7-18 15:46:9
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation vibrate-1
 * ----------------------------------------
 */

@keyframes vibrate-1 {
  0% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-2px, 2px);
    transform: translate(-2px, 2px);
  }
  40% {
    -webkit-transform: translate(-2px, -2px);
    transform: translate(-2px, -2px);
  }
  60% {
    -webkit-transform: translate(2px, 2px);
    transform: translate(2px, 2px);
  }
  80% {
    -webkit-transform: translate(2px, -2px);
    transform: translate(2px, -2px);
  }
  100% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
}