body {
  display: flex;
  flex-flow: column nowrap;
  position: absolute;
  height: 150%;
  width: 100%;
}

#login,
#instructions {
  flex: 0 0 auto;
  max-width: 15em;  
  padding: 1em;
}

#login {
  margin: auto auto 0 auto;
  border-radius: 0.5em;
  background-color: white;
}

#instructions {
  height: 25%;
  margin: 1em auto auto auto;
  line-height: 1.5;
  color: #ccc;
}

#instructions a {
  color: #999;
}

form {
	display: flex;
	flex-flow: row wrap;
  justify-content: flex-end;
  align-items: center;
}

#name,
#key {
  flex: 1 1 auto;
  width: 100%;
  margin: 0 0 1em 0;
}

#code,
#options {
  flex: 1 1 auto;
  width: 40%;
  margin: 0;
}

#join {
  flex: 0 1 auto;
  width: 40%;
  margin: 0 0 0 1em;
}

button {
  width: 100%;
}

.message {
  background-color: #f33;
  color: white;
  animation: fadeout 5s;
  opacity: 0;
}

@keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}