*{
          margin:0rem;
          padding:0rem;
          user-select:none;
          box-sizing:border-box;
          scrollbar-width:none;
      }
      
      img{width:100%;height:100%;margin:0rem}
      a{text-decoration:none}
      

         body{background:rgb(24, 24 ,24);margin:0rem;display:block;padding:0rem}


    main.videos-section{
        width:40%;
        height: 100vh;
        background:none;
        padding:4rem 4rem 4rem 4rem; 
        border-left:0.1rem solid grey;
        border-right:0.1rem solid grey;
        overflow:scroll;
    }

    
    /* RIGHT SIDE ASIDE SECTION */


    aside.video-info-section{
        width:30%;
        height:100%;
        background:none;
        display: block;
        padding:2rem;
    }

    section.video-details-containers{
        width:100%;
        height:100%;
        background:white;
        border-radius:1rem;
        padding:0.5rem;
    }



  div#video-thumbnail-section{
        width:100%;
        height:35%;
        background: none;
        border-radius: 1rem;
        
    }


    img.video-thumbnail{border-radius:1rem}

    section.video-title-section{
        width:100%;
        height:auto;
        background:none;
        margin-top:1rem;
        display:flex;
        flex-flow:column;
        justify-content: center;
    }
    p#video-title-section{
        font-size:1rem;
        font-weight: bold;
        font-family: Arial, Helvetica, sans-serif;
    }

    p#video-title-username{font-size:0.85rem}

    p#video-description-title{
        font-weight: bold;
        font-size:1rem;
        font-family: Arial, Helvetica, sans-serif;
        margin:2rem 0 1rem 0;
    }

    section.description-section{
        width: 100%;
        height:35%;
        background:lightgrey;
        border-radius:1rem;
        padding:1rem;
        font-family: Arial, Helvetica, sans-serif;
    }






      /*  BOTTOM SECTION   */

    section.header-books-container{
      display:none;
    }

  aside.closed-sidenav{display:none}
    
  div.pagination-for-tablets{display:none;}
  div.pc-pagination{display:block}
  section.tablet-profile-container{
    display:none;
  }

@media (max-width: 768px) {


  body{background:rgb(24, 24 ,24);margin:0rem;display:block;padding:0rem}




   main.videos-section{
        width:85%;
        height: 100vh;
        background:none;
        padding:4rem 4rem 4rem 4rem; 
        margin:0rem;
        border:none;
        overflow:scroll;
    }

     aside.video-info-section{
        display: none;
    }
/*
    main.main-content-feed{
        width:85%;
        border-right:none;
        padding:6rem 5rem 5rem 5rem;
        position: relative;
    }
*/
    aside.side-navigation{
      display:none;
    }

    aside.closed-sidenav{
      display:block;
      width:15%;
      height:100vh;
      background:none;
      position:sticky;
      top:0%;
      padding:1rem 1rem 1rem 1rem;
    }

    header.closed-sidenav-header{
      width:100%;
      height:11%;
      background:rgb(14, 107, 165);
      border-radius: 1em;
      border:0.1rem solid white;
    }

    section.closed-sidenav-link{
      width:100%;
      height: 11%;
      border-radius:1rem;
      padding:0.8rem;
      margin-top: 1rem;
    }

    section.closed-sidenav-link:hover{
      background: rgb(48, 48, 48);
    }

    section#closed-sidenav-link{
      background:whitesmoke;
      border:0.1rem solid white;
    }

    section#closed-sidenav-link:hover{
      background: rgb(154, 153, 153);
    }

    section.closed-sidenav-link-profile{
      width:100%;
      height: 9%;
      border-radius:50%;
      padding:0 0.5rem 0 0.5rem;
      margin-top:1rem;
    }

    img.closed-sidenav-profile{border-radius:50%}

    
      div.pc-pagination{
        display:none;
      }

      div.pagination-for-tablets{display:block}
  
      
    main.stories-section{
        width:85%;
        height: 100vh;
        background:none;
        padding:4rem 4rem 4rem 4rem; 
        border-left:0.1rem solid grey;
        overflow-y:scroll;
    }

    section.book-stories-list{
        width:100%;
        height:15rem;
        background:none;
        display: flex;
        align-items: center;
    }

    section.book-stories-cover{
        width:11rem;
        height:15rem;
        border-radius:1rem;
        margin-right:3rem;
        border:0.3rem solid white;
        background: white;
        position: relative;
    }

    img.book-stories-cover{
        border-radius:1rem;
        position: absolute;
    } 

  
}