body {
  display:            flex;
  flex-flow:          row nowrap;
  justify-content:    center; /* horz hold */
  align-items:        center; /* vert hold */

  height:             100vh;
  margin:             0 auto;
  font:               16px/1.5em sans-serif;
  background-color:   #fafbfc;
}

#no-js { display:block; padding:2em; }
#login, #logout { display:none; }

.fade-out {
  visibility: hidden;
  opacity:    0;
  transition: visibility 0.5s 3s, opacity 0.5s linear;
}

section {
  display:          relative;
  border:           1px solid #ddd;
  border-radius:    3px;
  background-color: white;
}

fieldset {
  display:            flex;
  flex-flow:          column nowrap;
  justify-content:    center;
  align-items:        center;

  margin:   0;
  padding:  2em;
  border:   none;
}

input, button {
  display:      block;
  width:        250px;
  box-sizing:   content-box;
  border:       1px solid #ccc;
  font-size:    16px;
  padding:      3px 5px;
}
button {
  border-radius:    0.25em;
  color:            #84898e;
  background-image: linear-gradient(-180deg,#fafbfc 0%,#eff3f6 90%);
  font-weight:      600;
  cursor:           pointer;
  text-transform:   uppercase;
}
button:hover {
  color:                #44494e;
  background-color:     #e6ebf1;
  background-image:     linear-gradient(-180deg,#f0f3f6 0%,#e6ebf1 90%);
  background-position:  -0.5em;
  border-color:         rgba(27,31,35,0.35);
}

#login { position:relative; }
#login input { margin-bottom:1em; }
#login p {
  display:        block;
  position:       absolute;
  top:            100%;
  left:           0;
  width:          260px; /* Including 10px from padding/borders above */
  margin-top:     1em;
  padding:        2em;
  border:         1px solid #ddd;
  border-radius:  3px;
  background:     white;
  text-align:     center;
}