* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  height: 100vh;
  background-color: aliceblue;
}
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
}
.alert {
  display: none;
}
.welcome {
  font-size: 1.2rem;
  font-weight: 500;
}

.logo {
  height: 3rem;
}

.login {
  display: flex;
}

.login__input {
  border: none;
  padding: 0.5rem 2rem;
  font-size: 1.2rem;
  font-family: inherit;
  text-align: center;
  width: 7rem;
  border-radius: 10rem;
  margin-right: 1rem;
  color: inherit;
  border: 1px solid #fff;
  transition: all 0.3s;
}

.login__input:focus {
  outline: none;
  border: 1px solid #ccc;
}

.login__input::placeholder {
  color: #bbb;
}

.login__btn {
  border: none;
  background: none;
  font-size: 2.2rem;
  color: inherit;
  cursor: pointer;
  transition: all 0.3s;
}

.login__btn:hover,
.login__btn:focus,
.btn--sort:hover,
.btn--sort:focus {
  outline: none;
  color: #777;
}

.app {
  display: grid;
  grid-template-columns: 4fr 3fr;
  max-width: 65rem;
  margin: 0 auto;
  margin-top: 1rem;
  gap: 2rem;
  opacity: 0;
}
.balance {
  display: flex;
  justify-content: space-between;
  grid-column: 1/-1;
  align-items: center;
  margin-bottom: 2rem;
}
.current-balance {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.balance-p {
  font-size: 1.5rem;
  font-weight: 400;
}
.balance-sub {
  color: grey;
}
.display p {
  font-size: 2rem;
  font-weight: 500;
}
.movement {
  overflow-y: scroll;
  border-radius: 1rem;
  background-color: #fff;
  grid-row: 2 / span 3;
  max-height: 40rem;
}

.movement-row {
  border-bottom: 0.01rem solid gray;
  display: flex;
  justify-content: space-around;
  align-items: center;

  padding: 1rem 0;
}
.movement-type-depoist {
  background-image: linear-gradient(to top left, #39b385, #9be15d);
}
.movement-type-withdraw {
  background-image: linear-gradient(to top left, #e52a5a, #ff585f);
  border-radius: 0.5rem;
}
.movement-type {
  font-size: 0.8rem;
  font-weight: 400;
  color: #fff;
  align-self: self-start;
  padding: 0.1rem 1rem;
  border-radius: 1rem;
}
.days,
.date {
  color: grey;
  font-weight: 400;
  font-size: 0.8rem;
}
.amount {
  font-size: 1.2rem;
  color: rgba(0, 0, 0, 0.685);
}
.summary {
  grid-row: 5/6;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.sum-detail {
  display: flex;
  gap: 5rem;
}
.sum-value {
  font-size: 1.2rem;
  padding-left: 0.5rem;
}
.in,
.interest {
  color: #39b385;
}
.out {
  color: #e52a5a;
}
.sort {
  color: black;
  text-decoration: none;
}
.sort:hover {
  color: grey;
}

.transfer-money {
  background-image: linear-gradient(to top left, #ffb003, #ffcb03);
}
.operation {
  padding: 2rem 4rem;
  border-radius: 1rem;
}
.form {
  display: grid;
  width: 100%;
  grid-template-columns: 1.5fr 1.5fr 1fr;

  grid-row: auto auto;
  gap: 0.5rem;
}
.request-loan {
  background-image: linear-gradient(to top left, #39b385, #9be15d);
}
.head {
  font-weight: 600;
  font-size: 1rem;
  padding-bottom: 0.5rem;
}
.form-2 {
  display: grid;
  grid-template-columns: 2.5fr 1fr 2.5fr;
  gap: 0.5rem;
  grid-template-rows: auto auto;
}
.request-to {
  grid-row: 2;
}
.transction-block {
  flex: 1;
  min-height: 0;
}
.transction {
  grid-row: 2 / span 3;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto;
}
.close-account {
  background-image: linear-gradient(to top left, #e52a5a, #ff585f);
}
.input {
  border: none;
  background-color: #ffffff7c;
  border-radius: 0.5rem;
  width: 9rem;
}
.transction-butt {
  padding: 0.2rem 1rem;
  border: none;
  border-radius: 0.5rem;
  background-color: #fffffffa;
}
.transfer-to,
.request-to {
  color: rgba(0, 0, 0, 0.705);
}
.logout {
  margin-left: auto;
  color: rgba(0, 0, 0, 0.651);
}
.logout-time {
  color: black;
  font-weight: 500;
}
footer {
  font-size: 1rem;
  font-weight: 500;
  grid-column: 1/-1;
  text-align: center;
  margin-bottom: 1rem;
}
.icon {
  display: inline-block;
}
footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
footer.icon {
  font-size: 1.5rem;
  cursor: pointer;
  transition: color 0.3s;
}
footer .icon:hover {
  color: #0077b5;
}