body{
  background-color: #222222;
  -webkit-animation-delay: 0.1s;
  -webkit-animation-name: fontfix;
  -webkit-animation-duration: 0.1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: linear;
}

@-webkit-keyframes fontfix {
    from { opacity: 1; }
    to   { opacity: 1; }
}

.wrapper{
  width: 100%;
  margin: 0 auto;
}

.centerize{
  text-align: center;
}

.stream{
  width: 75%;
  height: 92%;
  background-color: black;
  float: left;
}

.chat{
  width: 25%;
  height: 92%;
  background-color: black;
  float: left;
}

.fullstream{
  width: 100%;
}

#footer{
  width: 98%;
  background-color: black;
  float: left;
  padding: 1%;
}

span{
  margin-right: 20px;
  font-family: 'Play', sans-serif;
  color: white;
}

a{
  text-decoration: none;
  color: grey;
}

a:hover{
  color: white;
}

button{
  font-family: 'Play', sans-serif;
  background: black;
  border: 0px;
  width: 150px;
  color: white;
  font-size: 1.1em;
  outline: none;
}

button:hover{
  color: grey;
  border: 0px;
}
/* start of desktop styles*/

@media screen and (max-width: 991px) {
     /* start of large tablet styles */
     .stream{
       width: 100%;
       height: 500px;
     }
     .chat{
       width: 100%;
       height: 500px;
       float: left;
     }
     #contentchat{
       width: 300px;
       margin: 0 auto;
     }

}
/*
@media screen and (max-width: 767px) {
     /* start of medium tablet styles

}*/

@media screen and (max-width: 479px) {
     /* start of phone styles */

}