html, body {
  overflow: hidden;
  font-size: 14px;
  background-color: #e8edee;
}

#header {
  padding: 0.15rem;
}

#controls {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.5rem;
}

#secret {
  width: -webkit-fill-available;
  height: 2rem;

  border: none;
  outline: none;
  padding: 0 0.5rem;
  background-color: #ccd2df;
}

#icon {
  float: right;
  position: relative;
  z-index: 2;
  margin-left: -2.5rem;
 
  display: flex;
  align-items: center;
  height: 2rem;
  border: none;
  background: none;
}

@keyframes movein {
  from { margin-top: 10rem; }
  to   { margin-top: 1rem; }
}

@keyframes moveout {
  from { margin-top: 1rem; }
  to   { bottom: 10rem; }
}

#message {
  display: flex;
  justify-content: center;
  margin-top: 1rem; 
  
  font-size: 15px;
  font-style: italic;
  animation: movein 0.5s ease-in-out;
}

#message.error {
  color: white;
  background-color: #de5a5a;
}

#message.success {
  color: white;
  background-color: #53c351;
}

#blackout {
  display:  none;
  width:    100%;
  height:   100%; 
  position: absolute;
  top:      0;
  left:     0; 
  z-index:  100; 

  background-color: black;
  filter: alpha(opacity=30);
  opacity: 0.3;
}

#blackout > #spinner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#blackout.active {
  display: block;
}