@font-face {
  font-family: cushing;
  src: url("Monaco.ttf");
}

@font-face {
  font-family: microgramma;
  src: url("MicrogrammaCom-BoldExtended.ttf");
}

@font-face {
  font-family: bookman;
  src: url("BookmanStd-Demi.otf");
}

@font-face {
  font-family: futura;
  src: url("Futura.ttc");
}

body {
  border: 0;
  padding: 0;
  background-color: black
}

#container {
  height: 100%;
}


h1,
h2,
h3 {
  width: 100%;
  float: left;
  display: inline-block;
}

#grad {}

.canal {
  position: absolute;
  z-index: 2;
  margin: 0;
  padding: 0;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
  //display:none;
}
//#title{
bottom: 6px;

}
#sound-toggle {
  display: flex;
  position: absolute;
  top: 20px;
  left: 20px;
  height: 30px;
  color: red;
}
#volume-slider {
  cursor: pointer;
  display: inline;
  top: 20px;
  left: 20px;
  margin-left: 8px;
  opacity: .4;
  display: none;
  outline: none;
}
#soundon {
  cursor:pointer;
  width:30px;
  height:30px;
  top: 20px;
  left: 20px;
  z-index: 102;
  background-image:url("mute.svg");
  background-repeat:no-repeat;
  background-color:rgba( 00,
  00,
  00,
  oo);
  background-size: 30px 30px;
}
#soundoff {
  cursor:pointer;
  width:30px;
  height:30px;
  top: 20px;
  left: 20px;
  z-index: 102;
  background-image:url("unmute.svg");
  background-repeat:no-repeat;
  background-size: 30px 30px;
  display:none;
}

.button-hover {
  -webkit-transition: opacity .2s ease-in-out;
  -moz-transition: opacity .2s ease-in-out;
  -ms-transition: opacity .2s ease-in-out;
  -o-transition: opacity .2s ease-in-out;
  transition: opacity .2s ease-in-out;
  opacity: 0.4;
}
.hasHover .button-hover:hover {
  opacity: 0.8;
}

#navbutton {
  cursor:pointer;
  position:absolute;
  display:block;
  top:74px;
  left:20px;
  width:30px;
  height:30px;
  z-index:102;
  background:transparent url(navbutton.svg);
  background-repeat:no-repeat;
  background-size:27px 27px;
}
#reloadbutton {
  cursor:pointer;
  position:absolute;
  display:block;
  top:120px;
  left:20px;
  width:30px;
  height:30px;
  z-index:102;
  background:transparent url(reloadbutton.svg);
  background-repeat:no-repeat;
  background-size:28px 28px;
}
#fullscreenbutton {
  cursor:pointer;
  position:absolute;
  display:block;
  top:270px;
  left:22px;
  width:25px;
  height:25px;
  z-index:102;
  background:transparent url(fullscreenbutton.svg);
  background-repeat:no-repeat;
  background-size:25px 25px;
}
#homescreenButton {
  cursor:pointer;
  position:absolute;
  display:block;
  bottom:45px;
  right:10px;
  opacity:.5;
  width:20px;
  height:20px;
  z-index:102;
  background:transparent url(homescreen.svg);
  background-repeat:no-repeat;
  background-size:20px 20px;
}
#homescreenTip {
  display:none;
  position:absolute;
  bottom:42px;
  right:38px;
  z-index:103;
  font-family:cushing;
  font-size:10px;
  color:whitesmoke;
  opacity:0.8;
  background:rgba(0,0,0,0.65);
  padding:7px 11px;
  border-radius:3px;
  line-height:1.6;
  white-space:nowrap;
  pointer-events:none;
}
#infoButton {
  cursor:pointer;
  position:absolute;
  display:block;
  top:170px;
  left:22px;
  width:25px;
  height:25px;
  z-index:102;
  background:transparent url(info.svg);
  background-repeat:no-repeat;
  background-size:25px 25px;
}
#mailButton {
  cursor:pointer;
  position:absolute;
  display:block;
  top:220px;
  left:22px;
  width:25px;
  height:25px;
  z-index:102;
  background:transparent url(mail.svg);
  background-repeat:no-repeat;
  background-size:25px 25px;
}
.button-hover-light {
  -webkit-transition: opacity .2s ease-in-out;
  -moz-transition: opacity .2s ease-in-out;
  -ms-transition: opacity .2s ease-in-out;
  -o-transition: opacity .2s ease-in-out;
  transition: opacity .2s ease-in-out;
  opacity: 0.7;
}
.hasHover .button-hover-light:hover {
  opacity: 1;
}
.instagram-frontpage {
  cursor:pointer;
  position:absolute;
  display:block;
  bottom:144px;
  right:8px;
  opacity:.5;
  width:24px;
  height:24px;
  z-index:102;
  background:transparent url(instagram.svg);
  background-repeat:no-repeat;
  background-size:24px 24px;
}
.patreon {
  cursor:pointer;
  position:absolute;
  display:block;
  bottom:112px;
  right:10px;
  opacity:.5;
  width:18px;
  height:18px;
  z-index:102;
  background:transparent url(patreon.svg);
  background-repeat:no-repeat;
  background-size:18px 18px;
}
.kick {
  cursor:pointer;
  position:absolute;
  display:block;
  bottom:45px;
  right:10px;
  opacity:.5;
  width:20px;
  height:20px;
  z-index:102;
  background:transparent url(kick.svg);
  background-repeat:no-repeat;
  background-size:20px 20px;
}
.twitch {
  cursor:pointer;
  position:absolute;
  display:block;
  bottom:80px;
  right:10px;
  opacity:.5;
  width:20px;
  height:20px;
  z-index:102;
  background:transparent url(twitch.svg);
  background-repeat:no-repeat;
  background-size:20px 20px;
}

#text {
  outline: 1px solid black;
  background-color: #983273;
  opacity:0.7;
  border:none;
  font: cushing;
  color: white;
  resize: none;
}