.thumbnails {
        width: 100%;
      }

      .description {
        font-size: 14px;
        font-weight: 500;
        line-height: 19px;
        margin-bottom: 12px;
      }

      .channel-name {
        color: rgb(82, 82, 82);
        font-size: 12px;
        margin-bottom: 5px;
        display: block;
      }

      .channel-views {
        color: rgb(82, 82, 82);
        font-family: arial;
        font-size: 12px;
        margin-top: 0px;
        display: block;
      }

      .channel-info-grid {
        display: grid;
        grid-template-columns: 50px 1fr;
      }

      .channel-logo {
        width: 35px;
        border-radius: 50px;
      }

      .video-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 20px;
        row-gap: 40px;
      }
      
      @media(max-width:500px){
        
        .header2{
          display:none !important;
        }
        .video-grid{
          grid-template-columns: 1fr;
        }

        body{

          padding-left: 30px;
          padding-right: 15px;
          margin-right:0;
        }

      }

      @media ((min-width:501px)and (max-width:750px)){
        .video-grid{
          grid-template-columns:1fr 1fr;
        }
      }

      @media ((min-width:751px) and (max-width:999px)){
        .video-grid{
          grid-template-columns:1fr 1fr 1fr;
        }
      }

      @media (min-width:1000px){
        .video-grid{
          grid-template-columns:1fr 1fr 1fr 1fr;
        }
      }


      .video-image{
        position:relative;
        margin-bottom:10px;
      }

      .video-time{
        background-color:black;
        color:white;
        position:absolute;
        bottom:10px;
        right:5px;
        padding:2px 2px 2px 2px;
        border-radius:2px;
      }

      .header{
        display:flex;
        height:60px;
        justify-content:space-between;
        position:fixed;
        top:0;
        left:0;
        right:0;
        border-bottom:1px solid rgb(224, 217, 217);
        background-color:white;
        z-index:100;
      }

      .left-header{
        width:180px;
        display:flex;
      }

      .hamburger-logo{
        width:26px;
        margin-left:20px;
        cursor:pointer;
      }
      
      .youtube-logo{
        width:90px;
        margin-left:22px;
        cursor:pointer;
      }

      .middle-header{
        
        flex:1;
        margin-left:40px;
        margin-right:40px;
        max-width:427px;
        display:flex;
        align-items:center;
      }

      .search-box{
        height:31px;
        width:0px;
        border:1px solid rgb(204, 204, 204);
        padding-left:10px ;
        cursor:pointer;
        flex:1;

      }

      .search::placeholder{
        font-family:"roboto", arial;
        font-size:20px;
      }
      
      .search-icon{
        width:60px;
        height:35px;
        border:1px solid rgb(204, 204, 204);
        display:flex;
        align-items:center;
        justify-content:center;
        cursor:pointer;      
        margin-left:-1px;
        background-color:rgb(246, 244, 244);
        position: relative;
        flex-wrap:no-wrap;
        
      }

      .tooltip{
        position:absolute;
        bottom:-40px;
        background-color:rgba(90, 90, 90, 0.899);
        color:white;
        padding:3px 5px 3px 5px ;
        border-radius:2px;
        opacity:0;
        transition:opacity 0.15s;
        pointer-events: none;
        font-family:"roboto", arial;
        font-size:14px;
        display:flex;
        justify-content: center;
        align-items: center;
        white-space:nowrap;
      }

      .tooltip2{
        position:absolute;
        bottom:-38px;
        right:-50px;
        opacity:0;
        background-color:rgba(90, 90, 90, 0.899);
        color:white;
        padding:3px 5px 3px 5px ;
        border-radius:2px;
        transition:opacity 0.15s;
        pointer-events: none;
        font-family:"roboto", arial;
        font-size:14px;
        display:flex;
        justify-content: center;
        align-items: center;
        white-space:nowrap;
        
      }

      .tooltip3{
        position:absolute;
        bottom:-43px;
        right:-18px;
        background-color:rgba(90, 90, 90, 0.899);
        color:white;
        padding:3px 5px 3px 5px ;
        border-radius:2px;
        opacity:0;
        transition:opacity 0.15s;
        pointer-events: none;
        font-family:"roboto", arial;
        font-size:14px;
        display:flex;
        justify-content: center;
        align-items: center;
        white-space:nowrap;
        
      }

      .search-icon:hover .tooltip,
      .voice-icon:hover .tooltip2,
      .upload:hover .tooltip3,
      .apps:hover .tooltip3,
      .notification-area:hover .tooltip3{
        opacity:1;
      }

      
      

      .search-logo{
        height:24px;
        
      }

      .voice-icon{
        width:38px;
        height: 38px;
        border-radius:19px;
        border:none;
        margin-left:5px;
        background-color:rgb(244, 244, 244);
        cursor:pointer;
        position:relative;
      }

      .voice-logo{
        height:22px;
      }

      .right-header{
        width:170px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding-right:20px;
        flex-shrink:0;
      }

      .right-header-size{
        width:27px;
      }

      .upload{
        position:relative;
      }

      .apps{
        position:relative;
      }

      .notification-area{
        position:relative;
        
      }
      
      .notifications{
        position:absolute;
        top:-3px;
        right:-4px;
        background-color:rgb(213, 6, 6);
        color:white;
        font-family:"roboto", arial;
        font-size:10px;
        padding:2px 5px 2px 5px;
        border-radius:50%;
      }
      .photo{
        width:30px;
        height:30px;
        border-radius:50%;

      }

      .header2{
        background-color:color;
        position:fixed;
        top:60px;
        bottom:0;
        left:0;
        width:80px;
        display:flex;
        flex-direction:column;
        flex-shrink:0;
        z-index:200;
        
      }
      
      .side2-menu{
        background-color:white;
        height:120px;
        min-height:60px;
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
      }

      .side2-menu:hover{
        background-color:lightgray;
      }

      .side2-menu img{
        height:25px;
        margin-bottom:3px;
      }
      
      .side2-menu div{
        font-family:"roboto", arial;
        font-size:10px;
      }