* {
     padding: 0;
     margin: 0;
     box-sizing: border-box;
     font-family: monospace;
}
body {
     overflow: hidden;
     overflow-y: auto;
     padding-bottom: 1rem;
}

/* WELCOMING TEXT */
.intro {
     background: #303;
     color: white;
     padding: 1rem 2rem;
     /* position: relative; */
}
.intro p {
     font-size: 16px;
}
.intro .nameField {
     display: flex;
     gap: 2rem;
}
.intro #username {
     border: none;
     background: none;
     outline: none;
     color: white;
     font-size: 20px;
     font-weight: 600;
     width: 80%;
}
.intro #username:focus {
     border-bottom: 2px solid white;
     transition: .3s;
}
.intro .editName {
     padding: .6rem 2rem;
     border: none;
     background: white;
     color: #303;
     font-size: 18px;
     font-weight: 600;
     border-radius: 20px;
     box-shadow: 3px 6px 9px #303;
}

/* TOTAL EXPENSE */
.total {
     background: #eff;
     border-radius: 20px;
     margin: 5% 2rem;
     color: black;
     padding: 3rem 1rem;
     box-shadow: 3px 3px 9px 3px #303;
     display: flex;
     justify-content: space-between;
}
.total > div {
     width: 100%;
}
.total > div > h2 {
     font-size: 20px;
     font-size: 600;
     margin-bottom: 1rem;
}
.total > div > p {
     font-size: 20px;
     font-weight: 800;
}
.total #totalExpense::before {
     content: '💵 ';
}
.total img {
     width: 6rem;
     height: 6rem;
}

/* LISTING EXPENSES AND ADD NEW ONES */
.listExpense {
     padding: 2rem 1rem;
     border-radius: 20px;
     background: #eff;
     margin: 3rem 2rem;
}
.title {
     display: flex;
     justify-content: space-between;
     align-items: center;
}
.title h2 {
     font-size: 20px;
     color: #303;
}
.title button, .addExpense button {
     padding: .6rem 2rem;
     display: flex;
     gap: 1rem;
     border-radius: 20px;
     border: none;
     font-size: 16px;
     font-weight: 600;
     background: #303;
     color: white;
}
.title button::after {
     content: '+';
}
#theExpenses {
     padding: 1rem 0;
}
#theExpenses .expense {
     display: flex;
     flex-direction: column;
     justify-content: center;
     gap: 1rem;
     border-bottom: 2px solid #303;
     padding: 1rem 0;
}
#theExpenses .expense .content {
     display: flex;
     justify-content: space-between;
     align-items: center;
}
#theExpenses .expense .content > div:first-child {
     display: flex;
     flex-direction: column;
     gap: 1rem;
}
#theExpenses .expense .content > div:first-child > h2 {
     font-size: 16px;
     font-weight: 600;
}
#theExpenses .expense .content > div:first-child > span {
     color: #303;
     font-size: 16px;
}
#theExpenses .expense .content .amoutExpense {
     font-size: 16px;
     font-weight: 800;
}
#theExpenses .expense .actions {
     display: flex;
     justify-content: space-evenly;
}
#theExpenses .expense .actions button {
     padding: .6rem 2rem;
     border-radius: 20px;
     border: none;
     background: #303;
     color: #eff;
}

/* ADD EXPENSE FORM */
#behindForm {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: #5559;
     display: none;
     justify-content: center;
     align-items: center;
     z-index: 1;
}
#close {
     background: #eff;
     color: #303;
     border-radius: 50%;
     height: 3rem;
     width: 3rem;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 20px;
     position: absolute;
     top: 3rem;
     right: 2rem;
}
.addExpense {
     border-radius: 20px;
     background: #eff;
     /* margin: 0 2rem; */
     padding: 2rem 1rem;
     box-shadow: 3px 3px 9px #303;
     display: flex;
     flex-direction: column;
     gap: 1rem;
     /* position: fixed; */
     /* top: 15rem; */
}
.addExpense div {
     display: flex;
     flex-direction: column;
     justify-content: center;
     gap: 1rem;
}
.addExpense div label {
     font-size: 16px;
     font-weight: 600;
}
.addExpense div input {
     border: 1px solid #303;
     border-radius: 10px;
     background: transparent;
     font-size: 16px;
     font-weight: 600;
     padding: .6rem 1rem;
     outline: none;
}
.addExpense div input:focus {
     border-bottom: 1px solid #303;
     transition: .3s;
}
.addExpense button {
     margin: 0 8rem;
     margin-top: 1rem;
}

/* FOOTER */
footer {
     font-size: 20px;
     color: #303;
     font-weight: 600;
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 3rem 0;
}


/* UNRELATED */
#design1 {
     background: #303;
     border-radius: 100%;
     height: 100%;
     width: 160%;
     z-index: -1;
     position: absolute;
     top: -70%;
     left: -28%;
}
.title button:hover, .addExpense button:hover, #theExpenses .expense .actions button:hover {
     background: #606;
     transition: .3s;
}