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


    main.profile-page-section{
        width:40%;
        height: 100vh;
        background:none;
        padding:0.5rem 2rem 2rem 2rem; 
        border-left:0.1rem solid grey;
        border-right:0.1rem solid grey;
        overflow:scroll;

    }

    section.profile-page-header{
        width:100%;
        height:40%;
        background:none;
        border-radius: 1rem;
        position:relative;
    }

    div#profile-picture{
        width:5rem;
        height:5rem;
        background:none;
        border-radius: 50%;
        position: absolute;
        bottom:-2.5rem;
        left:50%;
        transform: translateX(-50%);
        border:0.1rem solid white;
        z-index:1000;
    }   

    img.profile-image{
        position: absolute;
        z-index:10;
        border-radius: 1rem;
    }

    img.profile-picture{
        border-radius:50%;
    }

    section.profile-archive-record{
        width:100%;
        height: 28%;
        background:none;
        margin-top:3rem;
        display: flex;
    }


    section.profile-info-section{
        width:65%;
        height:100%;
        background:none;
        border-top:0.1rem solid white;
        border-bottom: 0.1rem solid white;
        padding:0.4rem;
        display: flex;
        flex-flow:column;
        justify-content: center;
    }

    section.profile-info-aside{
        width:35%;
        height:100%;
        background:none;
        border-top:0.1rem solid white;
        padding:0.5rem;
        border-bottom: 0.1rem solid white;
    }

    
    div.profile-table-info{
        display:flex;
        background: none;
        margin-bottom:0.5rem;
        font-family: Arial, Helvetica, sans-serif;
        color:white;
    }

    div#profile-title{
        width:50%;
    }

    div#separator{
        width:5%;
    }

    div#profile-detail{
        width:45%;
    }

    div#profile-info-aside-image{
        width:100%;
        height:100%;
        background:none;
        border:0.1rem solid white;
    }

    section.profile-description{
        width:100%;
        height:58%;
        background:white;
        padding-top:0.3rem;
        border-bottom-left-radius: 2rem;
        border-bottom-right-radius: 2rem;
        padding:0.8rem;
        
        font-family: Arial, Helvetica, sans-serif;
        word-spacing: 4px;
    }

    p#profile-description{
        line-height:1.3;
    }
               
         
   
    section.exiting-profile-page{
        display:none;
    }

    @media (max-width:768px) {
        
        main.profile-page-section{
        width:100%;
        height: 100vh;
        background:none;
        padding:6rem 4rem 2rem 4rem; 
        overflow:scroll;
        border:none;
       }

       section.exiting-profile-page{
        display:block;
        width:100%;
        height:10%;
        background:none;
        position: absolute;
        top:0%;
        padding:0.4rem;
    }

    div#exiting-profile-page{
        width:8%;
        height:100%;
        background:none;
        padding:0.2rem;
    }   

    section.profile-page-header{
        width:100%;
        height:60%;
        background:none;
        border-radius: 1rem;
        position:relative;
    }

     section.profile-description{
        width:100%;
        height:58%;
        background:white;
        padding-top:0.3rem;
        border-bottom-left-radius: 2rem;
        border-bottom-right-radius: 2rem;
        padding:0.8rem;
        font-size:0.9rem;
        font-family: Arial, Helvetica, sans-serif;
        word-spacing: 4px;
    }

     section.profile-archive-record{
        width:100%;
        height: 38%;
        background:none;
        margin-top:3rem;
        display: flex;
    }


    section.profile-info-section{
        width:65%;
        height:100%;
        background:none;
        border-top:0.1rem solid white;
        border-bottom: 0.1rem solid white;
        padding:0.4rem;
    }





}