body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

@media (min-width: 1000px) {
	#main-container {
		height: 100vh;
		display: grid;
		grid-template-columns: 1fr 0.5fr 1.5fr;
		grid-template-rows: 2fr 1fr 10fr;
		gap: 0px 0px;
		grid-template-areas:
            "title title title"
            "image buttons buttons"
			"image temp tempgraph";
		align-items: center;
		align-content: stretch;
	}
}

canvas {
    width: 100% !important;
}

.title {
    text-align: center;
    grid-area: title;
}
.image {
	grid-area: image;
	text-align: center;
    font-size: 1.5em;
	position: relative;
}
.image img {
    width: 100%;
}
#temp {
    grid-area: temp;
}

#spacer {
    grid-area: spacer;
}

#buttons {
    grid-area: buttons;
}

#temp, #pres, #humi {
    text-align: right;
	font-size: 1.2em;
    font-weight: bold;
	text-align: center;
}

.tempgraph {
    grid-area: tempgraph;
    position: relative;
}
.presgraph {
    grid-area: presgraph;
    position: relative;
    height: 99%;
}
.humigraph {
    grid-area: humigraph;
    position: relative;
    height: 99%;
}

#tgcont, #pgcont, #hgcont {
    height: 100%;
}

a {
	font-decoration: none;
	color: #346beb;
}

#time {
	position: absolute;
    background-color: #0007;
    color: white;
    padding: 10px;
    bottom: 32px;
    right: 0;
    left: 0;
	text-align: center;
}

@media (max-width: 1000px) {
	#main-container {
		height: 100vh;
		max-height: 300vh;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 0.5fr 0.25fr auto 0.25fr 1fr;
		gap: 0px 0px;
		grid-template-areas:
			"title title title"
			"temp temp temp"
            "image image image"
            "buttons buttons buttons"
			"tempgraph tempgraph tempgraph";
		align-items: center;
		align-content: stretch;
	}
	#temp, #pres, #humi {
		text-align: center;
	}
}