:root{
    --background: #F6CECC;
    --button: #F9E1DF;
    --secondary: #EF8A9A;
    --sharp: #FAB512;
    --correct: #42887C80;
    --breakpoint-xs:0;
    --breakpoint-sm:576px;
    --breakpoint-md:768px;
    --breakpoint-lg:992px;
    --breakpoint-xl:1200px;
  }

body{
  background-color: var(--background);
  margin-top: 70px;
}

a {
  text-decoration: none;
  color: black;
}

.back{
  font-size: 30px;
  position: absolute;
  top: 30px;
  left: 20px;
}

body > div{
  margin: 0 50px;
}
  
.piggyBank{
  display: flex;
  margin-bottom: 70px;
}

#piggyBank {
  margin: 0 auto;
  height: 250px;
}

#current{
  font-size: 60px;
  text-align: center;
}

.cards{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.cards a{
  height: 150px;
  max-width: 250px;
  background-color: var(--button);
  margin: 10px 10px;
  border-radius: 20%;
  display: flex;
  text-decoration: none;
}

.cards > a > i{
  font-size: 60px;
  color: black;
  margin: auto auto;
}

.amount{
  margin: 20px;
}

.amount > div{
  display: flex;
  background-color: var(--button);
  border-radius: 10px;
  margin-bottom: 50px;
  height: 60px;
}

.amount > div > button{
  background-color: var(--button);
	color: inherit;
  font-size: 20px;
  text-align: center;
  margin: auto 0;
  border: none;
  padding: 0%;
}

.amount > div > .active, .button:hover{
  border-bottom: 5px solid var(--sharp);
}

#piggyBank:active{
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}

@keyframes shake{
  0%{transform: translate(1px,1px) rotate(0deg);}
  10%{transform: translate(-5px,-10px) rotate(-1deg) ;}
  20%{transform: translate(-6px,0px) rotate(1deg);}
  30%{transform: translate(3px,2px) rotate(0deg);}
  40%{transform: translate(1px,-1px) rotate(1deg);}
  50%{transform: translate(-1px,2px) rotate(-1deg);}
  60%{transform: translate(-3px,1px) rotate(0deg);}
  70%{transform: translate(3px,1px) rotate(-1deg);}
  80%{transform: translate(-1px,-1px) rotate(1deg);}
  90%{transform: translate(1px,2px) rotate(0deg);}
  100%{transform: translate(1px,-2px) rotate(-1deg);}
}

h1{
  margin-top: 10px;
}

.title{
  text-align: center;
  font-size: 24px;
  margin-top: 30px;
}

canvas{
  width:80% !important;
  height:180px !important;
  margin: 0 auto;
  margin-top: 100px;
  margin-bottom: 100px;
}

.Total{
  display: flex;
  justify-content: space-evenly;
  margin: 0px;
}

.totalbalance{
  background-color: var(--correct);
}

.totalspent{
  background-color: var(--secondary);
}

.Total > div{
  font-size: 13px;
  text-align: center;
  border-radius: 20px;
  padding: 10px;
  margin: 0% 20px;
}

.Total > div > div{
  font-size: 16px;
  text-align: center;
}

.pol{
  width: fit-content;
  margin: 0 auto;
  margin-top: 30px;
  margin-bottom: 15px;
  background-color: var(--correct);
  padding: 10px 30px;
  border-radius: 50px;
  font-size: 24px;
}

.spendingpage{
  display: flex;
  height: 1000px;
}


.spentclass{
  background-color: var(--button);
  padding: 15px 0;
  border-radius: 20px;
  justify-self: flex-end;
  align-self: flex-end;
  width: 95%;
  margin: 0 auto;
  margin-bottom: 20px;
}

.spentclass button{
  background-color: var(--button);
	color: none;
  font-size: 20px;
  text-align: center;
  margin: 5px 0;
  border: none;
  padding: 0%;
  border: none;
  font-size: 30px;
  border-radius: 10px;
}

.spentclass button i{
  background-color: white;
  padding: 12px;
  border-radius: 10px;
}

.types{
  display: flex;
  justify-content: space-around;
}

input {
  border: 0;
  box-shadow: none;
  outline: none;
}

#amt{
  margin-left: 20px;
  width: 80%;
  font-size: 20px;
  padding: 10px;
  border-radius: 10px;
}

#add{
  font-size: 20px;
  padding: 10px;
  border-radius: 10px;
  width: 35px;
}

.transaction{
  background-color: var(--button);
  padding: 15px;
  border-radius: 20px;
  margin: 0 auto;
  display: flex;
  margin-bottom: 5px;
  width: 90%;
  
}

.logo{
  font-size: 30px;
}

.logo i{
  background-color: white;
  padding: 12px;
  border-radius: 10px;
}

.traninfo{
  width: 100%;
  margin-left: 15px;
  display: flex;
  justify-content: space-between;
  font-size: 20px;
}



#minus{
  background-color: var(--button);
	color: none;
  font-size: 20px;
  text-align: center;
  margin: 5px 0;
  border: none;
  padding: 10px20px;
  border: none;
  font-size: 30px;
  margin-left: 20px;
}

.chosen{
  color: var(--correct);
}