html, body { font-style: normal; font-family: monospace; padding: 0; margin: 0; } .account { border-style: solid; border-color: black; } .account__grid { border-style: none; display: grid; grid-template-columns: repeat(3, 1fr); } .account__title { background-color: black; color: white; padding: 3px 6px; } .account__label { margin: 0 .5em 0 .5em; font-weight: bold; border-bottom-style: solid; } .account__amount { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; } .account__accounts { grid-column: 2 / 4; grid-row: 1; display: flex; flex-direction: column; } .account__button { color: black; border-radius: 0; border-color: black; border-style: solid; border-width: .2em; padding: 1em; margin: .5em; background: linear-gradient(to top, darkgray, 20%, lightgray); box-shadow: 3px 3px 3px black; } .account__button:hover:enabled { background: linear-gradient(lightgray, darkgray); } .account__button:active:enabled { transform: translateY(3px); } .account__button:disabled { background: lightgray; color: darkgray; } .account__input { padding: 1em; color: black; margin: .5em; background-color: #eeeeee; border-radius: 0; border-color: black; border-style: solid; border-width: .2em; box-shadow: 3px 3px 3px black; } .accounts { list-style-type: none; padding: 0.5em; border-style: solid; border-color: black; } .accounts__item { border-style: solid; border-bottom-color: lightgray; border-width: 0 0 0.1em 0; } .accounts__item-selected { border-bottom-color: darkgray; background-color: #eeeeee; font-weight: bold; } .error { background: red; padding: 1em; color: white; } .content { padding: 1em; min-width: 370px; } @media (max-width: 605px) { .account__grid { display: grid; grid-template-columns: 1fr; } .account__accounts { grid-column: 1; grid-row: 2; } }