body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(#111, #333);
  user-select: none;
}

#root {
  width: 70%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.channel-container {
  display: flex;
  width: 100%;
}

.channel-tab {
  display: flex;
  justify-content: center;
  flex-grow: 1;
  padding: 8px 0;
  background-color: #333;
  cursor: pointer;
}

.channel-tab:hover {
  filter: brightness(1.2);
}

#DD1969.selected {
  background-color: lightgreen;
}

#VSakuya.selected {
  background-color: royalblue;
}

#Lyushin.selected {
  background-color: SlateBlue;
}

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 100%;
  box-shadow: 0 0 0 2px white;
}

#dplayer {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
  color: white;
  font-family: 'Consolas';
}

@media screen and (max-width: 1024px) {
  #root {
    width: 100%;
  }

  .avatar {
    width: 40px;
    height: 40px;
  }
}