body {
    font-family: "Roboto", sans-serif;
    background-color: #f9f9f9;

}

  
.nav-bar {
    overflow: hidden;
    display: flex;
    justify-content: space-between;
}


  
/* Style the search box inside the navigation bar */
.nav input[type=text] {
    padding: 6px;
    border: none;
    margin-top: 8px;
    margin-right: 16px;
    font-size: 17px;
}

.nav-bar .left-bar img, .nav-bar .right-bar img{
    height: 15px;
    margin: 10px;
}

.outer-frame{
    display: flex;
}


/*for planning*/
.video, .recommendations{
    margin: 10px;
    align-items: center;
    flex-direction: column;

}


.video{
    width: 70%;
}


.video iframe{
    width: min(100%, 966px);
    height: min(110%, 543px);
}

.videoDescription{
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.stats{
    overflow: hidden;
    display: flex;
    justify-content: space-between;
}

.recommendations{
    width: 30%;
}

.recommendations div{
    margin: 2px;
}

.vid img{
    width: 170px;
    height: 95px;
  vertical-align: top;
}

.sideDescription{
    display: inline-block;
  vertical-align: top;
  padding: 0;
}

.comment{
    display: flex;
    flex-direction: column;
    margin: 2px;
}



.commentContent{
    display: flex;
    margin-bottom: 10px;
}

.profilePic{
    margin-right: 5px;
}