body {
	background-color:darkgray;
}
.container {
    margin: auto;
    padding:30px 0px;
}
p {
    display: inline-block;
    margin-top: 0px
}
h3 {
    margin-bottom: 7px;
}

/* Lyrics Area 
===================================================== */
.lyric-area {
    display: block;
	color: blue; 
	text-align: center;
	line-height: 1.2;
    width: 100%;
    padding: 0;    
    border: 0;
}

/* Metronome Area 
===================================================== */
.metronome {
    box-sizing: border-box;
    display: block;  
    border: 1px solid rgba(0, 0, 0, .2);
    background-color: gray;
    background: linear-gradient(to top, gray, darkgray);
    padding: 0;
    margin: 0;
}
.metronome:active {
    background: linear-gradient(to bottom, gray, darkgray);
}
.metronome-on {
    background: red;
}

/* Controls Area 
===================================================== */
.controls {
    grid-area: controls;
    text-align: center;
}
.controls label {
    display: block;
}
.controls input {
    display: block;
    margin: auto;
    margin-bottom: 10px;
    width: 200px;
    padding: 5px;
    text-align: center;
}

/* Statistics Area 
===================================================== */
.statistics {
    grid-area: statistics;
}
/* Info Area 
===================================================== */
/* Popup container */
.info {
    grid-area: info;
    position: relative;
    display: inline-block;
    cursor: pointer;
}