* {
  box-sizing: border-box;
  margin: 0;
  padding: 16px;
  background-color: rgb(51, 51, 51);
  background-image: none;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: 0 0;
  font-family:'Baloo Tamma 2', cursive;
  font-size: 25px;
  letter-spacing: 1px;
  word-spacing: 2px;
  color:rgb(230, 230, 230);
  font-weight: normal;
  text-decoration: none;
  font-style: normal;
  font-variant: normal;
  text-transform: none;
}

#header {
	font-size: 20px;
	background: rgb(56, 49, 49);
	border-radius: 11px;
}

#componly {
	color: rgb(232, 219, 39);
	font-size: 18px;
	line-height: 18px;
}
#question {
	color: rgb(0, 136, 204);
	font-size: 30px;
}

.field {
 color: rgb(255, 255, 255);
 font-size: 16px;
 line-height: 16px;
 margin: 8px;
 padding: 10px;
 border-radius: 11px;
 text-decoration: none;
 font-style: normal;
 font-variant: normal;
 text-transform: none;
 background-image: linear-gradient(to right, rgb(28, 110, 164) 0%, rgb(35, 136, 203) 50%, rgb(20, 78, 117) 100%);
 box-shadow: rgb(0, 0, 0) 5px 5px 15px 5px;
 border: 2px solid rgb(28, 110, 164);
 display: inline-table;
}

.field:hover {
background: #1C6EA4;
}
.field:active {
background: #99AABB;
}

.level {
 color: rgb(255, 255, 255);
 font-size: 16px;
 line-height: 16px;
 margin: 8px;
 padding: 10px;
 border-radius: 11px;
 text-decoration: none;
 font-style: normal;
 font-variant: normal;
 text-transform: none;
 background-image: linear-gradient(to right, #46A46F 0%, #8DCB28 48%, #5E7510 100%);
 box-shadow: rgb(0, 0, 0) 5px 5px 15px 5px;
 border: 2px solid #FFFFFF;
 }

.hidden {
	display:none;	
};

.level:hover {
	background: #46A46F;
}

.level:active {
	background: #46A46F;
}	

/*compliments of https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element */


video {
  margin: 20px;
  border: 1px solid black;
}

#tips{
	font-size: 16px;
	line-height: 18px;
};

#preview{
	max-height: 400px;
	max-width: 400px;
}

#preview.hidden {
	display: none;
}

.startstop {
 font-size: 16px;
 padding: 16px;
 text-align: center;
 text-decoration: none;
 font-size: 16px;
 margin: 16px;
 cursor: pointer;
 box-shadow: rgb(0, 0, 0) 5px 5px 15px 5px;
 border-radius: 50%;
 float:left;
 }

#btnStart {
	background-color: rgb(11, 94, 46);
}

#btnStop {
	background-color: rgb(214, 19, 58);
}

#madeby {
  position: fixed;
  height: 16px;
  left: 0;
  bottom: 16px;
  width: 100%;
  background-color: rgb(209, 159, 214);
  font-size: 14px;
  color: black;
  text-align: center;
  line-height: 10px;
 }

.ready {
	background-color: rgb(30, 140, 10);
	border-radius: 20px;
	margin: 20px;
}