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

* {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   font-family: 'Roboto', sans-serif;
}

body {
   width: 98vw;
   height: 100vh;
}

h1 {
   color: #000;
   font-size: 20px;
   font-weight: 700;
}

h2 {
   color: #000;
   font-size: 14px;
   font-weight: 600;
}

h3, p {
   font-size: 14px;
}

p {
   color: #515151;
}

ul li {
   list-style: none;
}

a {
   text-decoration: none;
}

header {
   background: #FFF;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 8px 24px;
}

header .menu, 
header .pesquisa {
   display: flex;
   justify-content: center;
}

header .menu img {
   margin-left: 32px;
}

header .pesquisa input {
   width: 348px;
   height: 40px;
   border: 1px solid #CCC;
}

header .pesquisa button {
   width: 57px;
   height: 40px;
}

header .notificacao {
   display: flex;
   justify-content: flex-end;
   align-items: center;
   gap: 24px;
}

header .notificacao img {
   width: 34px;
   height: 34px;
   border-radius: 50%;
}


main {
   background: #F9F9F9;
   width: 100%;
   padding-top: 28px;

   display: flex;
}


main .video {
   margin-left: 75px;
}

main .video .videoPlayerTitulo {
   padding: 16px 0;
}

main .video .canalDeInformacao {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
   gap: 42px;
}

main .video .canalDeInformacao .canal {
   display: flex;
   flex-direction: row;
}

main .video .canalDeInformacao .canal .canal-detalhes {
   margin-left: 12px;
}

main .video .canalDeInformacao .canal .canal-detalhes h3 {
   font-weight: 700;
}

main .video .canalDeInformacao .inscricao-canal button {
   width: 159px;
   height: 40px;
   border: transparent;
   border-radius: 2px;
   background: #C00;

   color: #FFF;
   font-size: 14px;
   text-transform: uppercase;
}

main .video .canalDeInformacao .like {
   display: flex;
   flex-direction: row;
   align-items: center;
}

main .video .canalDeInformacao .dislike {
   display: flex;
   flex-direction: row;
   align-items: center;
}

main .video .canalDeInformacao .share {
   display: flex;
   flex-direction: row;
   align-items: center;
}

main .video .canalDeInformacao .download {
   display: flex;
   flex-direction: row;
   align-items: center;
}

main .video .canalDeInformacao .like p,
main .video .canalDeInformacao .dislike p,
main .video .canalDeInformacao .share p,
main .video .canalDeInformacao .download p {
   margin-left: 8px;
}

main .video .views {
   width: 391px;
   height: 16px;
   padding: 16px 0;
}

main .video .views p {
   color: #000;
   font-weight: 700;
}

main .video .detalhes {
   padding-top: 16px;
   width: 510px;
}

main .video .detalhes p {
   color: #515151;
   font-weight: 400;
}

/* Direita */

main .playlist-video {
   margin-left: 25px;
}

main .playlist-video .thumbnail {
   display: flex;
   margin-bottom: 16px;
}

main .playlist-video .thumbnail .thumbnail-infos {
   width: 196px;
   max-height: 90px;
   margin-left: 16px;
}

main .playlist-video .thumbnail .thumbnail-infos .thumbnail-canal,
main .playlist-video .thumbnail .thumbnail-infos .thumbnail-views {
   padding-top: 7px;
}

main .playlist-video .thumbnail .thumbnail-infos .thumbnail-canal p,
main .playlist-video .thumbnail .thumbnail-infos .thumbnail-views p {
   font-size: 12px;
}