.center {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
  text-align: center;
}

#padlock {
  margin-bottom: 20px;
  position: relative;
}

#padlock svg {
  width: 20%;
  min-width: 200px;
  height: auto;
}

#padlock path,
#padlock rect {
  transition: all 1s ease-in-out;
}

#padlock path#shackle {
  stroke: darkred;
  stroke-dasharray: 30;
  stroke-dashoffset: 5;
  fill: none;
}

#padlock rect#body {
  fill: darkred;
}

#padlock.locked path,
#padlock.locked rect {
  animation-iteration-count: 1;
  animation-duration: 1s;
}

#padlock.unlocked path,
#padlock.unlocked rect {
  transition-delay: 1s;
}

#padlock.unlocked path#shackle {
  stroke: darkgreen;
  stroke-dasharray: 20;
}

#padlock.unlocked rect#body {
  fill: darkgreen;
}

@keyframes shackle-locked {
  0% { stroke: darkred; }
  50% { stroke: red; }
  51% { stroke: red; }
  100% { stroke: darkred; }
}

#padlock.invalid path#shackle {
  animation-name: shackle-locked;
  animation-delay: 1s;
}

@keyframes body-locked {
  0% { fill: darkred; }
  50% { fill: red; }
  51% { fill: red; }
  100% { fill: darkred; }
}

#padlock.invalid rect#body {
  animation-name: body-locked;
  animation-delay: 1s;
}

@keyframes padlock-locked {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

#padlock.invalid {
  animation: padlock-locked 1s cubic-bezier(.42,0,.58,1) 1s both;
}

#padlock #keyhole {
  width: 2%;
  min-width: 24px;
  height: 20%;
  border-radius: 1em;
  position: absolute;
  top: 65%;
  left: 50%;
  background-color: white;
  transform: translate(-50%, -50%) rotate(0deg);
  transition: all 1s ease-in-out;
  z-index: 1;
}

#padlock.locked #keyhole {
  transform: translate(-50%, -50%) rotate(0deg);
  transition-delay: 1s;
}

#padlock.unlocked #keyhole {
  transform: translate(-50%, -50%) rotate(360deg);
}

@keyframes locked {
  25% { transform: translate(-50%, -50%) rotate(45deg); }
  50% { transform: translate(-50%, -50%) rotate(0deg); }
  75% { transform: translate(-50%, -50%) rotate(45deg); }
  100% { transform: translate(-50%, -50%) rotate(0deg); }
}

#padlock.invalid #keyhole {
  animation: locked 1s linear;
}

form,
input {
  margin-bottom: 0;
}

input#password {
  border: 0.2em solid darkgrey;
  margin-left: 1.5em;
  width: 30%;
  min-width: 300px;
  transition: all 0.1s ease-in-out;
}

input#password.invalid:focus {
  border: 0.2em solid darkred;
}

input#password.valid:focus {
  border: 0.2em solid darkgreen;
}

i.key {
  display: inline-block;
  position: relative;
  top: 0.5em;
  left: -2em;
  width: 1.5em;
  z-index: -1;
}

i.key::before {
  content: url('data:image/svg+xml,%3Csvg%20id%3D%22key%22%20viewBox%3D%220%200%20500%20500%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M56.629%2C379.2c-14.09%2C14.071-14.09%2C36.975%2C0%2C51.055%20c14.08%2C14.087%2C36.981%2C14.087%2C50.965%2C0l10.177-10.08l42.438%2C42.428c7.257%2C7.268%2C18.888%2C7.268%2C26.155%2C0l63.244-63.244%20c7.268-7.255%2C7.268-18.89%2C0-26.157l-42.429-42.427l75.586-75.682c16.174%2C8.357%2C34.61%2C13.075%2C54.059%2C13.075%20c65.234%2C0%2C118.111-52.869%2C118.111-118.109c0-65.232-52.877-118.111-118.111-118.111c-65.238%2C0-118.11%2C52.879-118.11%2C118.111%20c0%2C19.449%2C4.721%2C37.886%2C13.077%2C54.06L56.629%2C379.2z%20M291.396%2C150.059c0-25.075%2C20.354-45.429%2C45.427-45.429%20c25.076%2C0%2C45.426%2C20.354%2C45.426%2C45.429s-20.35%2C45.426-45.426%2C45.426C311.751%2C195.485%2C291.396%2C175.133%2C291.396%2C150.059z%22%20fill%3D%22%23606c76%22%20%2F%3E%3C%2Fsvg%3E');
}