:root {
  --twitch-bg-color: #6441a4;
  --twitch-text-color: rgb(240, 236, 236);
}
.card-dark {
  background-color: rgba(189, 189, 189, 0.842);
}
body {
  background-color: rgb(49, 54, 58);
}
.card-deck {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 0.5rem;
}
button:focus {
  outline: 0;
}

.navbar .dropdown-menu .form-control {
  width: 200px;
}

.btn-twitch {
  color: var(--twitch-text-color);
  background-color: var(--twitch-bg-color);
  border-color: var(--twitch-bg-color);
  width: 50%;
}
.parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  /* grid-template-rows: repeat(13, 2fr); */
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  background-color: var(--secondary-bg-color);
}
.parent-sub {
  display: grid;
  grid-template-columns: 15% 50%;
  grid-template-rows: auto auto auto auto auto auto;
  grid-column-gap: 2px;
  grid-row-gap: 2px;
}
.div-left {
  grid-area: 1 / 1 / 2 / 2;
}
.div-right {
  grid-area: 1 / 1 / 2 / 2;
}
.div0 {
  grid-area: 1 / 1 / 2 / 2;
}
.title {
  grid-area: 1 / 1 / 2 / 14;
  margin-top: 50px;
}
.sidebar {
  grid-area: 2 / 1 / 14 / 4;
}
.main {
  grid-area: 2 / 4 / 12 / 14;
  padding: 0px 10px 10px 10px;
}
.comments-section {
  grid-area: 14 / 4 / 14 / 14;
  padding: 0px 10px 10px 10px;
}
.full {
  grid-area: 2 / 2 / 11 / 13;
}
.footer {
  grid-area: 13 / 1 / 14 / 14;
}
.subarea1 {
  grid-area: 1 / 2 / 14 / 13;
}
.content {
  background-color: rgba(231, 231, 231, 0.794);
  padding: 20px;
  box-shadow: -2px -2px 8px 8px var(--shadows-color);
  min-height: 70vh;
}