body {
  font-size: 10px;
  background: linear-gradient(#222F21 0%, #2E302E 23%);
  background-repeat: no-repeat;
  height: 786rem;
  overflow: hidden;
  color: #E7EEE6;
  font-family: Ibarra Real Nova;
  margin: 0;
  /*
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(12, 1fr);
  */
}

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(12, 1fr);
}

 /*NOTE: LARGE MOBILE SCREEN DIMENSIONS: 425PX BY 786PX*/
.header {
  background: linear-gradient(#7BAE74, #519349 29%);
  font-size: 3rem;
  border-radius: 0 0 5rem 0;
  font-family: Jura;
  padding: 0.1rem;
  display: grid;
  grid-gap: 10px;
  grid-column-end: span 12; 
  margin-bottom: 1rem;
}
.headertxt {
  margin-left: 1rem;
  margin-top: 0;
  margin-bottom: 0;
}
    
.subtitle {
  background-color: #509348;
  border-radius: 0 5rem 5rem 0;
  font-size: 1.8rem;
  padding-left: 1.4rem;
  display: grid;
  grid-gap: 10px;
  grid-column-end: span 12;
}
.littletitle {
  font-style: italic;
  font-size: 1.2rem;
  margin-top: -2.6rem;
  margin-bottom: 0;
}

/*ADAPTED CODE FROM https://www.w3schools.com/howto/howto_js_tabs.asp*/
/* Style the tab */
.tab {
  overflow: hidden;
  background-color: #E7EEE6;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 200;
}
 /*Style the buttons inside the tab */
.tab button {
  background-color: inherit;
    width: 50%;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}
/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccd6cb;
}
/*END OF CODE FROM https://www.w3schools.com/howto/howto_js_tabs.asp*/

.tabcontent {
  /*display: none;*/
  padding: 10px 10px;
  animation: fadeEffect 0.5s;
}
@keyframes fadeEffect {
  from {opacity: 0};
  to {opacity: 1};
}

/*HOME TAB*/
.topbox {
  background-color: #41733B;
  font-size: 3.5rem;
  border-radius: 1.5rem;
  border-style: solid;
  border-color: #509348;
  border-width: 0.5rem;
  margin-top: 1.5rem;
  grid-column-end: span 8;
  padding-top: 1rem;
}
#expenseResult {
  font-size: 2.5rem;
  text-align: center;
  margin-top: -4rem;
  margin-bottom: 1rem;
  margin-left: 3rem;
  /*padding-top: -2rem;*/
}

.inputexpense {
  font-size: 2.5rem;
  grid-column-end: span 8;
  text-align-last: center;
  background-color: #41733B;
  border-radius: 1.5rem;
  border-style: solid;
  border-color: #509348;
  border-width: 0.5rem;
  margin-top: 0;
}
#expense {
  background-color: #41733B;
  border: none;
  border-radius: 1.5rem;
  align-content: center;
  font-size: 1.8rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
::placeholder {
  color: #94B090;
}
.budgetcolor {
  color: #E7EEE6;
  font-family: Ibarra Real Nova
}

#submitButton {
  background-color: #41733B;
  font-size: 1.8rem;
  border-radius: 1.5rem;
  border-style: solid;
  border-color: #509348;
  border-width: 0.5rem;
  border-bottom-width: 2rem;
  padding-left: 4rem;
  padding-right: 4rem;
  margin-top: 0;
  color: #E7EEE6;
  font-family: Ibarra Real Nova;
  grid-column-end: span 8;
  transition: transform 0.3 ease-in-out;
}
#submitButton:active {
  transform: scaleY(0.90);
}
.undersubmitone {
  background-color: #509348;
  font-size: 1rem;
  border-radius: 0 0 1.5rem 1.5rem;
  border-width: 0.5rem;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 2rem;
  padding-bottom: 1rem;
  margin-top: -2.6rem;
  grid-column-end: span 8;
  text-align: center;
}

.inputbudget {
  margin-top: 0;
  grid-column-start: 6;
  grid-column-end: span 7;
  text-align-last: center;
  background-color: #41733B;
  border-radius: 1.5rem;
  border-style: solid;
  border-color: #509348;
  border-width: 0.5rem;
  font-size: 2.5rem;
  padding-top: 0.8rem;
}
#budget {
  background-color: #41733B;
  border: none;
  border-radius: 1.5rem;
  align-content: center;
  font-size: 1.6rem;
  padding-top: 1rem;
  margin-bottom: 1rem;
}

#submitBudget {
  margin-top: 0;
  grid-column-start: 6;
  grid-column-end: span 7;
  background-color: #41733B;
  font-size: 1.4rem;
  border-radius: 1.5rem;
  border-style: solid;
  border-color: #509348;
  border-width: 0.5rem;
  border-bottom-width: 2rem;
  padding-left: 4rem;
  padding-right: 4rem;
  color: #E7EEE6;
  font-family: Ibarra Real Nova;
  transition: transform 0.3 ease-in-out;
}
#submitBudget:active {
  transform: scaleY(0.90);
}
.undersubmitright {
  background-color: #509348;
  font-size: 1rem;
  border-width: 0.5rem;
  padding-left: 2rem;
  padding-right: 2rem;
  grid-column-start: 6;
  grid-column-end: span 7;
  border-radius: 0 0 1.5rem 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-top: -2rem;
  text-align: center;
}

/*START OF CODE FROM https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/*END OF CODE FROM https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp*/


/*LIST TAB*/
.listbox {
background-color: #4D8647;
  font-size: 2rem;
  border-radius: 1.5rem;
  border-style: solid;
  border-color: #509348;
  border-width: 0.6rem;
  padding-left: 2rem;
  padding-right: 2rem;
  margin-top: 2rem;
  grid-column-end: span 7;
  text-align: center;
  /*max-height: 41rem;*/
  /*overflow-y: scroll;*/
}
#listResult {
  list-style-type: none;
  padding-left: 0;
}
li {
  margin-top: 1rem;
}

.warningbox {
  background-color: #358AC8;
  grid-column-start: 8;
  grid-column-end: span 5;
  margin-top: 21rem;
  padding: 3rem;
  padding-top: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 1.5rem;
}
#warningResult {
  margin-top: 0;
  font-size: 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-weight: 600;
  text-align: center;
}
#tinyWarning {
  font-size: 3rem;
  text-align: center;
}