/* =============================
=============== RESPONSIVE
============================== */

/* Desktop LG
---------------- */
@media only screen and (min-width: 1200px)  {

      h2 {
        width: 10rem;
        overflow-wrap: break-word;
      }
  
      #page {
        display: grid;
        grid-template-rows: min-content auto min-content;
      }

      .header-wrapper, main, .footer-wrapper {
        /* width: 1024px; */
        width: 90%;
      }
  
      .page-content {
        /* width: 1024px; */
        width: 90%;
        margin: auto;
        margin-top: 20vh;
      }

      ::-webkit-scrollbar { display: none; }
  
      #hero {
        height: 100%;
        position: fixed;
        width: 20%;
        min-width: 180px;
        max-width: 280px;
      }
 
      #hero .embelm {
        margin: 0;
        background-size: 3rem;
      }
  
      .bio {
        margin-top: 0;
        display: flex;
        flex-direction: column;
        /* gap: .5rem; */
      }
      
      .bio {
        animation: contentSortAnim .4s cubic-bezier(0.68, -0.6, 0.32, 1.6) .1s 1 forwards;
      }
    
    @keyframes contentSortAnim {
        from { gap: 0rem; }
        to { gap: .5rem; }
    }


      .bio h1 { font-size: 24px; }
  
      main {
        flex: 2;
        /* overflow-y: scroll; */
        width: auto;
        margin-left: calc(280px + 112px);
        margin-bottom: 5rem;
      }
  
      header {
        position: fixed;
        width: 100%;
        z-index: 1;
        background-color: rgba(255, 255, 255, 0.65);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter:  blur(20px);
        box-sizing: border-box;
        /* padding: 2rem 20%; */
        margin: auto;
        box-shadow: 0px 1px 0 0 #fff;
      }
  
      footer {
        display: none;
      }

}

/* Desktop SM
---------------- */
@media only screen and (min-width: 640px) and (max-width: 1199px)
{

    h2 {
      width: 10rem;
      overflow-wrap: break-word;
    }
    
    #contact-list {
        display: none;
    }

    header, main, .page-content, .footer-wrapper {
        /* width: calc(80vw - 800 * ((100vw - 600px) / 1600)); */
        width: 600px;
    }

    .page-content {
        margin: auto;
    }

    .bio .copyright, .bio .embelm {
        display: none;
    }

    .bio p, .bio a {
        font-size: 1.125rem;
    }
}

/* Mobile
---------------- */
@media only screen and (max-width: 640px) {

    .logo-name > a[title="name"] {
      display: none;
    }

    .bio .copyright, .bio .embelm {
        display: none;
    }

    #contact-list {
      display: none;
      gap: 1rem;
    }

    .footer-links {
      gap : .5rem;
    }

    #contact-list .svg24 {
      width: 32px;
      height: 32px;
      background-size: 32px 32px !important;
    }

    .page-content, .footer-wrapper {
        padding: 0 1.5rem;
    }

    header {
        padding: 2rem 1.5rem;
    }

    .work-card {
        flex-direction: column;
        padding: 1.5rem;
    }

    .work-card-wrapper {
      margin-top: 0;
    }


    .work-card img {
      width: 60%;
    }

    #articles {
        flex-direction: column;
    }
    .articles-wrapper {
        margin-left: 0;
    }
}