@import url('https://fonts.googleapis.com/css2?family=Sen&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans&display=swap');

@font-face {
  font-family: "VastagoGrotesk";
  src: url("./VastagoGrotesk-Regular.woff2") format("woff2");
}

body {
  font-family: 'VastagoGrotesk', sans-serif;
}

:root {
  --primary: #2196f3;
  --bg-main: #101010;
  --bg-dark: #000000;
  --bg-black: #010101;
  --bg-inset: #2b2b2b;
  --color-title: #ffffff;
  --color-text: #c4c4c4;
  --color-inverse: #101010;
  --btn-color: #ffffff;
  --btn-bg: rgb(255 255 255 / 10%);
  --btn-bg-hover: rgba(245, 245, 245, 0.2);
  --btn-padding: .75rem 1rem;
  --font-secondary: "Roboto", arial, sans-serif;
  --social-size: 20px;
  --cover-blur: 10px;
  --shadow-s: 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12), 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
  --shadow-m: 0px 2px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px -1px rgba(0, 0, 0, 0.2);
  --shadow-l: 0px 8px 17px 2px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12), 0px 5px 5px -3px rgba(0, 0, 0, 0.2);
}

::selection {
  background: #232223;
  color: #a54747;
}

::-moz-selection {
  background: #232223;
  color: #a54747;
}


::after,
::before {
  box-sizing: border-box
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%
}

body {
  margin: 0
}

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

h1,
h3 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0
}

button,
input {
  padding: 0;
  margin: 0;
  border-width: 0;
  font-size: 100%;
  font-family: inherit;
  line-height: inherit;
  color: inherit
}

button {
  text-transform: none
}

[type=button],
button {
  -webkit-appearance: button;
  background-color: transparent;
  display: inline-block;
  vertical-align: middle
}

[type=button]:not(:disabled),
button:not(:disabled) {
  cursor: pointer
}

::-webkit-search-decoration {
  -webkit-appearance: none
}

::-webkit-inner-spin-button {
  height: auto
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit
}

img,
svg {
  height: auto
}

img,
svg {
  display: block;
  max-width: 100%
}

.cursor-pointer {
  cursor: pointer
}

.g-\.75 {
  gap: .75rem
}

.g-2 {
  gap: 2rem
}

.relative {
  position: relative
}

.events-none {
  pointer-events: none
}

.absolute {
  position: absolute
}

.fixed {
  position: fixed
}

.l-0 {
  left: 0
}

.z-10 {
  z-index: 10
}

.z-50 {
  z-index: 50
}

.mt-2 {
  margin-top: 2rem
}

.mb-\.25 {
  margin-bottom: .25rem
}

.mb-\.75 {
  margin-bottom: .75rem
}

.gt\:p-1>*,
.p-1 {
  padding: 1rem
}

.p-1\.25 {
  padding: 1.25rem
}

.p-2 {
  padding: 2rem
}

.px-\.5 {
  padding-right: .5rem;
  padding-left: .5rem
}

.py-\.25 {
  padding-top: .25rem;
  padding-bottom: .25rem
}

.none {
  display: none
}

.flex,
.gt\:flex>* {
  display: flex
}

.flex-1 {
  flex: 1 1 0%
}

.flex-wrap {
  flex-wrap: wrap
}

.flex-column {
  flex-direction: column
}

.justify-center {
  justify-content: center
}

.items-center {
  align-items: center
}

.text-center {
  text-align: center
}

.uppercase {
  text-transform: uppercase
}

.fw-500 {
  font-weight: 500
}

.fw-700 {
  font-weight: 700
}

.fs-4 {
  font-size: 1.25rem
}

.fs-5 {
  font-size: 1.125rem
}

.fs-6 {
  font-size: 1rem
}

.fs-7 {
  font-size: .875rem
}

.fs-8 {
  font-size: .75rem
}

.nowrap {
  white-space: nowrap
}

.object-cover {
  object-fit: cover
}

.o-hidden {
  overflow: hidden
}

@media(min-width:576px) {
  .s\:mt-3 {
    margin-top: 3rem
  }

  .s\:block {
    display: block
  }

  .s\:inline-block {
    display: inline-block
  }

  .s\:fs-3 {
    font-size: 1.5rem
  }
}

@media(min-width:992px) {
  .l\:flex-row {
    flex-direction: row
  }

  .l\:text-right {
    text-align: right
  }

  .l\:fs-4 {
    font-size: 1.25rem
  }
}

body {
  min-height: 100%;
  background-color: var(--bg-main);
  overflow-x: hidden;
  line-height: 1.5;
  background-size: cover;
  word-break: break-word
}

a {
  transition-property: color;
  transition-duration: .3s
}

.content {
  grid-area: content
}

.i {
  stroke-width: var(--i-stroke, 2);
  width: var(--i-size, 24px);
  height: var(--i-size, 24px);
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.i-xxl {
  --svg-size: 2rem
}

.btn {
  display: flex;
  align-items: center;
  column-gap: .75rem;
  flex-wrap: wrap;
  background-color: var(--btn-bg);
  color: var(--btn-color);
  padding: var(--btn-padding);
  transition-property: background-color, box-shadow, color;
  transition-duration: .3s;
  border-radius: .25rem;
  cursor: pointer
}

.btn:hover {
  --btn-bg: var(--btn-bg-hover)
}

.bg-dark {
  background-color: var(--bg-dark)
}

.bg-black {
  background-color: var(--bg-black)
}

.bg-inset {
  background-color: var(--bg-inset)
}

.color-title {
  color: var(--color-title)
}

.color-text {
  color: var(--color-text)
}

.shadow-m {
  box-shadow: var(--shadow-m)
}

.shadow-l {
  box-shadow: var(--shadow-l)
}

.opacity-\.75 {
  opacity: .75
}

.mask {
  position: relative
}

.mask::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.has-bg-cover {
  background-color: var(--bg-dark);
  position: relative
}

.has-bg-cover::after,
.has-bg-cover::before {
  content: "";
  z-index: 5;
  opacity: .5;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.has-bg-cover::before {
  background-color: var(--accent, var(--bg-dark));
  transition: background-color .3s
}

.has-bg-cover::after {
  background-image: linear-gradient(transparent, #333)
}

@keyframes dropdown {
  from {
    transform: translate3d(0, -2rem, 0);
    opacity: 0
  }

  to {
    transform: translate3d(0, 0, 0);
    opacity: 1
  }
}

@keyframes rotate {
  to {
    transform: rotate(360deg)
  }
}

@keyframes fade {
  from {
    opacity: 0
  }

  to {
    opacity: .2
  }
}

@keyframes pulse {
  to {
    transform: scale(1.5);
    opacity: 0
  }
}

.song-now .song-cover:not(.big-cover) {
  animation: rotate 10s infinite linear;
  animation-play-state: var(--play-state, paused) border-radius:20px
}

.player {
  --volume-size: 12px;
  --volume-width: 80px
}

.player.is-playing {
  --pulse-state: block;
  --play-state: running
}

.player-logo {
  max-width: 200px;
}

.player-toggle {
  border-radius: 50rem;
  background-color: var(--accent, var(--primary));
  transition: opacity .3s, background-color .3s
}

.player-toggle:focus {
  outline: 0
}

.player-toggle::after,
.player-toggle::before {
  pointer-events: none;
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: var(--accent, var(--primary));
  border-radius: 50%;
  z-index: -1;
  left: 0;
  top: 0;
  opacity: .7;
  animation: pulse 2s ease-out infinite;
  display: var(--pulse-state, none)
}

.player-toggle:after {
  animation-delay: 1s
}

.player-toggle:hover {
  opacity: .9
}

.player-poster {
  height: calc(100% + (var(--cover-blur)*2));
  top: calc(var(--cover-blur) * -1);
  left: calc(var(--cover-blur) * -1);
  opacity: .5;
  border-radius: 20px;
  filter: blur(var(--cover-blur));
  max-width: initial;
  width: calc(100% + (var(--cover-blur)*2))
}

.player-volume {
  background-color: rgba(255, 255, 255, .25);
  height: var(--volume-size);
  width: var(--volume-width);
  -webkit-appearance: none;
  appearance: none
}

.player-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--volume-size);
  height: var(--volume-size);
  border-radius: 50rem;
  border: none;
  background: #fff;
  cursor: pointer;
  box-shadow: var(--shadow-m)
}

.player-volume::-moz-range-thumb {
  appearance: none;
  width: var(--volume-size);
  height: var(--volume-size);
  border-radius: 50rem;
  border: none;
  background: #fff;
  cursor: pointer;
  box-shadow: var(--shadow-m)
}

.player-meta {
  width: 100%;
}


.player-title {
  min-width: 100%
}

.history-image {
  width: 60px;
  height: 60px
}

.listeners-avatars {
  color: var(--bg-inset)
}

.listeners-avatars>i {
  border-radius: 50%;
  background-color: #101010;
  padding: 3px
}

.listeners-avatars>i:not(:first-child) {
  margin-left: -20px
}

.bigPlayer {
  --volume-size: 14px;
  --volume-width: 120px;
  min-height: 100vh
}

.bigPlayer-content {
  padding-top: 2rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

.big-history .history-image {
  width: 80px;
  height: 80px;
  margin-right: 1.5rem
}

.song-status {
  background-color: #fff;
  color: var(--color-inverse)
}

.song-title {
  min-width: 100%
}

@keyframes sticky {
  from {
    transform: translateY(-100%)
  }

  to {
    transform: translateY(0)
  }
}

.header-sticky {
  transform: translateY(-100%);
  animation: sticky 1s forwards;
  box-shadow: var(--shadow-s)
}

.header-sticky :where(.song-cover, .song-status, .song-album, .song-next, .player-volume) {
  display: none
}

.header-sticky :where(.song-title, .song-artist) {
  margin-bottom: 0;
  margin-top: 0;
  position: initial
}

.header-sticky .player {
  padding-top: 1.25rem;
  padding-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.header-sticky .song-very-long {
  animation: none
}

.header-sticky .song-title {
  font-size: 1.25rem
}

@keyframes textMarquee {

  25%,
  from {
    transform: translateX(0)
  }

  50%,
  75% {
    transform: translateX(calc(-100% + var(--title-width)))
  }
}

.song-very-long {
  animation: textMarquee 14s infinite linear
}

.history-item:hover:before {
  opacity: 1
}

.player-volume-toggle:not(:hover) .volume-vertical {
  pointer-events: none;
  opacity: 0;
  transform: rotate(-90deg) translateX(-1rem)
}

.player-btn .btn {
  padding: 1rem;
  border-radius: 50%
}

.volume-vertical {
  bottom: 100%;
  left: 50px;
  transform: rotate(-90deg) translateX(0);
  transform-origin: bottom left;
  position: absolute;
  display: flex;
  transition: opacity .3s, transform .3s
}

.volume-vertical,
.volume-vertical * {
  border-radius: .5rem;
}

.main-programa[style]::before {
  content: "";
  background-image: var(--poster-src);
  position: absolute;
  background-size: cover;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  opacity: 0;
  animation: fade 1s forwards;
  filter: blur(10px);
  pointer-events: none
}

.inline-block {
  display: inline-block
}

.big-cover-mobile {
  width: 100%;
  max-width: 400px;
}

@media(max-width:991px) {
  .player-meta {
    width: 100%;
    text-align: center
  }
}

@media(max-width:575px) {
  .song-next.player-meta {
    display: none
  }

  .song-now.player-meta {
    position: absolute;
    left: 1rem;
    right: 1rem;
    width: auto;
    top: 50%;
    transform: translateY(-50%)
  }

  .big-cover-mobile {
    position: relative
  }

  .big-cover-mobile::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgb(0 0 0/50%)
  }

  .bigPlayer {
    position: fixed;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 100%;
    width: 100%
  }
}

.header-logo {
  max-width: 200px
}
.player-audio {
  background-image: linear-gradient(180deg, transparent, black);
}


.player-visualizer {
  position: fixed;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  height: 100%;
  opacity: .5;
  filter: url(#gooey);
  inset: auto -20px -20px
}

.visualizer-filter {
  display: none
}