/* Small Mobile: 320px. (Default - mobile first) 
================================================= */
.container {
	width:280px;
	text-align: center;
	display: grid;
	grid-template:
		"controls"
		"info"
		"statistics"
		/ 1fr;
		;
}
.lyric-area {
	font-size: 2em;
	height: 72vh;
}
.metronome {
	height: 15vh;
}

/* Large Mobile, Mobile Landscape: 480px.
================================================= */
@media (min-width:480px) {
	.container {
		width: 450px;
	}
	.lyric-area {
		height: 85vh;
	}
	.metronome {
		height: 15vh;
	}
} 
/* Tablet: 768px.
================================================= */
@media (min-width: 768px) {
	.container{
		width: 738px;
		text-align: left;
		grid-gap: 40px;
		grid-row-gap: 0px;
		grid-template:
			"controls info statistics"
			/ 1fr 1fr 1fr;
			;
	}
}

/* Browser: 980px.
================================================= */
@media (min-width: 980px) {
	.container{
		width: 950px;
	}
}

/* Large Browser: 1200px.
================================================= */
@media (min-width: 1200px) {	
	.container{
		width: 1170px;
	}
}