@import url(https://fonts.googleapis.com/css?family=Anonymous+Pro);

form {
  text-align: center;
    margin-top: 50px;
}

.pw {
  display: inline-block;
    font-family: 'Anonymous Pro', monospace;
    color: #D8973C;
    appearance: unset;
  margin: 0 auto;
    height: 50px;
    width: 250px;
    font-size: 20px;
    border-radius: 5px;
    background-color: unset;
    border-top: unset;
    border-left: unset;
    border-right: unset;
    border-bottom: 2px solid #9893DA;
}

.pw:hover {
    border-top: unset;
    border-left: unset;
    border-right: unset;
    border-bottom: 5px solid #9893DA;
}
.pw:active {
    border-top: unset;
    border-left: unset;
    border-right: unset;
    border-bottom: 5px solid #9893DA;
}

.submitButton {
    font-size: 15px;
    height: 50px;
    font-family: 'Anonymous Pro', monospace;
    width: 70px;
    border-radius: 5px;
    background-color: #9893DA;
    color: #545E56;
}

.accent {
    color: #9893DA !important;
}

.accent:active {
    color: #9893DA;
}

.centered {
    text-align: center;
    color: #D8973C;
}

.type {
  font-family: 'Anonymous Pro', monospace;
  color:#0000;
  background:
    linear-gradient(-90deg,#D8973C 5px,#0000 0) 10px 0,
    linear-gradient(#D8973C 0 0) 0 0;
  background-size:calc(var(--n)*1ch) 200%;
  -webkit-background-clip:padding-box,text;
  background-clip:padding-box,text;
  background-repeat:no-repeat;
    word-break: break-all;
  animation:
    b .3s infinite steps(1),
    t calc(var(--n)*.1s) steps(var(--n)) forwards;
}
@keyframes t{
  from {background-size:0 200%}
}
@keyframes b{
  50% {background-position:0 -100%,0 0}
}

body {
    margin-top: 3em;
    padding: 3em;
    color: #D8973C;
    font-family: 'Anonymous Pro', monospace;
    background-color: #545E56;
}