* {
  font-family: 'Kanit', sans-serif;
 }

 .outershell {
  width: 98vw;
  height: 98vh;
  display: flex;
  background-image: url('https://res.cloudinary.com/dckkkjkuz/image/upload/v1501524783/fireworks/blue-starry-night.png');
  background-size: cover;
  background-repeat: no-repeat;
}

.innershell {
  /*background-color: orange;*/
  display: flex;
  flex-direction: column;
  width: 100%;
}

.title {
  position: absolute;
  top: 10px;
  left: 20px;
  font-family: 'Monoton', 'Kanit', sans-serif;
  font-size: 50px;
  letter-spacing: 3px;
  color: white;
  cursor: default;
  z-index: 100;
 }

 .muting {
   position: absolute;
   top: 25px;
   right: 35px;
   cursor: pointer;
   z-index: 300;
 }

 #mute-icon {
   width: 40px;
   height: 40px;
 }

 #mute-icon:active {
   width: 39px;
   height: 39px;
 }


.main {
  /*background-color: blue;*/
  display: flex;
  flex: 1;
  flex-direction: column;
}

.canvas-container {
  flex: 1;
  /*background-color: lightblue;*/
  display: flex;
}

#myCanvas {
  z-index: 200;
}

.control-container {
  /*background-color: yellow;*/
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0px 5px 5px 5px;
  padding: 0px;
  z-index: 9000;
}

.leftspacer {
  /*background-color: lightgreen;*/
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5px;
}

.create-text {
  /*background-color: red;*/
  margin: 0px 5px 0px 5px;
  color: white;
  font-size: 90%;
  letter-spacing: 2px;
}

.creators {
  /*background-color: pink;*/
  display: flex;
  flex-direction: row;
}

.centerspacer {
  /*background-color: lightgreen;*/
  display: flex;
  flex-direction: row;
  padding: 5px;
}

.mid-text {
  /*background-color: red;*/
  color: white;
  font-size: 90%;
  letter-spacing: 2px;
}

.rightspacer {
  /*background-color: lightgreen;*/
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5px;
}

.controllers {
  /*background-color: pink;*/
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 100%;
}

.control-text {
  /*background-color: red;*/
  color: white;
  font-size: 90%;
  letter-spacing: 2px;
}


.button {
  height: 20px;
  width: 75px;
  background-color: white;
  color: black;
  transition: background-color 1.0s ease;
  margin: 5px;
  padding: 2px;
  cursor: pointer;
  font-size: 12px;
  line-height: 11px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 400px;
  border-radius: 3px;
  text-align: center;
}

.button:active {
  background-color: black;
  height: 19px;
}

#F1   {
  width: 40px;
  background-color: rgb(255, 102, 1);
}

#F2   {
  width: 40px;
  background-color: rgb(255, 255, 1);
}

#F3   {
  width: 40px;
  background-color: rgb(1, 255, 1);
}

#F4   {
  width: 40px;
  background-color: rgb(1, 102, 255);
}

#F5   {
  width: 40px;
  background-color: rgb(255, 51, 153);
}

#F6   {
  width: 40px;
  background-color: rgb(255, 255, 1);
  display: flex;
  padding: 2px;
}

#F1:active, #F2:active, #F3:active, #F4:active, #F5:active, #F6:active {
  width:39px;
  margin-right: 6px;
}

#inner {
  display: flex;
  padding: 4px;
  background-color: rgb(255, 51, 153);
  border-radius: 3px;
}

#inner-inner {
  background-color: grey;
  width: 30px;
  height: 10px;
  border-radius: 3px;
}

#play-pause {
  width: 95px;
}


#reset{
  width: 95px;
}

#demo {
  width: 95px;
}

#play-pause:active, #reset:active, #demo:active {
  width:94px;
  margin-right: 6px;
}