body{
	font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	height:200px;
	width:30%;
	font-weight: 900;
    font-size: 1.5vw;
	letter-spacing: 0.4vw;
	font-variant-caps:petite-caps;	
}

.centred-elements {
  width: 75%;
  height: 50%;
  opacity: 0.5;
  margin-left: 50px;
  position: absolute;
  text-align:justify-all;
  top: 50%;
  left: 20%;
  -ms-transform: translate(-20%, -50%);
  transform: translate(-20%, -50%);
}

p{
  margin: 0;
}

canvas {
  position: absolute;
  left: 0px;
  width: 100%;
  height: 70%;
  top: 30%;
}

button {
  margin-left: 10px;
  margin-top: 10px;
  background: transparent;
  border: none;
  opacity: 0.6;
}

.fas {
display:inline-block;
text-rendering:auto;line-height:1;
width: 37px;
height: 37px;
}

.fa-sound-on {
background-image: url("AudioSpeaker_on.png");
	opacity: 0;
-webkit-transition: all 3000ms ease-in-out;
-moz-transition: all 3000ms ease-in-out;
-ms-transition: all 3000ms ease-in-out;
-o-transition: all 3000ms ease-in-out;
transition: all 3000ms ease-in-out;
	
}

.fa-sound-off {
background-image: url("AudioSpeaker_off.png");
opacity: 0;
-webkit-transition: all 3000ms ease-in-out;
-moz-transition: all 3000ms ease-in-out;
-ms-transition: all 3000ms ease-in-out;
-o-transition: all 3000ms ease-in-out;
transition: all 3000ms ease-in-out;
z-index: 1;

}

.show-on:hover .fa-sound-off {
opacity: 1;
-webkit-transition: all 3000ms ease-in-out;
-moz-transition: all 3000ms ease-in-out;
-ms-transition: all 3000ms ease-in-out;
-o-transition: all 3000ms ease-in-out;
transition: all 3000ms ease-in-out;
}

.show-off:hover .fa-sound-on {
opacity: 1;
-webkit-transition: all 3000ms ease-in-out;
-moz-transition: all 3000ms ease-in-out;
-ms-transition: all 3000ms ease-in-out;
-o-transition: all 3000ms ease-in-out;
transition: all 3000ms ease-in-out;
}