*{
          margin:0rem;
          padding:0rem;
          user-select:none;
          box-sizing:border-box;
          scrollbar-width:none ;
      }
 
 main.article-page-section{
        width:40%;
        height: 100vh;
        background:none;
        padding:0.5rem 2rem 2rem 2rem;
        overflow:scroll;
        border-left:0.1rem solid grey;
        border-right:0.1rem solid grey;
    }   
   
   section.article-go-back-section{
       width: 100%;
       height:3rem;
       background: none;
       margin-bottom:1rem;
       display: flex;
       justify-content: space-between;
    }

    div#article-profile{
      width:3rem;
      height:3rem;
      background:none;
      border-radius:50%;
    }

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

    div#article-back{
      width:3rem;
      height:3rem;
      background:white;
      border-radius: 50%;
      margin-bottom:1rem;
      padding:0.5rem;
    }

    section.article-header{
      width:100%;
      height:22rem;
      background:dodgerblue;
      padding:1rem;
    }

    a.article-header-link{
      text-decoration: 0.1rem solid underline black;
      color:black;
    }

    div#article-header-link{
      width:100%;
      height:4.5%;
      background:none;
      display: flex;
      justify-content: flex-end;
      font-weight: bold;
      font-family: Arial, Helvetica, sans-serif;
    }

    div.article-header-title{
      width:100%;
      height:83%;
      background: none;
      border-bottom:0.5rem solid black;
      display:flex;
      flex-flow:column;
      justify-content: center;
      font-weight: bold;
      font-family: Arial, Helvetica, sans-serif;
      padding-top:3rem;
    }

    p#article-header-subtitle{
          font-size:1.1rem;
          margin-bottom:1rem;
          color:black;
          text-decoration: 0.1rem solid underline black;
    }

    p#article-header-title{
          font-size:2.2rem;
          color:white;
    }

    div.article-header-bottom{
      width:100%;
      height:12.5%;
      background:none;
      font-weight: bold;
      display: flex;
      align-items:flex-end;
      color:black;
      justify-content: flex-end;
      font-size:0.9rem;
      font-family: Arial, Helvetica, sans-serif;
    }



    section.article-image-section{
      width:100%;
      height:20rem;
      background:none;
      margin-top:1rem;
      margin-bottom:2rem;
    }

    img.article-image{
      object-fit: cover;
    }



    code.share{
      color:white;
    }

    section.share-these-sites{
      width:100%;
      background:none;
      display:flex;
      margin-top:1rem;
    }

    div#share-social-media,a.share-social-media{
      width:3rem;
      height:3rem;
      border:0.05rem solid grey;
      margin-right:2rem;
    }

    article.article-text{
      margin-top:4rem;
      color:white;
      font-family: Arial, Helvetica, sans-serif;
      line-height: 1.8;
      word-spacing:10px;
    }

    div#text-middled{
      width:100%;
      display:flex;
      justify-content: center;
      margin:3rem 0 3rem 0;
    }

    p#text-middled{
      font-size:1.3rem;
      font-weight: bold;
      text-decoration: 0.1rem solid underline white;
    }

    code.highlight{color:dodgerblue}

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

    div#text-middled{
      width:100%;
      display:flex;
      justify-content: center;
      margin:5rem 0 5rem 0;
    }
    }


    
    @media (max-width:480px){
        
        
        
   *{
          margin:0rem;
          padding:0rem;
          user-select:none;
          box-sizing:border-box;
          scrollbar-width:none ;
      }
 
 img{width:100%;height:100%}
 
 main.article-page-section{
        width:100%;
        height: 100vh;
        background:rgb(24,24,24);
        padding:0.5rem 1rem 1rem 1rem;
        overflow:scroll;
        border-left:none;
        border-right:none;
    }   
   
   section.article-go-back-section{
       width: 100%;
       height:3rem;
       background: none;
       margin-bottom:1rem;
       display: flex;
       justify-content: space-between;
    }

    div#article-profile{
      width:3rem;
      height:3rem;
      background:none;
      border-radius:50%;
    }

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

    div#article-back{
      width:3rem;
      height:3rem;
      background:white;
      border-radius: 50%;
      margin-bottom:1rem;
      padding:0.5rem;
    }

    section.article-header{
      width:100%;
      height:22rem;
      background:dodgerblue;
      padding:1rem;
    }

    a.article-header-link{
      text-decoration: 0.1rem solid underline black;
      color:black;
    }

    div#article-header-link{
      width:100%;
      height:4.5%;
      background:none;
      display: flex;
      justify-content: flex-end;
      font-weight: bold;
      font-family: Arial, Helvetica, sans-serif;
    }

    div.article-header-title{
      width:100%;
      height:83%;
      background: none;
      border-bottom:0.5rem solid black;
  
      font-weight: bold;
      font-family: Arial, Helvetica, sans-serif;
      padding-top:3rem;
    }

    p#article-header-subtitle{
          font-size:1.1rem;
          margin-bottom:1rem;
          color:black;
          text-decoration: 0.1rem solid underline black;
    }

    p#article-header-title{
          font-size:2.2rem;
          color:white;
    }

    div.article-header-bottom{
      width:100%;
      height:12.5%;
      background:none;
      font-weight: bold;
      display: flex;
      align-items:flex-end;
      color:black;
      justify-content: flex-end;
      font-size:0.9rem;
      font-family: Arial, Helvetica, sans-serif;
    }



    section.article-image-section{
      width:100%;
      height:20rem;
      background:none;
      margin-top:1rem;
      margin-bottom:2rem;
    }

    img.article-image{
      object-fit: cover;
    }



    code.share{
      color:white;
    }

    section.share-these-sites{
      width:100%;
      background:none;
      display:flex;
      margin-top:1rem;
    }

    div#share-social-media,a.share-social-media{
      width:3rem;
      height:3rem;
      border:0.05rem solid grey;
      margin-right:2rem;
    }

    article.article-text{
      margin-top:4rem;
      color:white;
      font-family: Arial, Helvetica, sans-serif;
      line-height: 1.8;
      word-spacing:10px;
    }

    div#text-middled{
      width:100%;
      display:flex;
      justify-content: center;
      margin:3rem 0 3rem 0;
    }

    p#text-middled{
      font-size:1.3rem;
      font-weight: bold;
      text-decoration: 0.1rem solid underline white;
    }

    code.highlight{color:dodgerblue}

    

    }


    
    @media (max-width:480px){
        
        
        
   *{
          margin:0rem;
          padding:0rem;
          user-select:none;
          box-sizing:border-box;
          scrollbar-width:none ;
      }
 
 img{width:100%;height:100%}
 
 main.mobile-article-page-section{
        width:100%;
        height: 100vh;
        background:rgb(24,24,24);
        padding:0.5rem 1rem 1rem 1rem;
        overflow:scroll;
        border-left:none;
        border-right:none;
    }   
   
   section.mobile-article-go-back-section{
       width: 100%;
       height:3rem;
       background: none;
       margin-bottom:1rem;
       display: flex;
       justify-content: space-between;
    }

    div#mobile-article-profile{
      width:3rem;
      height:3rem;
      background:none;
      border-radius:50%;
    }

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

    div#mobile-article-back{
      width:3rem;
      height:3rem;
      background:white;
      border-radius: 50%;
      margin-bottom:1rem;
      padding:0.5rem;
    }

    section.mobile-article-header{
      width:100%;
      height:22rem;
      background:dodgerblue;
      padding:1rem;
    }

    a.mobile-article-header-link{
      text-decoration: 0.1rem solid underline black;
      color:black;
    }

    div#mobile-article-header-link{
      width:100%;
      height:4.5%;
      background:none;
      display: flex;
      justify-content: flex-end;
      font-weight: bold;
      font-family: Arial, Helvetica, sans-serif;
    }

    div.mobile-article-header-title{
      width:100%;
      height:83%;
      background: none;
      border-bottom:0.5rem solid black;
  
      font-weight: bold;
      font-family: Arial, Helvetica, sans-serif;
      padding-top:3rem;
    }

    p#mobile-article-header-subtitle{
          font-size:1.1rem;
          margin-bottom:1rem;
          color:black;
          text-decoration: 0.1rem solid underline black;
    }

    p#mobile-article-header-title{
          font-size:2rem;
          color:white;
    }

    div.mobile-article-header-bottom{
      width:100%;
      height:12.5%;
      background:none;
      font-weight: bold;
      display: flex;
      align-items:flex-end;
      color:black;
      justify-content: flex-end;
      font-size:0.9rem;
      font-family: Arial, Helvetica, sans-serif;
    }



    section.mobile-article-image-section{
      width:100%;
      height:20rem;
      background:none;
      margin-top:1rem;
      margin-bottom:2rem;
    }

    img.mobile-article-image{
      object-fit: cover;
    }



    code.mobile-share{
      color:white;
    }

    section.mobile-share-these-sites{
      width:100%;
      background:none;
      display:flex;
      margin-top:1rem;
    }

    div#mobile-share-social-media,a.mobile-share-social-media{
      width:3rem;
      height:3rem;
      border:0.05rem solid grey;
      margin-right:2rem;
    }

    article.mobile-article-text{
      margin-top:4rem;
      color:white;
      font-family: Arial, Helvetica, sans-serif;
      line-height: 1.8;
      word-spacing:10px;
    }

    div#mobile-text-middled{
      width:100%;
      display:flex;
      justify-content: center;
      margin:3rem 0 3rem 0;
    }

    p#mobile-text-middled{
      font-size:1.3rem;
      font-weight: bold;
      text-decoration: 0.1rem solid underline white;
    }

    code.mobile-highlight{color:dodgerblue}

    

    }