body {
  
  background: -webkit-gradient(linear, left top, left bottom, from(#fd9), to(#0f9)) fixed;
  min-height: 100vh;
  font-family: "Cabin", sans-serif;
  background-repeat: no-repeat;
background-attachment: fixed;
}

#output {
  margin: 2rem auto;
  padding: 2rem;
 
  background: rgba(51, 51, 51, 0.8);
  border-radius: 15px;
}
#output .search {
  display: flex;
  align-items: center;
  padding: 0.25rem 1rem;
  margin-bottom: 15px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 999px;
  transition: 0.3s all;
  color: #fff;
}
#output .search.active {
  background: rgba(255, 255, 255, 0.9);
  outline: none;
  color: #444;
}
#output .search input[type=text] {
  flex-grow: 1;
  padding-left: 0.5rem;
  color: inherit;
  font-size: 1.25rem;
  background: transparent;
  border: none;
}
#output .search input[type=text]:focus, #output .search input[type=text]:active {
  outline: none;
}
#output .row.friend {
  display: flex;
  align-items: center;
  padding: 1rem;
  color: white;
  cursor: pointer;
}
#output .row.friend:last-child {
  padding-bottom: 0;
}
#output .row.friend img {
  display: inline;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
}
#output .row.friend .title {
  flex-grow: 1;
  padding: 0 0.4rem;
  display: inline;
  font-size: 1.1rem;
}
#output .row.friend .indicator {
  min-width: 10px;
  min-height: 10px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 999px;
}
#output .row.friend .indicator.online {
  background: #0f9;
}
#output .row.friend .indicator.away {
  background: #fc0;
}