.splitting .char,
.splitting .whitespace {
  color: transparent;
  
  &::before,
  &::after {
    position: absolute;
    visibility: visible;
    color: black;
    transition: transform .5s cubic-bezier(.2, 0, .2, 1); 
    transition-delay: calc(.1s * var(--char-index));
  }
  
  &::before {
    content: '•';
    text-align: center;
    transform: scale(1);
  }
  &::after {
    content: attr(data-char);
    transform: scale(0);
  }
}

[type="checkbox"]:checked ~ #displaypassword {
  *::after {
    transform: scale(1);
  }
  
  *::before {
    transform: scale(0);
  }
}




/* ---------------------------------- */

.passwordcontainer {
  height: 10vw;
  width: 30vw;
  font-family: monospace;
  font-size: 3vw;
  text-align: center;
  background:#272C2D;
  color:white;
}

#inputpassword {
  font: inherit;
  appearance: none;
  border: none;
  border-radius: 10vw;
  position: absolute;
  top: 0;
  left: 0;
  color: #FFF;
  box-shadow: 0 1vw 6vw rgba(black, 0.03);
  
  &:focus {
    outline: none;
  }
}

#inputpassword, #displaypassword {
  padding: 1vw 5vw;
  width: 95%;
  white-space: nowrap;
  text-align: center
}

#displaypassword {
  pointer-events: none;
  user-select: none;
}

#revealpassword, label {
  cursor: pointer;
  font-size: 2vw;
  position: absolute;
  top: 55%;
  text-align: center;
  left: 0;
  right: 0;
  margin: auto;
}

#revealpassword {
  margin-top: 1.5em; 
}

*, *:before, *:after {
  box-sizing: border-box;
  position: relative;
}