html {
    --text: #1a052e;
    --bg: #f0d8bc;
}

@media screen and (prefers-color-scheme: dark) {
    html {
	--text: #f0d8bc;
	--bg: #1a052e;
    }
}

body {
    font-size: x-large;
    background-color: var(--bg);
    color: var(--text);
}

input {
    font-size: x-large;
    background-color: var(--bg);
    color: var(--text);
}

div.app {
    grid-template-columns: 50% 50%;
    grid-template-areas:
	"controls calculations"
	"expenses expenses";
    display: grid;
}

div.expenses {grid-area: expenses;}

div.calculations {
    display: grid;
    grid-template-columns: auto auto;
    grid-area: calculations;
}

div.controls {
    grid-area: controls;
    grid-template-columns: auto auto;
    display: grid;
}

table {
    max-width: 100vw;
}

td input {
    width: 30vw;
}

@media only screen and (max-width: 1000px) {
    div.app {display: unset;}
}