/* Mobile Phones: 500px and below */
@media (max-width: 500px) {
  /* ==================== BASICS ==================== */

  html {
    font-size: 65%;
  }

  .my-container {
    width: 90%;
    border-radius: 10px;
  }

  .gap{
    height: 59.27px;
  }

  section{
    min-height: calc((100vh - 59.27px));
  }

  /* ==================== HEADER ==================== */
  .nav {
    padding: 1rem;
  }

  .logo span {
    padding: 10px;
    font-size: 1.2rem;
  }

  header {
    padding: 1.5rem 0rem;
  }

  .navbar{
    padding: 0rem 0.5rem;
  }

  /* ==================== HOME PAGE ==================== */

  .left h1 {
    font-size: 2rem;
  }

  .left p,
  .profile-right p {
    font-size: 0.95rem;
  }

  .stat h2 {
    font-size: 1.2rem;
  }

  .stat p {
    font-size: 0.85rem;
  }

  /* ==================== ABOUT PAGE ==================== */

  .social-icons {
    gap: 0.5rem;
    padding: 0.5rem;
  }
}