.thumbnail{
  width:100%;
}

.video-title{
  margin-top: 0;
  font-size:14px;
  font-weight:500;
  margin-bottom:10px;
  line-height:20px;
}
.video-link-title{
  text-decoration: none;
  color:black;
}
.video-author .video-link-title{
  color:rgb(96,96,96);
}

.profile-picture-container{
  position:relative;
  display:inline-block;
  height:fit-content;
  width:fit-content;
}

.profile-img{
  width:35px ;
  border-radius:50px;
}

.pfp-tooltip{
  white-space: nowrap;
  pointer-events: none;
  display: flex;
  flex-direction:row;
  position:absolute;
  box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.3);
  border-radius:6px;
  background-color:white;

  align-items: center;
  bottom:-25px;
  padding-top:10px;
  padding-bottom:10px;
  padding-left:13px;
  padding-right:18px;

  column-gap: 10px;

  bottom:-85px;
  opacity:0;
  transition: opacity 0.25s;
  z-index:300;
}
.tooltip-pic{
  width:50px;
  height:50px;
  border-radius:50px;
}
.tooltip-text-container{
  display:flex;
  flex-direction:column;
  justify-content: center;
}
.tooltip-channel-name{
  font-weight:bold;
  margin-bottom:5px;
  font-size:17px;
}
.tooltip-channel-subs{
  color:rgb(73, 73, 73);
  font-size:15px;
}
.profile-picture-container:hover   .pfp-tooltip{
  opacity:1;
}

.main{
  display:grid;
  grid-template-columns:35px 1fr;
  column-gap: 10px;
  padding-bottom:10px;
}

.video-author, .video-stats{
  color:rgb(96,96,96);
  font-size:12px;
}

.video-author{
  margin-bottom: 5px  ;
  color:inherit;
}

.grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  row-gap: 35px;
  column-gap:15px;
}

@media screen and (min-width:1600px){ 
  .video-title{
    font-size:16px;
    line-height:24px;
  }
  .video-author, .video-stats{
    font-size:14px;
  }
}

@media (min-width:1px) and (max-width:500px) {
  .grid{
    grid-template-columns: 1fr;
  }
}
@media (min-width:501px) and (max-width:850px) {
  .grid{
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width:851px)and (max-width:1299px){
  .grid{
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (min-width:1300px)and (max-width:1599px){
  .grid{
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
@media (min-width:1600px) and (max-width:2000px) {
  .grid{
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
}


.thumbnail-div{
  position:relative;
  margin-bottom:8px;
}
.video-time{
  position:absolute;
  bottom:10px;
  right:5px;
  background-color:black;
  color:white;
  font-size:12px;
  font-weight:500;
  padding: 4px 4px;
}