style.css

@import url("fonts/fonts.css");
:root {
    color-scheme: light dark;
    --color-main: #000;
    --color-background: #fff;
    --canvas-minwidth: 2700px;
}
@media (prefers-color-scheme: dark) {
    :root {
	    --color-main: #ccc;
	    --color-background: #0F0F0F;
    }
}
* {
	margin: 0;
	padding: 0;
}
html {
	font-family: "IBM Plex Sans", sans-serif;
	line-height: 1.3;
  text-align: center;
}
ul {
  list-style: none;
}
li {
  padding: 3px;
}
body {
	color: var(--color-main);
	background-color: var(--color-background);
}

input {
  margin-left: 5px;
  margin-right: 3px;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 14px;
}
#amount {
  width: 50px;
  text-align: right;
}

#accountdetails {
  display: none;
}

img {
  width: 90%;
  max-width: 300px;
}

.small {
  font-size: 13px;
}

/* !page-navigation */

/* !main */
main {
	padding: 2vw;
}
main a {
	color: inherit;
}
main p {
	margin: 1em 0;
}
main h1 {
	font-size: 2rem;
}
section header {
	background-image: linear-gradient(#000, #000);
	background-image: linear-gradient(var(--color-main), var(--color-main));
	background-size: 64px 2px;
	background-repeat: repeat-x;
	background-position: center center;
}
section header h2 {
	display: inline-block;
	padding-right: 1em;
	font-size: 0.8em;
	text-transform: uppercase;
	max-width: none;
	margin: 2rem 0;
	color: #000;
	color: var(--color-main);
	background-color: #fff;
	background-color: var(--color-background);
}

section article {
	margin-bottom: 2rem;
}
section > article:last-child {
	margin-bottom: 0;
}
section > * > article:last-child {
	margin-bottom: 0;
}
.table-group table {
	display: inline-table;
	margin-right: 2em;
}

@media (max-width: 660px) {
	.state-indicator {
	   z-index: 2;
	}
}