*{
          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;}

      
      section.intro-header{
        width:100%;
        height:55px;
        background:#000;
        position: relative;
        top:0%;
        z-index:1000000;
        display:flex;
        justify-content: space-between;
      }

      div#nn-logo{
        height:100%;
        background:none;
        padding:0.2rem;
      }

       div#nn-site-name{
        height:100%;
        background:none;
        padding:0.4rem;
      }

      header.nn-header{
        position: relative;
        height: auto ;
        margin-top:none;
      }

     
      div.hero-bg{
        margin-top:none;
        position: absolute;
      
    
      }

      section.header-nagivation-mother{
        width:100%;
        height:10%;
        position: absolute;
        top:0%;
        background:none;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      section.header-nagivation{
        height:100%;
        background:none;
        display:flex;
        color:white;
      }

      div#header-nagivation-link{
        height:100%;
        padding:1rem;
        margin-right:5rem;
      }

      div.active-link{
        background:dodgerblue;
        border-bottom-left-radius:20px ;
        border-bottom-right-radius:20px ;
      }
      

      a.header-nagivation-link{
        text-decoration: none;
      }

      p#header-nagivation-link-name{
        color:white;
        font-weight: bold;
      }

      


      section.nemx-logo{
        width:100%;
        height:26%;
        background:none;
        position: absolute;
        top:10%;
        padding-top:1rem;
        display: flex;
        
        justify-content: center;
      }


      @font-face{
         font-family: 'SigmarOneLocal';
         src: url('SigmarOne.ttf')
         format('truetype');

      }

      p#nemx-logo{
        -webkit-text-stroke: 6px black;
        color:white;
        font-family: 'SigmarOneLocal';
        font-size: clamp(4em, 10.8vw, 10.8rem);
      }



 

    section.header-content-section{
      width:100%;
      height:54%;
      background:none;
      display: flex;
      padding:0 4rem 0 4rem;
       position: absolute;
      bottom:0%;
      justify-content: space-between;
    }

    section.header-content-section-left{
      width:30%;
      height:90%;
      background: none;
      margin-top:2%;
    }

    p#header-left-content-title{
      font-size:1.5rem;
      font-weight:lighter;
      margin-bottom:1rem;
    }

    p#header-left-content-paragraph{
      margin-bottom:1rem;
      word-spacing: 5px;
      line-height: 20px;
    }

    section.header-left-content-learn-more-section{
      width:100%;
      height:30%;
      background:none;
      display:flex;
      align-items: center;
    }

    div#header-left-content-learn-more-button{
      width:40%;
      height:50%;
      background:black;
      border-radius:2rem;  
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    p#header-left-content-learn-more-button-title{
      color:white;
      font-weight: bold;
    }

    div#header-left-content-learn-more-button-arrow{
      position: absolute;
      top:25%;
      right:-10%;
      background: white;
      border:0.1rem solid black;
      width:25%;
      height: 55%;
      border-radius:50% ;
      padding:0.3rem;
    }


    /* HEADER CONTENT SECTION RIGHT */

    section.header-content-section-right{
      width:30%;
      height:100%;
      background:none;
      display: flex;
      flex-flow:column;
      align-items:flex-end;
      padding:0.5rem;
    }

    section.profile-card{
      width:70%;
      height:100%;
      background:black;
      border-radius: 2rem;
    }

    img.profile-card{border-radius:2rem}

    div#profile-card-image{
       width:100%;
       height:60%;
       background:none;
       border-radius:2rem;
    }

    div#profile-card-content{
       width:100%;
       height:40%;
       background:none;
       display:flex;
       flex-flow:column;
       align-items: center;
    }


    p#authorization-section{
      margin-top: 1rem;
    }
    p#authorization-section,p#issueer-title{
      margin-bottom:1rem;
      color:white;
    }

    div.view-section{
      width:60%;
      height:30%;
      background:white;
      border-radius:2rem;
      padding:0.3rem;
      display: flex;
    }

    div#view-icon{
      width:30%;
      height:100%;
      background:black;
      border-radius:50%;
      padding:0.3rem;

    }

    div#view-button{
      width:70%;
      height:100%;
      display: flex;
      padding-left:1rem;
      align-items: center;
      background:none;
    }

    p#view-profile{
      font-weight:bold;
      color: black;
    }

    div#profile-username{
      width:100%;
      height:5%;
      display:flex;
      background:none;
      align-items: flex-start;
      padding-right :2rem;
      justify-content: flex-end;
      font-weight: bold;
    }





    /*  PRESENTING.... THE FUCKING MAIN */

    
    main.nemx-main-section{
      width:100%;
      height:100vh;
      background:none;
      display:flex;
      overflow:hidden;
      align-items:flex-start;
    }
    

    
    
    /*  ASIDE  NAVIAGATION */


    aside.side-navigation{
      width:30%;
      height:100vh;
      background:rgb(24, 24 ,24);
      position: sticky;
      top:0%;
      padding-top:none;
    }



    div.sidenav-header{
      width: 100%;
      height:10%;
      background:rgb(24, 24 ,24);
      padding:0.2rem 11rem 0.2rem 1rem;
      margin-bottom:2rem;
    }


    section.sidenav-links-section{
      width:100%;
      height:100%;
      background:none;
      padding-right:1rem;
    }

    section.sidenav-link-container{
      width:100%;
      height: 10%;
      margin-bottom:1rem;
      display: flex;
      align-items: center;
      border-top-right-radius: 2rem;
      border-bottom-right-radius: 2rem;
      padding:0 0 0 1rem;
      color:white;
    }

    section#sidenav-link-container-active{
      background:dodgerblue;
      color:black;
    }

    div#sidenav-link-icon{
      width:13%;
      height:75%;
      background:none;
      padding:0.4rem;
      margin-right:0.5rem;
    }

    select.sidenav-link-selector {
      width:60%;
      padding: 12px 16px;
      font-size: 16px;
      color: black;
      background:dodgerblue;
      /*border: 1px solid rgba(255,255,255,0.15);
      */
      border:none;
      appearance: none; /* removes default arrow */
      -webkit-appearance: none;
      -moz-appearance: none;
      margin-right:1rem;
      cursor: pointer;
      font-weight: bold;
    }
     

     select.sidenav-link-selector option {
      color:white;
      background: rgb(24, 24 ,24);
     }
    section#sidenav-link.selector-acitve{color: black;background: dodgerblue !important;}

     
    select::selection{border:none}


  
    section.links-options-without-section{
      width:100%;
      height:100%;
      background:none;
      padding-top:3rem;
    }

    div#sidenav-link-iconno-options{
      width:13%;
      height: 100%;
      padding:0.4rem;
      background:none;
    }
    
    section.sidenav-no-options-link-container{
      width:100%;
      height:8.5%;
      background:none;
      border-bottom-right-radius:2rem;
      border-top-right-radius:2rem;
      padding-left:1rem;
      display: flex;
      margin-bottom:1rem;
    }

    a#link-no-options-section, div#link-no-options-section{
      width:87%;
      height:100%;
      background:none;
    }

     a.link-no-options-section, div.link-no-options-section{
      width:72%;
      height:100%;
      background:none;
    }



    /* NUMBER OF BOOKS */


    div.number-of-books{
      width:15%;
      height:100%;
      background: none;
      display: grid;
      place-items: center;
    }

    div#number-of-books{
      width:55%;
      height:65%;
      background:dodgerblue;
      border-radius: 50%;
      font-weight: bold;
      display: grid;
      place-items: center;
      color:black;
    }


     div#link-no-options-section,div.link-no-options-section{
      padding-left:1.5rem;
      display: flex;
      align-items: center;
     }

     p#sidenav-no-options-link{
      font-weight: bold;
      font-size:1.1rem;
      color:white;
      font-family: Arial, Helvetica, sans-serif;
     }
  

     section.aside-profile-area{
      width:100%;
      height:15%;
      background:none;
      padding:0.3rem 0.3rem 0.3rem 1rem;
     }

     div.aside-profile-area-bar{
      width: 100%;
      height:100%;
      background: rgb(48, 48, 48);
      border-radius:1rem;
      padding:0.5rem;
      display: flex;
     }

     div#aside-profile-container{
      width:15%;
      height: 100%;
      padding:0.3rem;
      background:none;
     }

     div.aside-profile-container{
      width:100%;
      height:100%;
      border-radius: 50%;
     }

     div#aside-profile-info{
      width:70%;
      height:100%;
      background:none;
      color:white;
      font-weight: bold;
      padding:0 0 0 1rem;
      display: flex;
      flex-flow:column;
      justify-content: center;
     }

     div#aside-profile-icon{
      width:15%;
      height:100%;
      background:none;
      padding:0.3rem;
     }

     img#aside-profile-picture{border-radius:50%}

     p#aside-profile-name-title{
      font-size:1.1rem;
     }




    select.sidenav-link-normal,a.sidenav-link-normal{
      width:60%;
      padding: 12px 16px;
      font-size: 16px;
      color: white;
      background:none;
      /*border: 1px solid rgba(255,255,255,0.15);
      */
      border:none;
      appearance: none; /* removes default arrow */
      margin-right:1rem;
      cursor: pointer;
      font-weight: bold;
      font-family: Arial, Helvetica, sans-serif;
    }
     
    section#sidenav-link.selector-acitve{color: black;}






    /*  Content FEED */ 

    main.main-content-feed{
      width:40%;
      height:100vh; 
      background:none;
      border-left:0.1rem solid grey;
      border-right:0.1rem solid grey;
      padding:2rem 4rem 2rem 4rem;
      overflow-y: auto;
      position:sticky;
      top:0;
    }


    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) {
    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}
  
}