*,
*::after,
*::before {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
:root {
    --backgroundColor-content : #000000;
    --color-content : #ffffff;
    --backgroundColor-Title : #dc143c;
    --background-animation : #dc143c;
}
body {
  background-color: var(--backgroundColor-content);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.title {
  color: var(--backgroundColor-Title);
  text-transform: uppercase;
  margin-top: 3em;
  margin-bottom: 3em;
  font-size: 1em;
  letter-spacing: 0.3em;
}
.title-panel {
    animation: titleElm 0.6s ease-in-out infinite alternate;
}
.title-panel::before {
    content: "|";
    padding: 2px;
    color: var(--color-content);
}
@keyframes titleElm {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.keyboard {
  display: flex;
  flex-direction: column;
}
.row-box {
  list-style: none;
  display: flex;
}
li {
  height: 3em;
  width: 4em;
  color: var(--backgroundColor-content);
  border-radius: 0.4em;
  line-height: 3em;
  letter-spacing: 1px;
  margin: 0.4em;
  transition: 0.3s;
  text-align: center;
  font-size: 1em;
  font-weight: bold;
  background-color: var(--color-content);
  border: 2px solid #cccccc;
}
#TAB {
  width: 5em;
}
#CAPSLOCK {
  width: 6em;
}
#SHIFT {
  width: 8em;
}
.Space {
  width: 9em;
}
#back {
  width: 5em;
}
#ENTER {
  width: 6em;
}
.animeActive {
    animation: activeKey 320ms ease-in alternate;
}
@keyframes activeKey {
    form {
        opacity: 0.6;
        transform: scale(1.0);
        background-color: var(--color-content);
    }
    to {
        opacity: 1;
        transform: scale(1.2);
        background-color: var(--background-animation);
        border: 4px solid #cccdcdcd;
    }
}