* { padding: 0; margin: 0; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; } .menu_left_element { width: 110px; display: inline-block; margin-left: 15px } .menu_right_element { display: inline-block; width: 50px; height: 45px; margin-right: 25px; } .menu_element_text { border-radius: 10px; background-color: #8583FF; display: block; width: 100%; height: 100%; text-decoration: none; padding: 0.4rem; font-size: 2.6rem; text-decoration-color: black; } #menu_left { position: absolute; left: 0; list-style-type: none; } #menu_right { position: absolute; right: 0; list-style-type: none; } #nav { background-color: #C4C4C4; height: 1.6cm; padding: 0.8rem; /* padding: 0.6rem; */ } .grid-wrapper { display: grid; grid-template-columns: 1fr; grid-template-rows: 80px 80px 80px; grid-gap: 10px; } .box { background-color: #C4C4C4; display: grid; grid-template-columns: 20px 50% auto; grid-gap: 5px; font-size: 1.4em; border-radius: 10px; } .entry { display: flex; vertical-align: center; align-items: center; padding: 5px; } .amount { display: flex; justify-content: flex-end; align-items: center; padding: 10px; } .balance-list-wrapper { display: flex; justify-content: center; } .balance-list { display: grid; width: 700px; margin: 20px; } .overview { text-align: center; padding: 20px; } #title { font-size: 2em; } #total-amount { font-size: 3em; color: green; } .dropdown { background-image: url("./components/icons/caret-down-solid.svg"); background-repeat: no-repeat; background-size: 15px; background-position: right; color: #f3f3f3; }