:root {
	  --background-color: #fff;
	  --text-color: black;
	  --menu-color: #888888;
	  --wrap-bgcolor: #fff;
	  --wrap-color: #EDE9E8;
	  --box-bgcolor: #EDE9E8;
	  --box-color: #444;
	  --shadow-color: #999;
	  --highlight: #cdcdcd;
	  --primary: hsl(12, 70%, 40%);
	}

.navbar-light .navbar-brand {
  color: var(--menu-color);
}

body {
	background-color: var(--background-color);
	margin: 10px;
	font-family: sans-serif;
}

.wrapper {
	display: grid;
	grid-gap: 10px;
	grid-template-columns: 1fr 1fr 1fr;
	background-color: var(--wrap-bgcolor);
	color: var(--wrap-color);
	}

.box {
	background-color: var(--box-bgcolor);
	color: var(--box-color);
	border-radius: 5px;
	padding: 20px;
	font-size: 90%;
	}

.martas {
	grid-column: 1 / 3;
	grid-row: 1;
	}
	.setup {
	grid-column: 3 / 4 ;
	grid-row: 1 ;
	}
	.sensors {
	grid-column: 1 / 2 ;
	grid-row: 2 ;
	}
	.gauges {
	grid-column: 1 / 2 ;
	grid-row: 3 ;
	}
	.graphs {
	grid-column: 2 / 4;
	grid-row: 2 / 4;
	}
	.link {
	grid-column: 1 / 2;
	grid-row: 4;
	}
	.stats {
	grid-column: 2 / 3 ;
	grid-row: 4;
	}
	.about {
	grid-column: 3 / 4;
	grid-row: 4;
	}

@media only screen and (max-width: 780px) and (min-width: 480px){
	body {
		margin: 2px;
	}
	.wrapper { grid-template-columns: 1fr 1fr }
	.box {
	border-radius: 2px;
	padding: 5px;
	font-size: 90%;
	}

	.martas {
	grid-column: 1 / 3;
	grid-row: 1;
	}
	.setup {
	grid-column: 1 / 3 ;
	grid-row: 4 ;
	}
	.sensors {
	grid-column: 1 / 3 ;
	grid-row: 3;
	}
	.gauges {
	grid-column: 1 / 3 ;
	grid-row: 7;
	}
	.graphs {
	grid-column: 1 / 3;
	grid-row: 2;
	}
	.link {
	grid-column: 1 / 2;
	grid-row: 5;
	}
	.about {
	grid-column: 1 / 3;
	grid-row: 6;
	}
	.stats {
	grid-column: 2 / 3 ;
	grid-row: 5;
	}
}

@media only screen and (max-width: 480px) {
	body {
		margin: 0px;
	}
	.wrapper { grid-template-columns: 100% }
	.box {
	border-radius: 1px;
	padding: 5px;
	font-size: 90%;
	}
	.martas {
	grid-column: 1 / 1;
	grid-row: 1;
	}
	.setup {
	grid-column: 1 / 2 ;
	grid-row: 4 ;
	}
	.sensors {
	grid-column: 1 / 2 ;
	grid-row: 2 ;
	}
	.gauges {
	grid-column: 1 / 3 ;
	grid-row: 7;
	}
	.graphs {
	grid-column: 1 / 2;
	grid-row: 3;
	}
	.about {
	grid-column: 1 / 2;
	grid-row: 8;
	}
	.link {
	grid-column: 1 / 2;
	grid-row: 5;
	}
	.stats {
	grid-column: 1 / 2 ;
	grid-row: 6;
	}
}

