:root {
	--background-plain: #FAFAFA;
	--background-highlight: #FFFFFF;
	--background-dim: #EEEEEE;
	--background-theme-dim: #263238;
	--background-theme: #455A64;
	--background-theme-highlight: #607D8B;
	--background-theme-superlight: #CFD8DC;
	--small-font: .9rem;
	--normal-font: 1rem;
	--large-font: 1.1rem;
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
button {
	border: 0;
}
body {
	background: var(--background-theme-superlight);
}
#game-box {
	background: #D7CCC8;
	width: 100%;
	display: grid;
	margin: 0 auto;
	height: 100vh;
	align-content: start;
	grid-template-columns: 2fr 1fr 2fr;
	grid-template-rows: auto;
	grid-template-areas: 
	'menuBar menuBar menuBar'
	'resBar resBar resBar';
}
#resource-bar {
	user-select: none;
	grid-area: resBar;
	display: grid;
	grid-template-columns: 1fr;
	width: 100%;
	font-size: var(--large-font);
}
.res-line {
	padding: 0 .2em;
	background: var(--background-plain);
	color: black;
	display: grid;
	grid-template-columns: 1fr 3fr 1fr;
	border: 1px inset var(--background-theme-dim);
}
.res-name {
	text-align: left;
	align-self: center;
}
.res-total {
	text-align: right;
	font-size: var(--small-font);
	align-self: center;
}
.res-income {
	text-align: right;
	font-size: var(--small-font);
	align-self: center;
}
/*
###################### Menu Elements ##########################
*/
#menu-bar {
	grid-area: menuBar;
	width: 100%;
	background: var(--background-theme);
	color: black;
	height: 3em;
	border: 1px inset var(--background-theme-dim);
	border-top: .25em solid var(--background-theme-dim);
	border-bottom: 0;
}
#hamburger {
	background: none;
	display: block;
	float: left;
	cursor: pointer;
	height: 100%;
	width: 3em;
	border-radius: .5rem;
}
#hamburger:hover {
	background: var(--background-theme-highlight);
}
/*
###################### Status Col Elements ##########################
*/
#status-col {
	grid-area: colone;
	border: 1px inset var(--background-theme-dim);
	border-top: 0;
	display: grid;
	grid-template-rows: auto 1fr;
}
/*
###################### Production Col Elements ##########################
*/
#production-col {
	grid-area: coltwo;
	display: grid;
	grid-template-rows: auto 1fr;
	border: 1px inset var(--background-theme-dim);
	border-top: 0;
}
.tab-menu-bar {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 2.5em 0;
	align-items: center;
	justify-content: center;
	width: 100%;
	background: var(--background-dim);
}
.tab-menu-bar hr {
	grid-column: 1 / 4;
	border: none;
	width: calc(100%/3);
	margin: 0;
	margin-bottom: .3rem;
	height: .2rem;
	transition: all .4s ease-in-out;
	background: var(--background-highlight);
}
.tab-menu-bar button {
	height: 100%;
	text-align: center;
	font-size: var(--large-font);
	cursor: pointer;
	background: var(--background-theme);
	color: #BDBDBD;
	transition: all .25s;
	outline: none;
}
.tab-menu-bar button:hover {
	color: white;
	background: var(--background-theme);
}
.tab-menu-bar button.active {
    color: white;
	background: var(--background-theme-highlight);
}
.production-page, .status-page {
	background: var(--background-plain);
	overflow-y: scroll;
    padding: .2rem;
}
/*
###################### Production Menu Elements ##########################
*/
.prod-subtitle {
    user-select: none;
    color: white;
    cursor: pointer;
    display: block;
    height: auto;
    font-size: var(--large-font);
    font-weight: bold;
    width: 100%;
    text-align: center;
    background: var(--background-theme-highlight);
    border: 1px inset var(--background-theme-dim);
    border-radius: .5rem .5rem 0 0;
}
.prod-subtitle span {
    float: right;
    display: block;
    margin-right: .5rem;
    transition: all .2s;
    height: 1.2rem;
    width: 1.2rem;
    transform-origin: center;
}

.prod-subpage {
    border: 1px inset var(--background-theme-dim);
    width: 100%;
    border-top: 0;
    margin-bottom: .25rem;
    border-radius: 0 0 .5rem .5rem;
    max-height: 100rem;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(1,0,1,0);
}
.production-box {
    user-select: none;
    display: grid;
    border: 1px outset var(--background-theme-dim);
    padding: .5rem;
    margin: .1rem .1rem;
    border-radius: 1rem;
    grid-template-columns: 4fr 4fr 3fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 
        'title counter count'
        'desc desc buybutton'
        'income upkeep buybutton';
}
.prod-owned {
    text-align: right;
    grid-area: counter;
    font-size: var(--small-font);
}
.prod-desc {
    grid-area: desc;
    border-bottom: .05rem dotted;
    margin: 0 auto;
    margin-bottom: .3rem;
    width: 98%;
}
.production-box h1{
    font-size: var(--large-font);
    grid-area: title;
}
.production-count {
    grid-area: count;
    text-align: right;
}
.production-box button {
    font-size: var(--normal-font);
    grid-area: buybutton;
    align-self: end;
    border-radius: 1rem;
    cursor: pointer;
    background: #81C784;
    border: .1rem outset #A5D6A7;
    outline: none;
}
.production-box button:active {
    position: relative;
    top: 1px;
    left: 1px;
    border: .1rem inset #A5D6A7;
}
.production-box.overprice button {
    background: #BDBDBD;
    border: .1rem outset #BDBDBD;
    cursor: not-allowed;
}
.production-box.overprice button:active {
    position: relative;
    top: 0;
    left: 0;
    border: .1rem outset #BDBDBD;
}
.pos-prod {
    display: inline-block;
    padding: .1rem .5rem;
    background: #A5D6A7;
    border-radius: .5rem;
    width: auto;
}
.neg-prod {
    display: inline-block;
    padding: .1rem .5rem;
    background: #ef9a9a;
    border-radius: .5rem;
    width: auto;
}
.income-prod {
    grid-area: income;
}
.upkeep-prod {
    grid-area: upkeep;
}
/*
###################### Bottom Bar Elements ##########################
*/
#bottom-bar {
	grid-area: bottombar;
	background: black;
	border: 1px inset var(--background-theme-dim);
	border-bottom: 0;
}
#progress-bar-cont {
	width: 100%;
	height: .75rem;
	background: #E0E0E0;
	border: .1rem outset #E0E0E0;
}
#progress-bar {
	width: 0;
	height: 100%;
	background: #546E7A;
}
#bottom-buttons {
	display: flex;
}
#bottom-buttons button {
	border: .1rem outset #E0E0E0;
	height: 3rem;
	flex: 1;
	font-size: var(--large-font);
	background: #E0E0E0;
	outline: none;
}
#bottom-buttons button:hover {
	background: #BDBDBD;
	border: .1rem outset #BDBDBD;
}
#bottom-buttons button:active {
	border: .1rem inset #E0E0E0;
	padding-top: .1rem;
}
/*
###################### Scaling Elements ##########################
*/
@media screen and (min-width:426px){ /* Low Res/Tablet */
	#game-box {
		width: 100%;
		grid-template-columns: 2fr 1fr 2fr;
		grid-template-rows: auto 1fr auto;
		grid-template-areas: drfft6yy7
		'menuBar menuBar menuBar'
		'resBar colone coltwo'
		'bottombar bottombar bottombar';
	}
	#resource-bar {
		display: grid;
		grid-template-columns: 1fr;
		width: 100%;
		font-size: 1.25em;
	}
}
@media screen and (min-width:769px){ /* Full Display */
	#game-box {
		box-shadow: 0 0 8em #9E9E9E;
		min-width: 769px;
		max-width: 1280px;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto 1fr auto auto;
		grid-template-areas: 
		'menuBar menuBar'
		'colone coltwo'
		'resBar resBar'
		'bottombar bottombar';
	}
	#resource-bar {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto auto;
		width: 100%;
		font-size: var(--large-font);
	}
}