* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100vh;
  width: 100vw;
}

#miclevel{
	display: flex;
	align-items: center; 
	position:absolute;
	bottom: 0px;
	left:0px;
	width:100%;
	height:10vh;
	padding: 1vh 2vw;
	border-top: 1px solid whitesmoke;
	background:rgba(31,31,31,1.00);
}
#mid{
	padding: 0vw 2vw 0vw 5vw;
	width:90vw;
	
}
body {
  font-family: monospace;
  font-size: 1.6vh;
  background: black;
  color:whitesmoke;
  margin:0px;

}
a:link, a:visited{
	font-family: 'Roboto', sans-serif;
	text-decoration: none;
	color:rgb(40,40,40);
	font-size:5vw;
	line-height: 120%;
	padding-right: 100px;
}
a:hover{
	text-decoration: none;
	color:rgb(40,40,40);
	font-size:5vw;
	background-color: whitesmoke;
	padding-right: 100px;
}

#strap{
  position: absolute;
  z-index: 3;
  bottom:30%;
  left:0%;
  width: 100%;
  text-align: center;
}
#xbut{
	position:absolute;
	top:3vw;
	right:3vw;
	width:6vh;
	cursor: pointer;
}
#starter{
  padding:30vh 2vw;
  margin:0px;
  width:100%;
  height:100%;
  background: black;
  color: whitesmoke;
  position: absolute;
  top:0px;
  left:0px;
  z-index:5;
  display: block;
  text-align:center;
  font-size: 200%;
  cursor: pointer;
}
#mainmenu{
  margin:0px;
  width:100%;
  height:100%;
	padding:12vh 5vw;
	box-sizing: border-box;
  background:rgba(249,247,143,1.00);
  color:rgba(31,31,31,1.00);
  position: absolute;
  top:0px;
  left:0px;
  z-index:8;
  display: none;
  
}
#mainmenubutton{
	position: absolute;
	z-index: 7;
	width:6vh;
	left: 3vh;
	top: 3vh;
}

.wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}

h1, h2 {
  font-size:200%;
  text-align: center;
  font-weight: normal;
  padding: 0.5rem 0 0 0;
}

h3{
	font-size:150%;
  text-align: left;
  font-weight: normal;
  padding: 0.5rem 0 0 0;
}

.main-controls {
  padding: 0 0;

}

canvas {
  display: block;
  position: absolute;
	left:0px;
   
    
}
#myRange{
  -webkit-appearance: none;
  width: 100%;
  height: 2vh;
  background:black;
  margin-bottom: 2vh;
	outline: 2px solid;
	outline-color: whitesmoke;
  
  
}


#buttons {
  display: none;
  text-align: center;
   
}
.audiohold{
  display:none;
  width:94%;
  color: black;
  margin-top:10vh;
}



#record {
  font-size: 3vw;
  padding: 1rem;
  height:25vh;
  width:25vh;
  position: absolute;
  top:40%;
  left:50%;
  transform:translate(-50%,-50%);
    background: black;
  text-align: center;
  color: white;
  border: solid 2px whitesmoke;
  transition: all 0.2s;
  padding: 0.5rem;
  border-radius: 50%;
    display:none;

}

button {
  font-size: 3vw;
  background: black;
  text-align: center;
  color: white;
  border: solid 2px whitesmoke;
  transition: all 0.2s;
  padding: 0.5rem;
  border-radius: 50%;
  
}

#record:hover, button:focus {
  box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 1);
  background:#322;
}

button:active {
  box-shadow: inset 0px 0px 20px rgba(0,0,0,0.5);
  /*transform: translateY(2px);*/
}
#sbut{
	width:auto;
	height:30vh;
	
	padding-bottom: 4vh;
}

/* Make the clips use as much space as possible, and
 * also show a scrollbar when there are too many clips to show
 * in the available space */
.sound-clips {
  flex: 1;
}

section, article {
  display: block;
}

.clip {
  padding: 3vw;
}

audio {
  width: 86%;
  display: block;
  margin: 1rem auto 0.5rem;
}

.clip p {
  display: inline-block;
  font-size: 1.2vw;
}

.clip button {
  
}

button.delete {
	float: right;
  background: #333;
  padding: 0.5rem 0.75rem;
  font-size: 1.2vw;
  border-radius: 2px;
}

/* Checkbox hack to control information box display */

label {
  font-size: 1vw;
  position: absolute;
  bottom: 2.5vh;
  right: 3vw;
  z-index: 2;
  cursor: pointer;
  background-color: black;
	border:#FFFDFD 1px solid;
  border-radius: 10px;
}
#xlabel {
  width:5vh;
  position: absolute;
 top: 3vh;
  right: 2vw;
  cursor: pointer;
 
}
#qbutton{
  position: fixed;
  top:3vh;
  right: 2vw;
  z-index: 6;
  cursor: pointer;
  width:5vh;
}
#mutebutton{
  position: relative;
  height:90%;
	float:left;
  cursor: pointer;
  width:auto;
}

input[type=checkbox] {
   position: absolute;
   top: -100px;
}

#aside {
  position: fixed;
	z-index: 9;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateX(100%);
  transition: 0.3s all ease-out;
  background-color: #efefef;
  color: black;
  padding: 10vh 5vw 5vh 5vw;
	
	box-sizing: border-box;
}

#aside p {
  font-size: 2vw;
  margin: 0.5rem 0;
}

#aside a {
  color: #666;
}

/* Toggled State of information box */
input[type=checkbox]:checked ~ #aside {
  transform: translateX(0);
}

/* Cursor when clip name is clicked over */

.clip p {
  cursor: pointer;
}
.uploadButton{
  font-size: 2.1vw;
  background:yellow;
  width:22vh;
  height:22vh;
  color: red;
  position: absolute;
  top:29vh;
  left:50%;
  transform:translateX(-50%);
  cursor: pointer;

}
.uploadButton:hover{
  position: absolute;
 background: #C9AF00;
  top:29vh;
  left:50%;
  transform:translateX(-50%);
}

@media (orientation:portrait){
	#starter{
		padding:20vh 2vw;
	}
	#aside p {
  font-size: 2vh;
  margin: 0.5rem 0;
}
	#myRange{
  -webkit-appearance: none;
  width: 100%;
  height: 1vh;
  background:rgba(31,31,31,1.00);
  
	outline: 1px solid;
	outline-color: whitesmoke;
  
  
}
	#record {
  font-size: 3.5vh;
	}
	.uploadButton{
  		font-size: 2.2vh;
		width:40vw;
		height: 40vw;
}
	#mainmenubutton{
		
	position: absolute;
	width:8vw;
	left: 3vw;
	top: 3vw;
	cursor: pointer;
}
	#mainmenu{
		padding:15vh 3vw;
	}
#sbut{
	width:40vw;
	height:auto;
	padding-bottom: 4vh;
}	
	#xbut{
		width:8vw;
	}
}
/* Adjustments for wider screens */
@media all and (min-width: 800px) {
  
  .wrapper {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
  }
}