style.css

body {
  font-size: 3rem;
}

h1 {
  font-size: 8rem;
}

.row {
  margin-bottom: 30px;
}

.streams-container {
  padding-left: 10px;
}

.streams {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
}

.stream {
  flex: 1 1 100%;
  display: flex;
  margin-bottom: 100px;
  opacity: 0.5;
}

.stream.live {
  opacity: 1;
}

.stream > * {
  flex: 1;
}

.icon {
  flex: 1;
  margin-right: 20px;
}

.icon img {
  width: 250px;
}

.name {
  flex: 2;
}

.status {
  flex: 2;
}

.game {
  font-weight: bold;
}

.game-status {
  font-style: italic;
}

footer {
  text-align: center;
}

@media (min-width: 1000px) {
  body {
    font-size: 2rem;
  }

  h1 {
    font-size: 5rem;
  }

  .icon img {
    width: 100px;
  }

  .name {
    flex: 2;
  }

  .status {
    flex: 4;
  }
}