body {
    background-color: #25333f;
}

body > * {

	: 0.5rem;
}

.container {
	display: grid;
	flex-direction: column;
    justify-content: left;
    grid-template-columns: auto auto;
    list-style-type: none;
}

.container > :first-child {
	grid-column: 1 / -1;	
}

.container > * {
	margin: 0.5rem;
}

h1 {
	font-size: 3em;
}

/* nav bar */
*, .logo {
    color: #e2e2e2;
    font-family: "Roboto", sans-serif;
}

nav {
    background-color: #1d2832;
    margin: 0;
    padding: 1em;
    font-size: 1.2em;
}

nav a {
    padding-right: 1em;
    text-decoration: none;
    color: rgb(65, 89, 110);
}

nav h2 {
    display: inline-block
}

/* notification stuff */
.notif {
    padding: 0.5em;
    background-color: #ddd;
}

.notif.error {
    background-color: #faa;
}

.notif p {
    margin: 5px;
}

/* landing page */
form.creation {
    background-color: #2e3d4d;
    padding: 1em;
    margin-top: 2em;
}

form.creation > h3 {
    margin: 5px;
    margin-right: 2em;
}

input {
	color: #2e3d4d;
}

input[type="text"] {
    width: calc(100% - 40em);
    min-width: 10em;
}

form.creation > * {
    display: inline-block;
    margin-right: 1.5em;
}

li a {
    text-decoration: none;
}

ul {
    padding-left: 0;
    display: grid;
    justify-content: left;
    grid-auto-rows: minmax(5em, auto);
    gap: 1em;
    grid-template-columns: repeat(auto-fill, minmax(8em, 1fr));
    list-style-type: none;
}

li {
    background-color: #2e3d4d;
    width: 6em;
    height: 3.5em;
    padding: 1em;
    margin: .5em;
    margin-left: 0;
}

.name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* user page */
.balance {
	display: block;
	line-break: normal;
}

.balance-value {
	padding-left: 1rem;
	font-size: 2em;
}

/* Amount selector user page */
.amount {
    display: block;
    padding-top: 1em;
}

.amount-presets {
    display: grid;
    justify-content: left;
    grid-auto-rows: minmax(5em, 2);
    grid-template-columns: repeat(6, 6em);
    list-style-type: none;
}

.amount-presets > form > input {
    place-content: center;
    padding: 0.8em 0.5em;
    border: none;
    border-radius: 4px;
    width: 6em;
    margin: 1em;
}

.amount-presets input:not([type=submit]) {
    display: none !important;
}

.amount-pos {
	color: rgb(0, 204, 29);
}

input.amount-pos {
    background: rgb(21, 89, 73);
}

.amount-neg {
    color: rgb(245, 73, 99);
}

input.amount-neg {
    background-color: rgb(84, 64, 82);
}

h3 {
	margin: 4px;
	margin-left: 0;	
}

.box {
	width: 16em;
	background-color: #1d2832;
	padding: 1em;
	padding-right: 2em;
}

.transactions.container > :first-child {
	width: 36em;
}


/* create transaction box */
.transaction {
	display: grid;
    justify-content: left;
    /* grid-auto-rows: minmax(5em, 2); */
    /* grid-template-columns: repeat(2, calc(50% - 2em)); */
    grid-template-columns: auto 10em;
}

.transaction :first-child, form.transaction.box > :last-child {
  grid-column: 1 / -1;
}

.transaction.box > * {
	margin: .3em;
	width: 100%;
}