/* MEDIA QUERIES */

/* - FONT SIZE SYSTEM (px)
    10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
    SPACING SYSTEM (px)
    2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 */

@media (max-width: 58em) {
  html {
    font-size: 50%;
  }
}

/* TABLETS */
@media (max-width: 44em) {
  .app {
    grid-template-columns: 1fr;
    margin-bottom: 2.4rem;
  }

  .balance {
    grid-column: 1 / 2;
  }

  .operation--transfer {
    margin-top: 2rem;
  }

  .logout-timer {
    font-size: 1.6rem;
    text-align: center;
  }

}

/* PHONES */
@media (max-width: 34em) {
  nav {
    display: grid;
    margin: 0 auto;
    justify-content: center;
    gap: 1.5rem;
    grid-template-columns: 1fr 1fr;
  }

  .logo {
    justify-self: end;
  }

  .login {
    grid-column: 3 / 1;
    justify-self: center;
  }

  .balance__value {
    font-size: 3.6rem;
  }

  .summary {
    display: grid;
    align-items: center;
    grid-template-columns: 0.8fr 1fr;
    margin: 0 auto;
  }

  .summary__label,
  .summary__value {
    margin: 0;
  }
  
  .btn--sort {
    grid-column: -2 / -1;
    margin: 0.8rem 0 0 0;
    padding: 0.5rem 2rem;
    border-radius: 10rem;
    background-color: #66c873;
    color: #fff;
    justify-self: start;
  }

  .btn--sort:hover,
  .btn--sort:focus {
    color: #f0f0f0;
  }


}

/* FIX FOR LOGIN MESSAGE WHEN TYPING */
@media screen and (max-height: 25em) {
  .login__message {
    margin-top: 12rem;
  }
}