@media (max-width:820px){ /*was previously 768*/
  
  /* ==============================
     MAIN CONTENT
     ============================== */
  .main-menu-title {
    margin: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .main-social-icon {
    width: 4rem;
    height: 4rem;
  }
  
  .profile-pic {
    display: flex;
    margin: auto;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    justify-content: center;
    border: 4px solid var(--color-primary-dark);
  }
  
  .quick-menu{
    display: flex;
    flex-direction:column;
    align-items: stretch;
    text-align: center;
    gap: 1rem;
    background-color: var(--color-primary);
    border-radius: 1rem;
    padding: 4rem;
    justify-content: center;
    width: 40%;
    /* ensure there's some space between quick menu and footer on narrow viewports */
    margin-bottom: 3rem;
     /*Fixes the weird issue of where on mobile devices like a iPhone SE or Samsung S8, 
                          the footer touches the quick menu. This issue seems to arise from using "margin-top: auto;"
                          in the footer in this same file (i.e., for mobile view only). */
                          /* Seems I was wrong about needing what I talked about here for the .footer. hmm.. */
  }

  .quick-menu a {
    text-decoration: none;
    color: inherit;
    display: block;
  }

  .quick-menu-buttons{
    background-color: var(--color-white);
    border-radius: 2rem;
    height: 3rem;
    width:auto;
    overflow: hidden;
    align-content: center;
    box-shadow: 3px 3px 5px var(--color-box-shadow);
    justify-content: center;
  }

  .qmb-text{
    font-size: 2rem;
  }

  
  /* ==============================
   OTHERS
   ============================== */

  .center{
    display:flex;
    justify-content: center;
  }
}