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

}

.logo{
height: 3vh;
width: 10vw;



}




#bar{

    color: rgb(255, 255, 255);
font-size:x-large;
margin-right: 20px;
}



nav{
display: flex;
justify-content: space-around;
align-items: center;
width:100% ;
height: 100px;
/* border: solid; */
/* margin-top: 20px; */
background-color:rgba(12, 12, 12, 0.678) ;
position: fixed;
top: 0px;
padding-top: 20px;
}

.navbar{
display: flex;
justify-content: space-around;
align-items: center;

}

ul{
display: flex;
justify-content: space-around;
align-items: center;
list-style-type: none;
width: 100%;

}

li{

display: flex;
justify-content: space-around;
align-items: center;

}

.ytlogo{
margin: 10px;
margin-right: 8vw ;

}

.search{

height: 7vh;
width: 43vw;
border:  rgb(71, 71, 71)  0.5px solid;
margin: 15px;
border-radius: 30px;
background-color: rgb(12, 12, 12);
}

.search input{

width: 38vw;
height: 6vh;
border: none;
outline: none;
border-radius: 30px;
background-color: rgb(12, 12, 12);
}

.search input[placeholder]{
font-size: larger;
padding-left: 20px;
box-sizing: border-box;
}

.search button{
height:6vh ;
text-align: center;
width:3vw;
border: none;
outline: none;
border-radius: 40px;
background-color: rgba(71, 71, 71, 0.342);


}

/* .search button i{
padding: 20px;
box-sizing: border-box;


} */


i{
font-size: 20px;

}

.microphone{
border: 0.5px solid;
width: 60px;
height:60px ;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background-color: rgba(71, 71, 71, 0.342);

}

.microphone i{
font-size: x-large;
color: white;

}

.bell {

border: none;
width: 60px;
height:60px ;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
    
}

.bell i{
font-size: x-large;

}


.create button{
width: 10vw;
height: 6vh;
font-size: larger;
font-family: Arial, Helvetica, sans-serif;
margin: 20px;
border-radius: 30px;
color: white;
background-color: rgba(71, 71, 71, 0.342);
outline: none;
border: none;
}

.profile-pic{

background-image: url(img/images.jpg);
background-size: cover;
background-position: center center;
width: 4vw;
height:6vh ;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%; 
margin: 15px;

}

i{

    color: white;
}

/* navbar hover */

.microphone:hover{
background-color: rgba(71, 71, 71, 0.568);

}

.create button:hover{
background-color: rgba(71, 71, 71, 0.568);

}

.bell:hover{
background-color:rgba(71, 71, 71, 0.342) ;
}

.side-bar{
display: flex;
flex-direction: column;
/* justify-content:center; */
align-items: center;
width: 7vw;
height:calc(97.5vh - 80px);
/* border: solid; */
position: fixed;
top: 100px;


}

.div1{
display: flex;
flex-direction: column;
/* justify-content:center; */
align-items: center;

}

.side-bar ul{
display: flex;
flex-direction: column;
/* justify-content: center; */
align-items: center;
list-style-type: none;

}

.side-bar li{
display: flex;
flex-direction: column;
/* justify-content: center; */
align-items: center;
color: white;
margin: 20px;
font-size: small;

}

.side-bar li i{
    
display: flex;
flex-direction: column;
/* justify-content: center; */
align-items: center;
font-size: x-large;
line-height: 40px;

}

.div1:hover {
background-color:  rgba(71, 71, 71, 0.342) ;
width: 100px;
height: 100px;
border-radius:20px ;

}

.div-grid-video{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
margin-left:140px ;
margin-top: 120px;
margin-right: 30px;
column-gap: 20px;
row-gap: 40px;
height: 350px;
/* background-color: gray; */
z-index: initial ;

}

.video-1{
height: 400px;
/* background-color: lightskyblue;
border: solid; */

}

.thumb-nail{
position: relative;
width: auto;
height: 270px;
border-radius: 20px;
/* border: solid; */
z-index: -1;
}

.thumb-nail img{
position: absolute;
width: 100%;
height: 100%;
transform: translate(-50% -50%);
border-radius: 20px;
}

.video-content{
/* border: solid; */
display: grid;
grid-template-columns: 50px 1fr;
padding: 10px;
box-sizing: border-box;
}

.channel-profile{
position: relative;
height: 50px;
width: 50px;
border-radius: 50px;
margin-right: 5px;
display: flex;
justify-content: center;
align-items: center;
/* border: solid; */
z-index: -1;
}

.channel-profile img{
position: absolute;
height: 100%;
width: 100%;
border-radius: 50px;
transform: translate(-50% -50%);

}

.content{
margin-left: 10px;

}

.content .bold{
color: white;
font-size: x-large;
font-weight: 500;
text-transform: capitalize;
line-height: 30px;

}

.channel-name{
display: flex;
flex-direction: column;
justify-content: center;
/* align-items: center; */
line-height: 10px;
}


.channel-name p{
font-size: large;
color: whitesmoke;

}