@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

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

body{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
}

.container{
    
    width: 1440px;
    height: 1024px;
}

.menu{
    
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.menu-left{
    
    width: 246px;
    height: 24px;
}

#menu{
    width: 24px;
    height: 24px;
    margin-left: 20px;
}

#youtube{
    width: 90px;
    height: 20px;
    margin-left: 20px;
}

.menu-center{
   
    display: flex; 
    width: 410px;
    height: 40px;
}

.search {
    
    width: 360px;
}

.retangulo{
    
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#lupa{
    width: 20px;   
}

.menu-right{
    
    display: flex; 
    justify-content: space-between;
    align-items: center;
    width: 130px;
    height: 40px;
    margin-right: 20px;
}

#avatar{
    width: 34px;
    border-radius: 50%;
}

#camera{
    height: 25px;
}

#sino{
    height: 25px;
}


main{
    background-color: #f9f9f9;
    display: flex;
    height: 100%;
}

.left{
    
    width: 952px;
    margin-left: 60px;
    margin-top: 84px;     
}

.left h2{
    font-size: 20px;
    font-weight: 600;
    font-family: Roboto;
    margin-top: 8px;
}

#image{
    width: 952px;
    height: 537px;
}

.video-actions{
    width: 902px;
    height: 42px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

.left h3{
    font-size: 14px;
    font-weight: 600;
    font-family: Roboto;
    margin-top: 15px;
}

.left h4{
    font-family: Roboto;
    font-weight: 400;
    font-size: 14px;
    color: #515151;
    width: 510px;
    height: 64px;
    text-align: justify;
    margin-top: 10px;
}

.right{
    /*background-color: blueviolet;*/
    width: 20%; 
    margin-top: 84px;
    margin-left: 16px;
}

.thumb img{
    width: 160px;
    height: 90px;
}

.videos{
    margin-bottom: 16px; 
    /*border: 1px solid red;*/
    display: flex;
    margin-left: 5px;
    width: 400px;
    height: 90px;
}

.infos{
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.infos p{
    width: 196px;
    height: 32px;
    font-family: Roboto;
    font-weight: 600;
    font-size: 14px;
}

.infos h5{
    font-family: Roboto;
    font-weight: 400;
    font-size: 12px;
    margin-top: 10px;
    color: #515151;
}

.infos h6{
    font-family: Roboto;
    font-weight: 400;
    font-size: 12px;
    margin-top: 10px;
    color: #515151;
}