@charset "UTF-8";

@font-face {
  font-family: neuedisp;
  src: url(./tipo/NeueHaasGrotDisp-55Roman.otf);
}

body {
  margin: 0;
}

div {
  font-family: neuedisp;
}

main {
  font-family: neuedisp, "Open Sans", sans-serif;
}

.grid {
  display: grid;
  grid-template-columns: 52px 52px repeat(7, 1fr);
  grid-template-rows: 100%;
  width: 100%;
  height: 56px;
  color: #ffffff;
  background: #9999cc;
}

.play {
  grid-column: 1/1;
  grid-row: 1/1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.play input {
  max-width: 120px;
  max-height: 120px;
  height: 60%;
  padding: 2px;
  margin: 2px;
}

.vivo {
  grid-column: 2/3;
  grid-row: 1/1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.artist {
  grid-column: 3/10;
  grid-row: 1/1;
  white-space: nowrap;
}

.chat {
  grid-column: 10/11;
  grid-row: 1/1;
  display: grid;
  align-items: center;
  justify-items: center;
}

.chat a {
  font-size: 1em;
}

a:link,
a:visited,
a:hover,
a:active {
  color: white;
  text-decoration: none;
}

#trackInfo,
#rj-player,
.player-v3.player-medium,
.rjp-trackinfo-container {
  height: 100%;
}

.rjp-info {
  display: none;
  align-items: center;
  font-family: neuedisp;
  color:#DF5B1C;
}

/* Scroll anim */
.scroll-left {
  overflow: hidden;
  position: relative;
  height: 100%;
  width: 100%;
}

.scroll-left p {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  text-align: center;
  font-size: 1em;

  /* Starting position */
  -moz-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  /* Apply animation to this element */
  -moz-animation: scroll-left 20s linear infinite;
  -webkit-animation: scroll-left 20s linear infinite;
  animation: scroll-left 20s linear infinite;
}

/* Move it (define the animation) */
@-moz-keyframes scroll-left {
  0% {
    -moz-transform: translateX(100%);
  }

  100% {
    -moz-transform: translateX(-100%);
  }
}

@-webkit-keyframes scroll-left {
  0% {
    -webkit-transform: translateX(100%);
  }

  100% {
    -webkit-transform: translateX(-100%);
  }
}

@keyframes scroll-left {
  0% {
    -moz-transform: translateX(100%);
    /* Browser bug fix */
    -webkit-transform: translateX(100%);
    /* Browser bug fix */
    transform: translateX(100%);
  }

  100% {
    -moz-transform: translateX(-100%);
    /* Browser bug fix */
    -webkit-transform: translateX(-100%);
    /* Browser bug fix */
    transform: translateX(-100%);
  }
}