@font-face {
  font-family: "Anton";
  src: url("https://box.lautbox.eu/assets/fonts/Anton-Regular.ttf");
}

@font-face { 
  font-family: "coolvetica"; 
  src: url("https://box.lautbox.eu/assets/fonts/coolvetica.otf"); 
}

@font-face { 
  font-family: "Unispace"; 
  src: url("https://box.lautbox.eu/assets/fonts/unispace.otf"); 
}
*{
  box-sizing: border-box;
}
.copyright{
  background-color: transparent;
  position: absolute;
  right: 2px;
  top: 2px;
}
.grid-box{
  width: 100%;
  height: 110px;
  display: grid;
  grid-template-columns: 110px 100fr;
  grid-template-rows: 30px 45px 35px;
  grid-template-areas:
    "cover stream"
    "cover player"
    "cover title";
  font-size: 16px;
}
.coverplayer{
  display: none;
}
.coverbig{
  display: inline;
  padding: 0;
  margin: 0;
  width: 110px;
  height: 110px;
}
.playerimg{
  padding: 0;
  margin: 0;
  width: 40px;
  height: 40px;
}
.stream-live{
  display: inline;
}
.stream-listener{
  display: inline;
}
.textcover{
  display: none;
}
.box-icon {
  background-color: transparent;
}
@media (max-width: 480px) {
  .grid-box{
    grid-template-columns: 0px 100fr;
  }
  .coverplayer{
    display: inline;
    width: 40px;
    height: 40px;
  }
  .coverbig{
    display: none;
  }
  .grid-stream{
    font-size: 16px;
  }
  .stream-live{
    display: inline;
  }
  .stream-listener{
    display: none;
  }
}

@media (max-width: 320px) {
  .stream-live{
    display: inline;
  }
  .stream-listener{
    display: none;
  }
  .playerimg{
    width: 40px;
    height: 40px;
  }
  .coverplayer{
    width: 40px;
    height: 40px;
  }
  .grid-stream{
    font-size: 14px;
  }
  .grid-box{
    grid-template-rows: 25px 50px 35px;
  }
}
@media (max-width: 220px) {
  span.textdisplay{
    display: none;
  }
  span.textcover{
    display: block;
  }
  .coverplayer{
    display: none;
  }
}