@media (max-width:480px){

*{
          margin:0rem;
          padding:0rem;
          user-select:none;
          box-sizing:border-box;
      }
      
      img{width:100%;height:100%;margin:0rem;display: block;}
      a{text-decoration:none}
      
      body{background:rgb(24,24,24);margin:0rem;display:flex;padding:0rem;}

      aside.mobile-asidenav-section{
          width:90%;
          height:100vh;
          background:rgb(24,24,24);
          position:fixed;
          top:0%;
          z-index:100000;
      }
      
      header.mobile-asidenav-header{
          width:100%;
          height:8%;
          background:rgb(24,24,24);
          display:flex;
          justify-content:space-between;
          padding:0 0.5rem 0 0.5rem;
          margin-bottom:1rem;
      }
      
      div#mobile-asidenav-icon{
          width:55%;
          height:100%;
          padding:0.5rem 0 0.5rem 0;
      }
      
      div#mobile-asidenav-exit{
          width:20%;
          height:100%;
          background:none;
          padding:1rem;
              cursor:pointer;

      }
      
      main.mobile-asidenav-body{
          width:100%;
          height:92%;
          overflow-y:scroll;
          
      }
      
      section.mobile-asidenav-content{
          width:100%;
          height:8%;
          background:none;
          padding-right:1rem;
          margin-bottom:0.5rem;
      }
      
      section.mobile-asidenav-container{
          width:100%;
          height:100%;
          border-top-right-radius:2rem;
          border-bottom-right-radius:2rem;
          padding-left:0.5rem;
          display:flex;
      }
      
      div#mobile-asidenav-page-icon{
          width:20%;
          height:100%;
          background:none;
          padding:0.7rem 0.9rem 0.7rem 0.9rem;
      }
      
      div#mobile-asidenav-page-name{
          width:60%;
          height:100%;
          background:none;
          display:flex;
          padding-left:1rem;
          font-family: Arial, Helvetica, sans-serif;
          align-items:center;
          font-weight:bold;
      }
      
      div#mobile-asidenav-page-select{
          width:20%;
          height:100%;
          color:black;
          display:grid;
          place-items:center;
      }
      
      section.mobile-asidenav-selectors-container-section{
          width:100%;
          height:30%;
          background:none;
          margin:0.5rem 0 1rem ;
          display:flex;
          padding-right:1rem;
          justify-content:flex-end;
      }
      
      section.mobile-asidenav-selectors-container{
          width:90%;
          height:100%;
          background:rgb(40,40,40);
          border-left:0.1rem solid grey;
          padding:1rem;
      }
      
      
      div#mobile-asidenav-selector-pages{
          width:100%;
          height:33%;
          border-radius:1rem;
          display:flex;
          padding:1rem;
          color:white;
          font-family: Arial, Helvetica, sans-serif;
          align-items:center;
      }
      
      div#mobile-asidenav-books-number{
          padding:0.5rem 0.8rem 0.5rem 0.8rem;
          border-radius:50%;
          background:dodgerblue;
          font-weight:bold;
      }
      
      section.mobile-aside-profile{
          width:100%;
          height:13%;
          padding:0 1rem 1rem 1rem;
          background:none;
          margin-bottom:4rem;
      }
      
      section.mobile-aside-profile-section{
          width:100%;
          height:100%;
          border-radius:1rem;
          background:rgb(60,60,60);
          display:flex;
          padding:0.5rem 0.2rem 0.5rem 0.2rem;
      }
      
      section.mobile-aside-profile-picture{
          width:19%;
          height:100%;
          background:none;
          padding:0.2rem 0.2rem 0.2rem 0.2rem;
      }
      
      img.mobile-aside-profile{border-radius:50%}
      
      section.mobile-aside-profile-details{
          width:61%;
          height:100%;
          background:none;
          display:flex;
          flex-flow:column;
          color:white;
          font-family: 'Times New Roman', Times, serif;
          padding-left:0.2rem;
          justify-content:center;
          font-family: 'Times New Roman', Times, serif;
      }
      
     
      
      p#mobile-aside-profile-title{
          font-size:0.9rem;
      }
      
      section.mobile-aside-profile-icon{
          width:20%;
          height:100%;
          background:none;
          padding:0.5rem;
      }
      
      /* Sidebar starts hidden */
aside.mobile-asidenav-section{
    transform:translateX(-100%);
    transition:transform 0.3s ease;
}

/* Visible state */
aside.mobile-asidenav-section.active{
    transform:translateX(0);
}


}