body {
  padding: 0;
  margin: 0;
  background-size: cover;
  font-family: Tahoma;
  user-select: none;
  -webkit-user-select: none; }

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0); }
  40% {
    transform: translateY(-30px); }
  60% {
    transform: translateY(-15px); } }

@keyframes spin {
  100% {
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg); } }

.col-20, .col-60 {
  display: flex;
  flex-wrap: wrap; }

.col-20 {
  width: 20%; }

.col-60 {
  width: 60%; }

.col-row {
  display: flex;
  flex-wrap: wrap;
  width: 100%; }

.j-c-center {
  justify-content: center; }

.a-i-center {
  align-items: center; }

.undoBtn {
  display: flex;
  color: black;
  text-decoration: none;
  border: 3px solid black;
  width: 25px;
  height: 16px;
  font-size: 14px;
  justify-content: center;
  align-items: center;
  position: relative;
  transition: .4s; }
  .undoBtn.active, .undoBtn:hover {
    background-color: black;
    color: white; }
  .undoBtn::before {
    transition: .4s;
    position: absolute;
    content: '';
    left: -25px;
    z-index: 0;
    border: 11px solid transparent;
    border-right: 11px solid black; }

#app {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fbd100; }
  #app .wrapper {
    width: 320px;
    display: flex;
    flex-direction: column;
    align-items: center; }
    #app .wrapper .title, #app .wrapper .host_message {
      color: black;
      text-align: center;
      font-size: 18px;
      animation-duration: 1s;
      animation-iteration-count: 2; }
      #app .wrapper .title.error, #app .wrapper .host_message.error {
        animation-name: bounce;
        animation-timing-function: ease; }
    #app .wrapper .password {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin: 25px auto;
      width: 100%; }
      #app .wrapper .password .password_char {
        width: 16px;
        height: 16px;
        border: 2px solid black;
        margin: 5px;
        border-radius: 50%;
        transition: .4s; }
        #app .wrapper .password .password_char.active {
          background-color: black; }
    #app .wrapper .keyboard {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around; }
      #app .wrapper .keyboard .keyboard__button {
        width: 80px;
        height: 80px;
        border: 2px solid black;
        margin-bottom: 12px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        color: black;
        cursor: pointer;
        transition: .4s; }
        #app .wrapper .keyboard .keyboard__button.empty {
          visibility: hidden;
          pointer-events: none; }
        #app .wrapper .keyboard .keyboard__button.unbordered {
          border: none; }
        #app .wrapper .keyboard .keyboard__button.active {
          background-color: black;
          color: white; }
        #app .wrapper .keyboard .keyboard__button:hover {
          background-color: black;
          color: white; }
        #app .wrapper .keyboard .keyboard__button p {
          font-size: 30px;
          padding: 0;
          margin: 0; }
        #app .wrapper .keyboard .keyboard__button span {
          font-size: 14px;
          text-transform: uppercase; }