article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block;
}



  body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }

  main {
    flex: 1 0 auto;
  }

#title {
  font-family: 'Rock Salt', cursive;
    display: table;
  margin: 0 auto;
  font-weight: 400;
  font-size: 5em;
  background: linear-gradient(330deg, #e05252 0%, #99e052 25%, #52e0e0 50%, #9952e0 75%, #e05252 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 200px;
}


canvas { 
    display: inline-block; 
    background: #202020; 
    width: 100%;
    height: 10%;
    box-shadow: 0px 0px 40px red;
}
#controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    height: 20%;
    width: 100%;
}
#record.recording { 
    background: red;
    background: -webkit-radial-gradient(center, ellipse cover, #ff0000 0%,lightgrey 75%,lightgrey 100%,#7db9e8 100%); 
    background: -moz-radial-gradient(center, ellipse cover, #ff0000 0%,lightgrey 75%,lightgrey 100%,#7db9e8 100%); 
    background: radial-gradient(center, ellipse cover, #ff0000 0%,lightgrey 75%,lightgrey 100%,#7db9e8 100%); 
}

/*
#viz {
    height: 10%;
    width: 10%;
    display: inline;
}
*/
@media (orientation: landscape) {
    #controls { flex-direction: column; height: 100%; width: 10%;}
    #viz { height: 100%; width: 90%;}
}


header, main, footer {
    padding-left: 360px;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block;
}
.side-nav.fixed.responsive-nav{
	width:360px;
}


@media (max-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ 
        .side-nav.fixed.responsive-nav{
			left:0%;
			width: 175px;
		}
		.orange.lighten-2.responsive-nav {
			height: 64px;
			line-height: 64px;
			width: 145px;
		}
}
@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ 
        .side-nav.fixed.responsive-nav{
			left:0%;
			width: 175px;
		}
		.orange.lighten-2.responsive-nav {
			height: 64px;
			line-height: 64px;
			width: 145px;
		}
}
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
        .side-nav.fixed.responsive-nav{
			left:0%;
			width: 215px;
		}
		.orange.lighten-2.responsive-nav {
			height: 64px;
			line-height: 64px;
			width: 185px;
		}
}
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ 
        .side-nav.fixed.responsive-nav{
			left:0%;
			width: 260px;
		}
		.orange.lighten-2.responsive-nav {
			height: 64px;
			line-height: 64px;
			width: 230px;
		}
}
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ 
        .side-nav.fixed.responsive-nav{
			left:0%;
			width: 300px;
		}
		.orange.lighten-2.responsive-nav {
			height: 64px;
			line-height: 64px;
			width: 270px;
		}
}