:root {
  --mainWhite: #f5f5f5f5;
  --mainDark: #333333;
  --mainGreen: #317b22;
  --mainRed: #b80c09;
  --mainBlue: #05668d;
}

body {
  background: var(--mainWhite);
  color: var(--mainDark);
}

.budget-feedback,
.expense-feedback {
  display: none;
}

.budget-form {
  border: 0.15rem solid var(--mainGreen);
  padding: 1rem;
  border-radius: 0.25rem;
}

.expense-form {
  border: 0.15rem solid var(--mainRed);
  padding: 1rem;
  border-radius: 0.25rem;
}

.budget-submit {
  background: transparent;
  border: 0.1rem solid var(--mainGreen);
  color: var(--mainGreen);
}

.expense-submit {
  background: transparent;
  border: 0.1rem solid var(--mainRed);
  color: var(--mainRed);
}

.expense-submit:hover {
  background: var(--mainRed);
  color: var(--mainWhite);
}

.budget-submit:hover {
  background: var(--mainGreen);
  color: var(--mainWhite);
}

.budget-input {
  border: 0.05rem solid var(--mainGreen) !important;
}

.expense-input {
  border: 0.05rem solid var(--mainRed) !important;
}

.expense-amount,
.expense-title {
  color: var(--mainRed);
}

.edit-icon {
  color: var(--mainBlue);
  cursor: pointer;
  font-size: 1rem;
  text-decoration: none !important;
}

.delete-icon {
  color: var(--mainRed);
  cursor: pointer;
  font-size: 1rem;
  text-decoration: none !important;
}

.edit-icon:hover {
  color: var(--mainBlue);
}

.delete-icon:hover {
  color: var(--mainRed);
}

.showItem {
  display: block;
}

.info-title {
  font-size: 1.5rem;
}

.budget {
  font-size: 1.6rem;
  color: var(--mainGreen);
}

.expense {
  font-size: 1.6rem;
  color: var(--mainRed);
}

.balance {
  font-size: 1.6rem;
}

.budget-icon,
.expense-icon,
.balance-icon {
  font-size: 2.5rem;
  color: var(--mainBlue);
}

.showRed {
  color: var(--mainRed);
}

.showGreen {
  color: var(--mainGreen);
}

.showBlack {
  color: var(--mainDark);
}

@media screen and (min-width: 992px) {
  .budget {
    font-size: 2.6rem;
    color: var(--mainGreen);
  }

  .expense {
    font-size: 2.6rem;
    color: var(--mainRed);
  }

  .balance {
    font-size: 2.6rem;
  }

  .budget-icon,
  .expense-icon,
  .balance-icon {
    font-size: 3.5rem;
    color: var(--mainBlue);
  }
}

.list-item {
  flex: 0 0 33.33%;
  text-align: center;
}

.expense-item {
  height: 2rem;
}

@media screen and (max-width: 425px) {
  .info-title {
    font-size: 1rem;
  }

  .budget,
  .expense,
  .balance {
    font-size: 1.25rem;
  }

  .expense-list {
    font-size: 1rem;
  }
}