/* =========================
   RESPONSIVE — ≤380px
========================= */

@media (max-width: 380px) {

  /* BASE FONT */
  * { font-size: 9px; }

  /* HEADER */
  .header-avatar { width: 34px; height: 34px; }
  .header-currency { padding: 3px 9px; }

  /* NAV */
  .nav { height: 66px; }
  .nav button img { height: 23px; width: 23px; }
  .nav button span { font-size: 7px; }

  /* CONTENT */
  .content { padding: 10px; padding-bottom: 66px; }

  /* POPUP */
  .popup-box { padding: 20px 14px 16px; }
}

/* =========================
   RESPONSIVE — ≤340px
========================= */

@media (max-width: 340px) {

  * { font-size: 8px; }

  .header-name { max-width: 80px; font-size: 10px; }
  .header-currency { font-size: 10px; }

  .nav { height: 62px; }
  .nav button img { height: 21px; width: 21px; }
}