style.css

*{
    padding :0px;
    margin : 0px;
}
#content{
    height: 100vh;
    width: 40vw;
    margin-left: 30vw;

}
#head{
    height: 10vh;
    width: 40vw;
    margin-left: 0vw;
    display: flex;
    align-items: center;
    justify-content: space-around;    
    background-color: rgb(87, 184, 184);
    
}
#title{
    height: 10vh;
    width: 35vw;
    display: flex;
    align-items: center;
    justify-content: space-around;
 }
 #login{
     height: 10vh;
     width: 5vw;
     display: flex;
     align-items: center;
     justify-content: space-around;
 }
#main{
    height:65vh;
    width: 40vw;
    margin-left: 0vw;
}
#balance{
    height: 10vh;
    width: 40vw;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    background-color: rgb(89, 101, 132);
}
#expinc{
    height: 10vh;
    width: 40vw;
    display: flex;
    justify-content: space-around;
}
#income{
    height: 10vh;
    width: 20vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  background-color: rgb(45, 161, 161);
}
#expense{
    height: 10vh;
    width: 20vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    background-color: rgb(45, 161, 161);
  }
#history{
    height: 45vh;
    width: 40vw;
    display: flex;
    flex-direction: column;
    background-color: rgb(89, 101, 132);
}
#historyname{
    height: 5vh;
    width: 40vw;
    font-size: x-large;
    font-weight: 890;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
#historylist{
    height: 40vh;
    width: 40vw;
    display: flex;
    flex-direction: column;
    background-color: black;
    overflow-y: scroll;
    overflow-x: hidden;
}
.listind{
    height: 6vh;
    width: 30vw;
    display: flex;
    flex-direction: row;
    background-color: blueviolet;
    border-radius: 50px;
    margin-top: 1vh ;
    margin-left: auto;
    margin-right:auto;
    color: aliceblue;
    
}
.historynm{
    width: 20vw;
    padding-left: 3vw;
    font-size: x-large;
}
.historyamount{
    width: 10vw;
    padding-left:10px;
    font-size: x-large;
}
#footer{
    height: 25vh;
    width: 40vw;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    background-color: aqua;
}
#trans{
height: 3vh;
width: 40vw;
display: flex;
align-items: center;
justify-content: space-around;
margin-top: 1vh;
}
/*#trtype{
    height: 3vh;
    width: 40vw;
    display: flex;
    align-items: center;
    justify-content: space-around;
}{
    height: 3vh;
    width: 20vw;
    display: flex;
    align-items: center;
    justify-content: space-around;
}*/
#ty{
    width: 20vw;
}
#transactions{
    height: 3vh;
    width: 40vw;
    display: flex;
    margin-top: 4vh;
}
#trdis{
    height: 3vh;
    width:20vw;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
#trdisin{
    height: 3vh;
    width:20vw;
    display: flex;
    align-items: center;
    justify-content: space-around;

}
.trs{
    width: 20vw;
}
#amount{
    height: 3vh;
    width: 40vw;
    display: flex;
}
#tramnam{
    height: 3vh;
    width:20vw;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
#amin{
    height: 3vh;
    width:20vw;
    display: flex;
    align-items: center;
    justify-content: space-around;

}
#submit{
    height: 3vh;
    width: 40vw;
    display: flex;
    align-items: center; 
    justify-content: space-around;
}
body{
    background-color: rgb(191, 55, 55);
}


::-webkit-scrollbar{
   width: 0px;
}

.trs{
    width:20vw;
    height: 3vh;
    border-radius: 20px;
    border:none;
    padding-left: 20px;
    background-color:beige;
    margin-left: auto;
    margin-right: auto;
}