Testosteroth/index_styles.css

.menu_element {
    background-color: orangered;
    display: inline;
    font-size: 400%;
    margin: 0.8rem;
    text-decoration: none;
    
}

#menu {

    list-style-type: none;
}


.grid-wrapper {
    display: grid;
    padding: 0 2em 0 2em;
    grid-template-columns: 1fr;
    grid-template-rows: 80px 80px 80px;
    grid-gap: 10px;
}

.box {
    background-color: #C4C4C4;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas: "dropdown entry entry entry entry entry entry entry entry entry amount amount";
    font-size: 2em;
    border-radius: 10px;
}

.entry {
    display: flex;
    vertical-align: center;
    align-items: center;
    padding: 5px;
    grid-area: entry;
}

.amount {
    display: flex;
    vertical-align: center;
    align-items: center;
    padding: 10px;
    text-align: right;
    grid-area: amount;
}

.balance-list {
    display: grid;
    grid-template-areas: ;
}

.overview {
    text-align: center;
    padding: 20px;
}

#title {
    font-size: 2em;
}

#total-amount {
    font-size: 3em;
    color: green;
}

.dropdown {
    grid-area: dropdown;
    background-image: url("./components/icons/caret-down-solid.svg");
    background-repeat: no-repeat;
    background-position: center;
    fill: #F3f3F3
}