@import url("https://fonts.googleapis.com/css?family=Lobster");
@import url("https://fonts.googleapis.com/css?family=Bungee");
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  background: #1C6EA4;
  background: -webkit-linear-gradient(left, #1C6EA4 0%, #2388CB 50%, #144E75 100%);
  background: -webkit-gradient(linear, left top, right top, from(#1C6EA4), color-stop(50%, #2388CB), to(#144E75));
  background: -o-linear-gradient(left, #1C6EA4 0%, #2388CB 50%, #144E75 100%);
  background: linear-gradient(to right, #1C6EA4 0%, #2388CB 50%, #144E75 100%);
  font-family: "Lobster", LtBrown, serif;
}

.twitch-logo {
  text-align: center;
  margin-top: 20px;
}

.twitch-logo img {
  width: 500px;
}

.hidden {
  display: none;
}

.title {
  text-align: center;
  font-size: 3em;
}

.content {
  text-align: center;
}

.buttons {
  text-align: center;
  margin-bottom: 5px;
}

.buttons .btn {
  color: white;
  font-size: 21px;
  line-height: 21px;
  padding: 15px;
  border-radius: 9px;
  font-family: 'Bungee', LtBrown, serif;
  font-weight: normal;
  text-decoration: none;
  font-style: normal;
  text-transform: none;
  background-image: -webkit-gradient(linear, left top, right top, from(#1c6ea4), color-stop(50%, #2388cb), to(#144e75));
  background-image: -webkit-linear-gradient(left, #1c6ea4 0%, #2388cb 50%, #144e75 100%);
  background-image: -o-linear-gradient(left, #1c6ea4 0%, #2388cb 50%, #144e75 100%);
  background-image: linear-gradient(to right, #1c6ea4 0%, #2388cb 50%, #144e75 100%);
  border: 2px solid #1c6ea4;
  display: inline-block;
}

.buttons .btn:hover {
  background: #6441a5;
  cursor: pointer;
}

.buttons .active {
  background: #6441a5;
}

.search {
  text-align: center;
  margin: 10px;
}

.search input {
  height: 30px;
  width: 300px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-color: #144E75;
  border-radius: 6px;
}

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.container a,
.container a:active,
.container a:hover,
.container a:visited {
  color: #0f1bbb;
}

.container .content {
  border: 2px solid #4A20D4;
  width: 500px;
  height: auto;
}

.container .content:hover {
  -webkit-box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.82);
  box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.82);
}

.container .content a {
  text-decoration: none;
  display: inline-block;
  margin-top: 5px;
}

.container .content a:hover {
  cursor: pointer;
}

.container .content img {
  width: 68px;
  height: 68px;
}

.container .content .logo img {
  float: left;
}

.container .content .online-status-logo img {
  float: right;
}

.container .content .offline-status-logo img {
  float: right;
}

.container .content .status {
  margin-bottom: 0;
}

.container .online {
  background-color: #44D449;
  -ms-flex-order: -1;
  order: -1;
}

.container .offline {
  background-color: #D44D24;
}

@media screen and (max-width: 500px) {
  body {
    margin: 0;
  }
  .twitch-logo img {
    width: 350px;
  }
  .container .content {
    width: 350px;
  }
}

@media screen and (max-width: 359px) {
  .twitch-logo img {
    width: 300px;
  }
  .buttons .btn {
    padding: 10px;
  }
  .search input {
    width: 250px;
  }
  .container .content {
    width: 300px;
  }
}