html {
  background: url(pub/p_library_hero.png) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-color: #000000;
}

#ornament {
  float: right;
}

@-webkit-keyframes color-flash {
  from { color: #2BB673; }
  to { color: #F1DAC4; }
}
@-moz-keyframes color-flash {
  from { color: #2BB673; }
  to { color: #F1DAC4; }
}
@keyframes color-flash {
  from { color: #2BB673; }
  to { color: #F1DAC4; }
}

@-webkit-keyframes error-flash {
  from { color: #E74C3C; }
  to { color: #F1DAC4; }
}
@-moz-keyframes error-flash {
  from { color: #E74C3C; }
  to { color: #F1DAC4; }
}
@keyframes error-flash {
  from { color: #E74C3C; }
  to { color: #F1DAC4; }
}

#message_p {
  color: #F1DAC4;
  -webkit-animation: color-flash 1s ease-in-out 0.5s 2;
  -moz-animation: color-flash 1s ease-in-out 0.5s 2;
  -o-animation: color-flash 1s ease-in-out 0.5s 2;
  animation: color-flash 1s ease-in-out 0.5s 2;
}

#error_p {
  color: #F1DAC4;
  -webkit-animation: error-flash 1s ease-in-out 0.5s 2;
  -moz-animation: error-flash 1s ease-in-out 0.5s 2;
  -o-animation: error-flash 1s ease-in-out 0.5s 2;
  animation: error-flash 1s ease-in-out 0.5s 2;
}

#yes_key_input {
  width: 17em;
  border: 4px solid #9F9FE1;
  margin-top: 27px;
  font-size: 1.5em;
  color: #222222;
  background-color: #F1DAC4;
}

#yes_key_input:focus {
  border: 4px solid #4B4E6D;
}

#yes_key_input:hover {
  border: 4px solid #84DCC6;
}

#yes_button {
  width: 460px;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin-top: 22px;
  cursor: pointer; 
  background-color: #9F9FE1;
  font-size: 1em;
}

#yes_button:hover {
  background-color: #84DCC6;
}