style.css

/* Roboto */
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');


/* 
 ██████╗███████╗███████╗    ██████╗ ███████╗███████╗███████╗████████╗███████╗
██╔════╝██╔════╝██╔════╝    ██╔══██╗██╔════╝██╔════╝██╔════╝╚══██╔══╝██╔════╝
██║     ███████╗███████╗    ██████╔╝█████╗  ███████╗█████╗     ██║   ███████╗
██║     ╚════██║╚════██║    ██╔══██╗██╔══╝  ╚════██║██╔══╝     ██║   ╚════██║
╚██████╗███████║███████║    ██║  ██║███████╗███████║███████╗   ██║   ███████║
*/
/* https://patorjk.com/software/taag/#p=display&f=Graffiti&t=Type%20Something%20 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
  font-family: 'Roboto';
	vertical-align: baseline;
  text-decoration: none;
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/* 
███╗   ███╗██╗███████╗ ██████╗
████╗ ████║██║██╔════╝██╔════╝
██╔████╔██║██║███████╗██║     
██║╚██╔╝██║██║╚════██║██║     
██║ ╚═╝ ██║██║███████║╚██████╗
╚═╝     ╚═╝╚═╝╚══════╝ ╚═════╝
*/

.flexRow {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

button:hover, .pointer:hover {
  cursor: pointer;
}


/* 
██╗  ██╗███████╗ █████╗ ██████╗ ███████╗██████╗ 
██║  ██║██╔════╝██╔══██╗██╔══██╗██╔════╝██╔══██╗
███████║█████╗  ███████║██║  ██║█████╗  ██████╔╝
██╔══██║██╔══╝  ██╔══██║██║  ██║██╔══╝  ██╔══██╗
██║  ██║███████╗██║  ██║██████╔╝███████╗██║  ██║
╚═╝  ╚═╝╚══════╝╚═╝  ╚═╝╚═════╝ ╚══════╝╚═╝  ╚═╝
*/

.header__header {
  position: fixed;
  align-items: space-between;
  z-index: 5;
  overflow: none;
  padding: 1rem;
  height: 4rem;
  width: 100vw;
  background-color: #202020;
}

.header__menuLogoContainer {
  width: 25%;
}

.header__hamburger {
padding-right: 1rem;
}

.header__youtubeLogo {
  align-items: center;
  color: white;
  font-weight: bolder;
}

.header__youtubeLogo > * {
  padding: 0 .15rem;
}

.header__searchContainer {
  width: 50%;
}

.header__searchInput {
  width: 90%;
  background-color: #181818;
  border: rgb(48,48,48) 1px solid;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  padding: 0.5rem;
  font-size: 1.15rem;
}

.header__searchBtn {
  background-color: rgb(48,48,48);
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border: rgb(48,48,48) 1px solid;
  width: 4rem;
}

.header__microphone {
  width: 3rem;
  background-color: inherit;
  border: none;
  color: white;
}

.header__microphone > svg { 
  color: white;
  filter:invert(100%);
  transform: scale(.75);

}


.header__actionContainer {
  background-color: inherit;
  justify-content: flex-end;
  position: relative;
  padding-right: 2rem;
  right: 0;
  width: 25%;
}

.header__actionContainer > * {
  background-color: inherit;
  border: none;
  width: 15%;
}

.header__notifications {
  width: 4rem;
}

.header__notifications > svg {
  filter:invert(100%);
  width: 4rem;
  transform: scale(.75);

}

.header__notifications > span {
  position: relative;
  top: -2rem;
  right: -0.5rem;
  background-color: red;
  color: white;
  border-radius: 50%;
  padding: 0.1rem;
  font-size: 0.75rem;
}

.header__profilePic {
  transform: scale(1.5);

}


/* 
███╗   ███╗ █████╗ ██╗███╗   ██╗
████╗ ████║██╔══██╗██║████╗  ██║
██╔████╔██║███████║██║██╔██╗ ██║
██║╚██╔╝██║██╔══██║██║██║╚██╗██║
██║ ╚═╝ ██║██║  ██║██║██║ ╚████║
╚═╝     ╚═╝╚═╝  ╚═╝╚═╝╚═╝  ╚═══╝                             
*/

.main__main {
  display: flex;
  flex-direction: row;
  padding: 6rem 2rem;
  background-color: #181818;
  width: 100%;
  overflow: none;
  height: fit-content;
}

.main__videoAndCommentsContainer {
  display: flex;
  flex-direction: column;
  width: 65%;
  height: fit-content;
}

.main__recommendedVideosContainer {
  width: 35%;
  padding-left: 1.5rem;
}

/* 
██╗   ██╗██╗██████╗ ███████╗ ██████╗ 
██║   ██║██║██╔══██╗██╔════╝██╔═══██╗
██║   ██║██║██║  ██║█████╗  ██║   ██║
╚██╗ ██╔╝██║██║  ██║██╔══╝  ██║   ██║
 ╚████╔╝ ██║██████╔╝███████╗╚██████╔╝
  ╚═══╝  ╚═╝╚═════╝ ╚══════╝ ╚═════╝                                     
*/


.video__container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: fit-content;
}

iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.video__videoInfo {
  width: 100%;
}

.video__title {
  width: 100%;
  padding: 1.5rem 0;
  font-size: 1.25rem;
  color: white;
  font-weight: 400;

}

.video__stats {
  width: 100%;
  justify-content: space-between;
  color: rgb(144,144,144);
  border-bottom: #303030 1px solid;
}

.video__viewsAndDate > p{
  padding-right: .25rem;
}

.video__likeShareSave {
  width: 60%;
}

.video__likeShareSave > button {
  height: 2rem;
  padding: 0.75rem;
  padding-bottom: 1.5rem;

}

.video__likeShareSave > button,
.video__likeShareSave > button > *{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  text-align: center;
  align-items: center;
  color: rgb(144,144,144);
  background-color: inherit;
  border: none;
  font-size: 1.15rem;
  font-weight: bold;
}

.video__likeShareSave > button:nth-child(1),
.video__likeShareSave > button:nth-child(2) {
  border-bottom: rgb(144,144,144) 2px solid;
}


[alt="upvote"], [alt="downvote"], [alt="options"] {
  transform: scale(.65);
}

.video__descriptionContainer {
  padding: 1.5rem 0;
  width: 100%;
  border-bottom: #303030 1px solid;

}

.video__authorAvatar {
  border-radius: 50%;
  padding: 0.75rem;
  width: 6rem;
  height: 6rem;
  aspect-ratio: 1 / 1;
}

.video__description {
  display: flex;
  flex-direction: column;
  width: 65%;
}

.video__author {
  color: white;
  font-weight: bold;
  font-size: 1rem;
  padding: 0.25rem 0;
}

.video__author > button {
  width: 1rem;
  height: 1rem;
  background-color: inherit;
  border: none;
  filter: invert(60%);
}

.video__authorSubscribers {
  color: rgb(144,144,144);
  font-size: 0.75rem;
  padding: 0.25rem 0;
}

.video__notes {
  padding: 1rem 0;
  color: white;
}

.video__showMore {
  padding: 1rem 0;
  color: rgb(144,144,144);
}

.video__subscribeContainer {
  width: 15%;
  align-items: flex-start;
}

.video__subscribe {
  background-color: #303030;
  color: rgb(144,144,144);
  padding: .75rem;
  border-radius: 5px;
  font-weight: bold;
  font-size: 1rem;
  border: none;
}

.video__subscribeAlert {
  background-color: inherit;
  border: none;
  filter: invert(100%);
  transform: scale(1.5);
  padding: .75rem;
}


/* 
 ██████╗ ██████╗ ███╗   ███╗███╗   ███╗███████╗███╗   ██╗████████╗███████╗
██╔════╝██╔═══██╗████╗ ████║████╗ ████║██╔════╝████╗  ██║╚══██╔══╝██╔════╝
██║     ██║   ██║██╔████╔██║██╔████╔██║█████╗  ██╔██╗ ██║   ██║   ███████╗
██║     ██║   ██║██║╚██╔╝██║██║╚██╔╝██║██╔══╝  ██║╚██╗██║   ██║   ╚════██║
╚██████╗╚██████╔╝██║ ╚═╝ ██║██║ ╚═╝ ██║███████╗██║ ╚████║   ██║   ███████║
 ╚═════╝ ╚═════╝ ╚═╝     ╚═╝╚═╝     ╚═╝╚══════╝╚═╝  ╚═══╝   ╚═╝   ╚══════╝
*/

.comments__commentContainer {
  padding: 1.5rem 0;
}

.comments__commentHeader {
  padding-bottom: 2rem;
}

.comments__totalComments {
  color: white;
  font-size: 1.2rem;
  font-weight: 500;
  padding-right: 2rem;
}

.comments__sortComments {
  font-size: 1.2rem;
  color: rgb(144,144,144);
}

.comments__sortComments> img {
  padding-right: .5rem;
}

.comments__addCommentContainer {
  height: 5rem;
}

.comments__selfAvatar, .comments__userAvatar {
  height: 4rem;
  width: 4rem;
  /* padding-right: 1rem; */
  border-radius: 50%;
}

.comments__addCommentInput {
  height: 50%;
  width: 100%;
  font-size: 1rem;
  border: none;
  background-color: inherit;
  border-bottom: #303030 1px solid;
  padding-left: 1rem;
}

.comments__userContainer {
  width: 100%;
  height: fit-content;
  padding: 1rem 0;
}

.comments__userInfo {
  padding-top: 1rem;
  width: 90%;
  padding-left: 1rem;

}

.comments__nameContainer {
  padding-bottom: .5rem;
}

.comments__username {
  color: white;
  font-weight: 500;
}

.comments__hoursAgoPosted {
  color: rgb(144,144,144);
  padding-left: 0.5rem;
}

.comments__comment {
  color: white;
  font-weight: 400;
  padding-bottom: 1rem;
  line-height: 1.5rem;
}

.comments__likesReplyContainer {
  color: rgb(144,144,144);
  align-items: center;
  padding-bottom: 1rem;
}

.comments__likesReplyContainer > * {
  padding-right: 0.5rem;
}

.comments__likesReplyContainer > img {
  transform: scale(1.1);
}

.comments__likesReplyContainer > h6 {
  padding-left: 0.5rem;
  font-weight: bold;
}

.comments__commentReplies {
  color: rgb(62, 166, 255);
  font-weight: bold;
  align-items: center;
}

.comments__threeDots {
  transform: scale(1.2);
}


/* 
██████╗ ███████╗ ██████╗ ██████╗ ███╗   ███╗███╗   ███╗███████╗███╗   ██╗██████╗ ███████╗██████╗ 
██╔══██╗██╔════╝██╔════╝██╔═══██╗████╗ ████║████╗ ████║██╔════╝████╗  ██║██╔══██╗██╔════╝██╔══██╗
██████╔╝█████╗  ██║     ██║   ██║██╔████╔██║██╔████╔██║█████╗  ██╔██╗ ██║██║  ██║█████╗  ██║  ██║
██╔══██╗██╔══╝  ██║     ██║   ██║██║╚██╔╝██║██║╚██╔╝██║██╔══╝  ██║╚██╗██║██║  ██║██╔══╝  ██║  ██║
██║  ██║███████╗╚██████╗╚██████╔╝██║ ╚═╝ ██║██║ ╚═╝ ██║███████╗██║ ╚████║██████╔╝███████╗██████╔╝
╚═╝  ╚═╝╚══════╝ ╚═════╝ ╚═════╝ ╚═╝     ╚═╝╚═╝     ╚═╝╚══════╝╚═╝  ╚═══╝╚═════╝ ╚══════╝╚═════╝ 
*/


.recommended__videoOptions {
  padding-bottom: 1.5rem;
  align-items: center;
  white-space: nowrap;
  overflow-x: hidden;
  position: relative;
}

.recommended__videoOptions::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 15px;
  pointer-events: none;
  background-image: linear-gradient(to right, rgba(255,255,255,0), #181818 85%);
  width: 25%;
}

.recommended__videoOptions > *:not(img) {
  color: white;
  padding: .5rem .75rem;
  background: #303030;
  border: 1px solid rgb(144,144,144);
  /* border-radius: 25%; */
  margin-right: .5rem;
  border-radius: 1.5rem;
  font-weight: bold;
}

.recommended__videoOptions > *:nth-child(1) {
  color: black;
  background: white;
  border: white 1px solid;
}

.recommended__recommendedVideo {
  height: 6rem;
  margin-bottom: 0.75rem;
}

.recommended__thumbnailContainer--hover {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
  transform:translateY(-6rem);
  height: 6rem;
}

.recommended__thumbnailContainer--hover :is(button, p) {
  position: relative;
  right: -8rem;
  background-color: rgba(0,0,0, .90);
  border: none;
  height: 2rem;
  width: 2rem;
  border-radius: 3px;
  margin: .1rem;
  visibility: hidden;
  z-index: 5;
}

.recommended__thumbnailContainer--hover > p {
  visibility: visible;
  width: fit-content;
  height: fit-content;
  padding: 0.15rem 0.25rem;
  color: white;
  font-size: 0.9rem;
  right: -7.5rem;
}

.recommended__thumbnailContainer--hover:hover > button {
  visibility: visible;
}

.recommended__recommendedInfo {
  padding-left: .5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.recommended__recVidTitle {
  color: white;
  font-weight: bold;
  padding-bottom: .25rem;
  font-size: .9rem;
  /* white-space: nowrap; */
  /* overflow: hidden; */
  text-overflow: ellipsis;
}

.recommended__recVidAuthor, 
.recommended__recVidViewsAndDateContainer {
  color: rgb(144,144,144);
  padding-bottom: .25rem;
  font-size: .8rem;

}

.recommended__liveNow {
  color: red;
  font-weight: bold;
  font-size: .9rem;
  border: 1px solid red;
  border-radius: 3px;
  padding: 0.25rem;
  width: fit-content;
}

.recommended__recVidThreeDots {
  transform: scale(1.5);
  align-self: center;
}

/* 
███╗   ███╗███████╗██████╗ ██╗ █████╗      ██████╗ ██╗   ██╗███████╗██████╗ ██╗███████╗███████╗
████╗ ████║██╔════╝██╔══██╗██║██╔══██╗    ██╔═══██╗██║   ██║██╔════╝██╔══██╗██║██╔════╝██╔════╝
██╔████╔██║█████╗  ██║  ██║██║███████║    ██║   ██║██║   ██║█████╗  ██████╔╝██║█████╗  ███████╗
██║╚██╔╝██║██╔══╝  ██║  ██║██║██╔══██║    ██║▄▄ ██║██║   ██║██╔══╝  ██╔══██╗██║██╔══╝  ╚════██║
██║ ╚═╝ ██║███████╗██████╔╝██║██║  ██║    ╚██████╔╝╚██████╔╝███████╗██║  ██║██║███████╗███████║
╚═╝     ╚═╝╚══════╝╚═════╝ ╚═╝╚═╝  ╚═╝     ╚══▀▀═╝  ╚═════╝ ╚══════╝╚═╝  ╚═╝╚═╝╚══════╝╚══════╝
                                                                                               
*/


@media only screen and (max-width: 1200px) {
  .recommended__recVidTitle {
    font-size: .9rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .comments__comment {
    font-size: .9rem;
    line-height: 1rem;
  }

  .video__description {
    display: flex;
    flex-direction: column;
    width: 60%;
  }

  .video__likeShareSave button{
    transform: scale(.9);
  }

  .comments__likesReplyContainer *{
    transform: scale(.9);
  }
}

@media only screen and (max-width: 1100px) {
  .recommended__recVidTitle {
    font-size: .8rem;
    text-overflow: ellipsis;
  }
  .recommended__recVidInfo * {
   font-size: .7rem;
  }
  .video__description {
    display: flex;
    flex-direction: column;
    width: 55%;
  }
}

@media only screen and (max-width: 1024px) {
  .main__main {
    flex-direction: column;
  }

  .main__recommendedVideosContainer {
    padding-left: 0;
  }

  .main__videoAndCommentsContainer, .main__recommendedVideosContainer {
    width: 100%;
  }

  .recommended__recVidTitle {
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .comments__comment {
    font-size: 1rem;
    line-height: 1rem;
  }

  .video__description {
    font-size: .9rem;
    display: flex;
    flex-direction: column;
    width: 60%;
  }

  .video__likeShareSave button{
    transform: scale(1);
  }

  .comments__likesReplyContainer *{
    transform: scale(1);
  }

  .recommended__recVidThreeDots {
    position: absolute;
    /* align-self: flex-end; */
    right: 1rem;
    margin-right: 1rem;
  }

  .recommended__recVidAuthor {
    font-size: .8rem;
  }
  .recommended__recommendedVideo {
   width: 100%;
  }


}

@media only screen and (max-width: 800px) {
  .header__actionContainer > *:not(.header__profilePic) {
    display: none;
  }

  .video__stats, .video__subscribeContainer, .comments__commentHeader, .comments__likesReplyContainer img {
    transform: scale(.8);
  }

  .video__likeShareSave {
    gap: .5rem;
  }

  .comments__comment, .comments__likesReplyContainer p {
    font-size: .9rem;
  }

}

@media only screen and (max-width: 625px) {
  .header__menuLogoContainer {
    margin-right: 1rem;
  }

  .video__viewsAndDate p {
    white-space: nowrap;
  }
}