*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
body{
   background-color: hsl(0, 0%, 13%);
   height: 100vh;
}


         /* ------- HEADER ------ */

header{
   display: flex;
   position: fixed;
   z-index: 100;
   background-color:hsl(0, 0%, 16%) ;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   width: 100%;
   height: 55px;
}
.left{
   display: flex;
   margin: 10px 20px;
   align-items: center;
}
#moreBars{
   color: white;
   margin-right: 15px;
   border-radius: 50%;
   padding: 8px;
}
#youtube a{
   display: flex;
   align-items: center;
   cursor: pointer;
   text-decoration: none;
}
#logo{
   margin-right: 3px;
   color: red;
}
h4{
   color: white;
   font-weight:lighter
}
.middle{
   display: flex;
   align-items: center;
   gap: 10px;
}
.middle input{
   border-radius: 50px;
   width: 25vw;
   height: 35px;
   padding: 10px;
   background-color: hsl(0, 0%, 16%);
   border: 1px solid hsl(0, 1%, 28%);
   color: white;
}
#searchButton, #voice{
   color: white;
   cursor: pointer;
   padding: 10px;
   border-radius: 50%;
}
.middle i:hover, #moreBars:hover, .right i:hover{
   background-color: rgb(57, 56, 56);
   cursor: pointer;
}
.right{
   display: flex;
   align-items: center;
   gap: 10px;
   margin-right: 15px;
}
.right button{
   border-radius: 50px;
   width: 100px;
   height: 30px;
   cursor: pointer;
   background-color: hsl(0, 1%, 20%);
   border: none;
   color: white;
}
#notification{
   color:white;
   padding: 10px;
   border-radius: 50%;
}
#profilePic{
   width: 30px;
   height: 30px;
   object-fit: cover;
   border-radius: 50%;
   cursor: pointer;   
}


            /* ------- VIDEO BOX SKELETON ------ */

.mainVideo{
  height: 730px;
  max-width: 1400px;
  transform: translate(60px, 80px);
  display: flex;
  position: relative;
  margin-bottom: 10px;
}
.videoBox{
  height: auto;
  max-width: 1400px;
  position: absolute;
  
}
#myVideo{
  height: 550px;
  width: 1400px;
}
#videoName{
  height: 50px;
  width: 1200px;
  margin-top: 90px;
  margin-left: 0px;
  padding-top: 5px;
  color: white;
  font-weight: bold;
}
.videoInfo{
  height: 50px;
  width: 1400px;
  position: absolute;
  top: 675px;
  left: 0px;
  display: flex;
  justify-content: space-between;
}
.channelInfo{
  height: 50px;
  width: 600px;
  margin-top: 0px;
  margin-left: 0px;
  display: flex;
  position: relative;
}
#channelPic{
  height: 45px;
  width: 45x;
  position: absolute;
  top: 2px;
  left: 0px;
}
.nameNsubs{
  height: 100%;
  width: 200px;
  position: absolute;
  display: flex;
  flex-direction: column;
  top: 0px;
  left: 50px;
}
#channelName{
  height: 20px;
  width: 100%;
}
#subscribers{
  height: 20px;
  width: 100%;
}
#subscribeBtn{
  height: 50px;
  width: 100px;
  position: absolute;
  top: 0px;
  left: 220px;
  border-radius: 25px;
}
.channelButtons{
  width: 500px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 10px;
}
#btn-1{
  height: 25px;
  width: 130px;
}
#btn-2{
  height: 25px;
  width: 80px;
}
#btn-3{
  height: 25px;
  width: 100px;
}
#btn-4{
  height: 25px;
  width: 80px;
}
#btn-1, #btn-2, #btn-3, #btn-4, #btn-5{
  margin: 0;
  height: 100%;
}
#btn-5{
  border: none;
  width: 40px;
  height: 40px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
}



            /* ------- VIDEO BOX STYLING ------ */


#video{
  width: 100%;
  max-width: 1400px;
  height: auto;
  border-radius: 10px;
}

#channelPic img{
  width: 45px;
  height: 45px;
  object-fit: cover;
  border-radius: 50%;
  cursor: pointer;
}

#channelName a{
  text-decoration: none;
  color: white;
  font-weight: bold;
}
#channelName i{
  color: grey;
   margin-left: 6px;
}
small{
   font-size: 11px;
   color: grey;
}
#subscribeBtn button{
  border-radius: 50px;
  width: 100%;
  height: 90%;
  font-weight: bold;
  background-color: hsl(0, 0%, 94%);
  cursor: pointer;
}
#subscribeBtn button:hover{
  background-color: hsl(0, 0%, 74%);
}


            /* ------- VIDEO BUTTONS STYLING ------ */


.rating{
  display: flex;
  overflow: hidden;
  border-radius: 50px;
  font-size: 14px;
  background-color: hsl(0, 0%, 21%);
  height: 40px;
}
.rating button, .shareBtn button, .downloadBtn button, .saveBtn button, .dottsBtn button{
  border: none;
  background-color: hsl(0, 0%, 21%);
  color: white;
  font-weight: bold;
}
.like i, .shareBtn i, .downloadBtn i, .saveBtn i{
  padding-right: 7px;
}
.half{
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
  background-color: hsl(0, 0%, 21%);
  color: white;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
.like{
   white-space: nowrap;
}
.dislike{
border-left: 1px solid #757575 !important;
}

.like:hover:hover, .dislike:hover, #share:hover, #download:hover, #save:hover, #dotts:hover{
  background-color: rgb(78, 78, 78);
}
.shareBtn button, .downloadBtn button, .saveBtn button, .dottsBtn button{
  height: 40px;
  width: 100%;
  border-radius: 50px;
  cursor: pointer;
}



            /* ------- VIDEO LOW SECTION SKELETON ------ */



.lowSection{
  max-width: 1400px;
  height: 215px;
  transform: translate(60px, 80px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
} 
.description{
  width: 1400px;
  height: 100px;
}
.commentsNsortBy{
  width: 270px;
  height: 30px;
  display: flex;
  justify-content: space-between;
}
#sortBy{
  width: 90px;
  height: 40px;
}
#nrComments{
  width: 160px;
  height: 40px;
}
.commentBar{
  width: 1400px;
  height: 45px;
}




            /* ------- VIDEO LOW SECTION STYLING ------ */



.description{
  background-color: hsl(0, 0%, 20%);
  border-radius: 10px;
  padding: 3px 7px;
  cursor: pointer;
}
.description p{
  color: white;
  font-size: 14px;
}
.description p:first-of-type {
  font-weight: bold;
}
.description span#hTags{
  font-size: 13px;
  color: #acacac;
}
.description #more{
  font-weight: bold;
}
.description a{
  text-decoration: none;
  color: hsl(209, 65%, 54%);
}


.commentsNsortBy{
  color: white;
  font-weight: bold;
}
#sortBy{
  display: flex;
  gap: 7px;
  cursor: pointer;
}
#sortBy p{
  font-size: 14px
}
#sortBy i{
  margin-top: 12px;
}
#nrComments{
  font-size: 17px;
}


.commentBar{
  display: flex;
  gap: 10px;
}
.commentBar #accountPic{
  height: 40px;
  width: 40px;
  border-radius: 50%;
}
.commentBar #commentLabel{
  height: 25px;
  width: 100%;
}
#accountPic img{
  height: 40px;
  width: 40px;
  border-radius: 50%;
  object-fit: cover;
}
#commentLabel input{
  height: 25px;
  width: 100%;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid hsl(0, 0%, 35%);
}



            /* ------- RECOMANDATION BOX SKELETON ------ */



.recomandationBox{
  height: 135vh;
  width: 395px;
  transform: translate(1485px, -870px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.filterBtns{
  height: 40px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}



.nextVideo{
  height: 100px;
  width: 395px;
  display: flex;
  gap: 8px;
}
.clipPic{
  height: 100%;
  width: 170px;
}
.clipName{
  height: 100%;
  width: 170px;
}
.detailsBtn{
  width: 35px;
  height: 30px;
  border-radius: 50%;
  transform: translateX(10px);
}




.shortSection{
  height: 330px;
  width: 100%;
}
.shortLogoBox{
  width: 45%;
  height: 30px;
}
.shortsBox{
  width: 100%;
  height: 290px;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.shortsBox .short{
  height: 100%;
  width: 130px;
}
.short{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#shortVideo{
  height: 200px;
  width: 100%px;
}
#shortName{
  height: 80px;
  width: 100%;
  display: flex;
  flex-direction: column;
}
#shortName .detailsBtn{
  transform: translate(95px, -100px);
}




            /* ------- RECOMANDATION BOX STYLING ------ */



.filterBtns button{
  cursor: pointer;
  background-color: hsl(0, 0%, 20%);
  border: none;
  color: white;
  font-weight: bold;
  border-radius: 7px;
}
#allBtn{
  background-color: hsl(0, 0%, 94%);
  color: black;
  width: 50px;
}
#fromBtn, #forYou{
  padding: 3px 10px;
}
#nextFilter{
  width: 40px;
  border-radius: 50%;
}
#nextFilter:hover{
  background-color: hsl(0, 0%, 26%);
}



.nextVideo{
  cursor: pointer;
}
#BadGuy{
  text-decoration: none;
}
.clipPic img{
  border-radius: 8px;
}
.clipName .title{
  color: white;
  font-weight: bold;
  font-size: 14px;
}
.channel, .date{
  color: #757575;
  font-size: 12px;
}
.detailsBtn i{
  color: white;
}
.detailsBtn:hover{
  background-color: hsl(0, 0%, 26%);
}
.detailsBtn{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 17px;
}



hr{
  width: 100%;
  border: none;
  border-top: 1px solid hsl(0, 0%, 37%);
}


.shortLogoBox{
  display: flex;
  gap: 12px;
}
.shortLogoBox img{
  width: 18px;
  height: 24px;
}
.shortLogoBox p{
  color: white;
  font-weight: bold;
  font-size: 18px;
}

#shortVideo, #shortName{
  cursor: pointer;
}
#shortVideo img{
  border-radius: 8px;
  height: 100%;
  width: 99%;
}
#shortName pre{
  color: white;
  font-size: 15px;
  font-weight: bold;
}
#shortName small{
  font-size: 13px;
  font-weight: normal;
}
.shortSection a{
  text-decoration-line: none;
}

.otherVideos{
  text-decoration: none;
}




            /* ------- COMMENTS SECTION SKELETON ------ */




.commentsSection{
  height: 650px;
  width: 1400px;
  transform: translateY(-1200px);
  margin-left: 60px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.commentBox{

  width: 100%;
  display: flex;
  gap: 20px;
}
.textBox{
  height: 100%;
  width: 100%;
}
.channelPic-fan{
  height: 45px;
  width: 45px;
  border-radius: 50%;
}
#commNo2{
    height: 160px;
}




            /* ------- COMMENTS SECTION STYLING ------ */




.channelPic-fan img{
  width: 45px;
  height: 45px;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
}
.fanName{
  color: white;
  font-weight: bold;
  font-size: 13px;
}
.fanName small{
  font-weight: normal;
  font-size: 11px;
}
.theComment{
  color: white;
  font-size: 14px;
  margin-bottom: 8px;
}
.textBox i{
  color: white;
  cursor: pointer;
}
.textBox span{
  font-size: 13px;
  color: grey;
  margin-right: 5px;
}
.likeBtn, .dislikeBtn{
  background-color: transparent;
  border: none;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  font-size: 16px
}
.replyBtn{
  margin-left: 12px;
  padding: 5px;
  border-radius: 50px;
  width: 70px;
  background-color: transparent;
  border: none;
  color: white;
  cursor: pointer;
}
.replyBtn:hover, .likeBtn:hover, .dislikeBtn:hover{
  background-color: hsl(0, 0%, 26%);
}
.moreReplies, .moreReplies i{
  color: hsl(209, 65%, 54%);
  font-weight: bold;
}
.moreReplies{
  padding: 6px 10px;
  border-radius: 50px;
  border: none;
  background-color: transparent;
  cursor: pointer;
}
.moreReplies:hover{
  background-color: rgba(42, 70, 112, 0.623);
}