.cangjieKey {
  color: #e600e6;
}

.keyboard {
  display: grid;
  grid-template-columns: repeat(58, 8px);
  grid-template-rows: repeat(5, 56px);
  grid-column-gap: 8px;
  grid-row-gap: 8px;
}

.key-outline {
  display: flex;
  border-radius: 5px;
  border: solid;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
}

.greyed-out-key {
  display: flex;
  border-radius: 5px;
  border: solid;
  align-items: center;
  justify-content: center;
  color: rgb(220, 220, 220);
  font-size: 16px;
}

.selected-key {
  animation-duration: 0.2s;
  animation-name: pop;
  display: flex;
  border-radius: 5px;
  border: solid;
  align-items: center;
  justify-content: center;
  color: rgb(255, 0, 123);
  border-width: 6px;
  font-size: 24px;
}

.selected-key-fast {
  animation-duration: 0.1s;
  animation-name: pop;
  display: flex;
  border-radius: 5px;
  border: solid;
  align-items: center;
  justify-content: center;
  color: rgb(255, 0, 123);
  border-width: 6px;
  font-size: 24px;
}

.correct-key {
  animation-duration: 0.5s;
  animation-name: expandAndDisappear;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

@keyframes expandAndDisappear {
  from {
    opacity: 1;
    color: rgb(0, 255, 0);
    font-size: 16px;
    border-radius: 0px;
    border: solid;
  }

  to {
    opacity: 0;
    color: rgb(0, 255, 0);
    font-size: 40px;
    border-radius: 10px;
    border: solid;
  }
}

.incorrect-key {
  animation-duration: 0.2s;
  animation-name: red-wiggle;
  animation-iteration-count: infinite;
  display: flex;
  border-radius: 5px;
  border: solid;
  align-items: center;
  justify-content: center;
}

@keyframes red-wiggle {
  from {
    opacity: 1;
    color: rgb(255, 0, 0);
    font-size: 16px;
    border-radius: 5px;
    border: solid;
    padding-left: 0px;
    border-width: 6px;
    font-size: 24px;
  }

  25% {
    opacity: 1;
    color: rgb(255, 0, 0);
    font-size: 16px;
    border-radius: 5px;
    border: solid;
    padding-left: 10px;
    border-width: 6px;
    font-size: 24px;
  }

  50% {
    opacity: 1;
    color: rgb(255, 0, 0);
    font-size: 16px;
    border-radius: 5px;
    border: solid;
    padding: 0px;
    border-width: 6px;
    font-size: 24px;
  }

  75% {
    opacity: 1;
    color: rgb(255, 0, 0);
    font-size: 16px;
    border-radius: 5px;
    border: solid;
    padding-right: 10px;
    border-width: 6px;
    font-size: 24px;
  }

  to {
    opacity: 1;
    color: rgb(255, 0, 0);
    font-size: 16px;
    border-radius: 5px;
    border: solid;
    padding: 0px;
    border-width: 6px;
    font-size: 24px;
  }
}

@keyframes pop {
  from {
    font-size: 16px;
  }

  to {
    color: rgb(255, 0, 123);
    border-width: 6px;
    font-size: 24px;
  }
}

@keyframes pulse {
  from {
    border-radius: 5px;
    border: solid;
    align-items: center;
    justify-content: center;
    color: rgb(0, 0, 0);
    font-size: 16px;
  }

  50% {
    border-radius: 5px;
    border: solid;
    align-items: center;
    justify-content: center;
    color: rgb(0, 123, 255);
    border-width: 6px;
    font-size: 24px;
  }

  to {
    border-radius: 5px;
    border: solid;
    align-items: center;
    justify-content: center;
    color: rgb(0, 0, 0);
    font-size: 16px;
  }
}

@keyframes pulse-12px {
  from {
    border-radius: 5px;
    border: solid;
    align-items: center;
    justify-content: center;
    color: rgb(0, 0, 0);
    font-size: 12px;
  }

  50% {
    border-radius: 5px;
    border: solid;
    align-items: center;
    justify-content: center;
    color: rgb(0, 123, 255);
    border-width: 6px;
    font-size: 14px;
  }

  to {
    border-radius: 5px;
    border: solid;
    align-items: center;
    justify-content: center;
    color: rgb(0, 0, 0);
    font-size: 12px;
  }
}

@keyframes small-pulse {
  from {
    border-radius: 5px;
    border: solid;
    align-items: center;
    justify-content: center;
    color: rgb(0, 0, 0);
    font-size: 16px;
  }

  50% {
    border-radius: 5px;
    border: solid;
    align-items: center;
    justify-content: center;
    color: rgb(0, 123, 255);
    font-size: 20px;
  }

  to {
    border-radius: 5px;
    border: solid;
    align-items: center;
    justify-content: center;
    color: rgb(0, 0, 0);
    font-size: 16px;
  }
}

@keyframes small-pulse-pure-css {
  from {
  }

  50% {
    color: rgb(0, 123, 255);
    font-size: 14px;
  }

  to {
  }
}

@keyframes small-pulse-svg {
  from {
    stroke-opacity: 0;
  }

  50% {
    stroke-opacity: 1;
    stroke-width: 2px;
    stroke: #ff00ff;
    fill: #ff00ff;
  }

  to {
    stroke-opacity: 0;
  }
}

/*
 * Useful for synchronizing pulses. Because of how the VDOM won't actually
 * regenerate SVG nodes, but rather just edit them, if we e.g. have one thing
 * that is pulsing and then we want another new thing to also pulse, they will
 * by default be unsynchronized. We could use the Web Animations API, but
 * that's hard to use from within Elm. So instead we use this new class so that
 * when we have one object pulsing and another new object also needs to start
 * pulsing, we switch both of them to use a new class at the same time, which
 * will reset both pulses to be synchronized.
 */
@keyframes small-pulse-svg-2 {
  from {
    stroke-opacity: 0;
  }

  50% {
    stroke-opacity: 1;
    stroke-width: 2px;
    stroke: #ff00ff;
    fill: #ff00ff;
  }

  to {
    stroke-opacity: 0;
  }
}

.pulsing-stroke {
  animation-duration: 1s;
  animation-name: small-pulse-svg;
  animation-iteration-count: infinite;
}

/*
 * See small-pulse-svg-2 for why this exists. If we just reused small-pulse-svg,
 * we wouldn't get a new animation and therefore wouldn't get the synchronization
 * we'd like.
 */
.pulsing-stroke-2 {
  animation-duration: 1s;
  animation-name: small-pulse-svg-2;
  animation-iteration-count: infinite;
}

.pulsing-button-pure-css {
  animation-duration: 1s;
  animation-name: small-pulse-pure-css;
  animation-iteration-count: infinite;
}

.clickable-button {
  animation-duration: 1s;
  animation-name: small-pulse;
  animation-iteration-count: infinite;
}

.clickable-button:hover {
  border-radius: 5px;
  border: solid;
  color: rgb(255, 0, 123);
  cursor: pointer;
}

.static-clickable-button {
  border-radius: 5px;
  border: solid;
  align-items: center;
  justify-content: center;
  color: rgb(0, 0, 0);
  font-size: 16px;
}

.static-clickable-button:hover {
  border-radius: 5px;
  border: solid;
  color: rgb(255, 0, 123);
  cursor: pointer;
}

.indicated-key {
  display: flex;
  animation-duration: 1s;
  animation-name: pulse;
  animation-iteration-count: infinite;
  cursor: pointer;
}

.indicated-button {
  animation-duration: 1s;
  animation-name: pulse-12px;
  animation-iteration-count: infinite;
}

.normal-key {
  grid-column-start: span 4;
}

.tab-key {
  grid-column-start: span 6;
}

.caps-lock {
  grid-column-start: span 8;
}

.enter-key {
  grid-column-start: span 6;
}

.left-shift {
  grid-column-start: span 10;
}

.right-shift {
  grid-column-start: span 8;
}

.left-ctrl {
  grid-column-start: span 4;
}

.space {
  grid-column-start: span 18;
}

.backspace {
  grid-column-start: span 6;
}

.container {
  display: grid;
  grid-template-columns: repeat(1, auto);
  justify-items: center;
  align-items: center;
  grid-template-rows: repeat(3, minmax(50px, auto));
  grid-column-gap: 8px;
  grid-row-gap: 8px;
}

.instruction-box {
  height: 200px;
}

.action-box {
  height: 200px;
}

.action-box-expandable {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-items: center;
  align-items: center;
  grid-column-gap: 8px;
  grid-row-gap: 8px;
}

.container-element {
  max-width: 800px;
  animation-duration: 2s;
  animation-name: fade-in;
  animation-fill-mode: forwards;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.pure-button:hover {
  background-image: none;
  background-color: rgba(0,0,0,.05);
}

.normal-button:hover {
  background-color: #eee;
}

.normal-button:disabled {
  cursor: not-allowed;
}

.normal-button {
  background-color: white;
  border: solid;
  border-width: 1px;
  border-radius: 10px;
  border-color:#ddd;
  padding: 5px 20px;
  cursor: pointer;
}

.normal-button-transparent:hover {
  background-color: white;
  color: black;
}

.normal-button-transparent {
  background-color: transparent;
  color: white;
  border: solid;
  border-width: 1px;
  border-radius: 10px;
  border-color:#ddd;
  padding: 5px 20px;
  cursor: pointer;
}

@keyframes loadInAnimateKeyframes {
   0% {
      transform: translateY(10px);
      opacity: 0;
   }
   100% {
      transform: translateY(0px);
      opacity: 1;
   }
} 

.animatedLoadInElement {
  animation-name: loadInAnimateKeyframes;
  animation-duration: 1s;
  animation-fill-mode: both;
}