* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
}
body {
  font-family: arial;
  line-height: 1;
  color: #fff;
  overflow: hidden;
}
.main-container {
  height: 100vh;
  display: grid;
  grid-template-columns: 30rem 1fr;
  grid-template-rows: 8rem 1fr;
}
/* ***************** */
/* Reusbale component Part */
/* ****************** */
.grid {
  display: grid;
  align-items: center;
}
.grid--3-col {
  grid-template-columns: repeat(3, 1fr);
}
.grid--4-col {
  grid-template-columns: repeat(4, 1fr);
}
.grid--space {
  row-gap: 3.2rem;
  column-gap: 1.6rem;
}
.flex-box {
  display: flex;
  align-items: center;
}
.reversef {
  display: flex;
  flex-direction: column;
}
.flex--end {
  justify-content: flex-end;
}
.flex--center {
  justify-content: center;
}
.flex--start {
  justify-content: flex-start;
}
.fgap--2 {
  gap: 2.4rem;
}
.fgap--1 {
  gap: 1.2rem;
}
.flex-align-start {
  align-items: flex-start;
}
.cl-red {
  color: red;
}
.cl-gray {
  color: #888;
}
.cl-white {
  color: #fff;
}
.btn {
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ***************** */
/* Header Part */
/* ****************** */
.youtube-header {
  background-color: rgba(34, 34, 34);
  grid-column: 1 / -1;
  /* height: 8rem; */
  /* display: flex;
  align-items: center; */
  padding: 0 3.2rem;
}
.you-icon {
  width: 3.2rem;
  height: 3.2rem;
}
.youtube-name {
  font-size: 2.4rem;
  letter-spacing: -2.5px;
}
.input-box {
  padding: 0.5px;
  background-color: rgba(136, 136, 136, 0.2);
  flex-grow: 1;
}
.search-bar {
  flex-grow: 1;
  padding: 0.8rem 1.2rem;
  font-size: 1.8rem;
  background-color: #111;
  border: none;
  outline: none;
  color: #fff;
}
.search-icon {
  padding: 0 1.2rem;
}
.search-icon .you-icon,
.mic-icon {
  width: 2.4rem;
  height: 2.4rem;
}
.mic-btn {
  background-color: rgba(17, 17, 17, 0.6);
  border-radius: 300px;
  padding: 0.8rem;
}
.account-icon {
  width: 2.4rem;
  height: 2.4rem;
  cursor: pointer;
}
.account {
  width: 3.2rem;
  height: 3.2rem;
}
/* ***************** */
/* Youtube aside part */
/* ****************** */
.youtube-aside {
  background-color: rgba(34, 34, 34);
  overflow-y: scroll;
  overflow-x: hidden;
}
/* For scroller */
.youtube-aside::-webkit-scrollbar {
  width: 10px;
  /* color: #111; */
}
.youtube-aside::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}
.youtube-aside::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

/* 
.scroll::-webkit-scrollbar {
    width: 12px;
}

.scroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}

.scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
​
*/
.main-navigation {
  width: 95%;
  list-style: none;
  padding: 1.2rem 0;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.3);
}
.nav:link,
.nav:visited {
  text-decoration: none;
  padding: 1.2rem 0;
}
.nav:hover,
.nav:active {
  background-color: rgba(255, 255, 255, 0.307);
}
.nav-icon {
  display: inline-block;
  padding-left: 3.2rem;
  width: 2.6rem;
  height: 2.6rem;
  color: rgba(255, 255, 255, 0.653);
  stroke: rgba(255, 255, 255, 0.653);
}
.nav-name {
  font-size: 1.8rem;
  color: rgba(255, 255, 255, 0.653);
}
.active {
  background-color: rgba(255, 255, 255, 0.307);
  color: #fff;
}
.side-heading {
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-left: 3.2rem;
  padding-top: 1.6rem;
  font-weight: 600;
  color: #555;
}
.head-part {
  width: 95%;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.3);
}
.head-part .main-navigation {
  width: 100%;
  border: none;
}
.img-box {
  width: 2.6rem;
  height: 2.6rem;
  margin-left: 3.2rem;
}
.channel-avatar {
  display: inline-block;
  border-radius: 50%;
  width: 100%;
}
/* ***************** */
/* Main content part */
/* ****************** */
.main-content {
  background-color: #111;
  overflow-y: scroll;
  position: relative;
}
.main-content::-webkit-scrollbar {
  width: 10px;
}
.main-content::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(124, 124, 124, 0.3);
  border-radius: 10px;
}
.main-content::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
.sticky {
  position: fixed;
  top: 8rem;
  left: 30rem;
  right: 0;
}
.secondary-nav {
  padding: 1.2rem 2.4rem;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.1);
  border-top: 0.5px solid rgba(255, 255, 255, 0.1);
  background-color: rgba(34, 34, 34);
  width: 100%;
  position: relative;
  height: 6rem;
  overflow-x: scroll;
}
.secondary-nav::-webkit-scrollbar {
  height: 5px;
}
.secondary-nav::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(124, 124, 124, 0.867);
  border-radius: 10px;
}
.secondary-nav::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

.slider-nav-list {
  /* alternate Solution */
  position: absolute;
  top: 50%;
  left: 1.6rem;
  transform: translateY(-50%);
  list-style: none;
  /* overflow-x: scroll; */
  padding-right: 1.2rem;
}
.slider-btn {
  padding: 0.4rem 1.2rem;
  border: 1px solid #888;
  border-radius: 100px;
  font-size: 1.4rem;
  cursor: pointer;
  background-color: rgba(136, 136, 136, 0.31);
  color: #fff;
  flex: 0 0 auto;
}
.active-nav {
  background-color: #fff;
  color: #333;
}
.card-container {
  padding: 3.2rem 2.4rem;
  margin-top: 6rem;
}
.thumbnail-img {
  width: 100%;
}
.avatar-size {
  height: 3.2rem;
  width: 3.2rem;
}
.card-info {
  padding: 1.2rem 0;
}
.video-discription {
  padding-top: 0.4rem;
}
.video-name {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 1.2rem;
}
.channel-name,
.video-view {
  font-size: 1.2rem;
  color: #bbb;
}
.channel-name {
  margin-bottom: 0.4rem;
}