.mainPlayer[type="player"] .content
{
   width: 100%;
   background: linear-gradient(99deg, #13293D 36.51%, #E5007E 128.73%);
   border-radius: var(--border-radius);
}
.playerInfo
{
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   flex: 1;
   border-radius: 0 8px 8px 0;
   background-image: url("/img/background.png");
}
.moderaterTile
{
   display: flex;
   align-items: center;
   gap: 16px;
   padding-bottom: 16px;
   margin: 24px;
   width: calc(100% - 48px);
   border-bottom: 1px solid #F2E4C4;
}
.moderaterTile img
{
   width: 72px;
   height: 72px;
   object-fit: cover;
   object-position: top;
}
.moderaterTile .showTitle
{
   font-family: "Bebas Neue";
   font-size: 24px;
   font-weight: 400;
   letter-spacing: 0.06px;
}
.moderaterTile .moderatorName
{
   color: #F2E4C4;
   font-family: "PT Sans";
   font-size: 17px;
   font-weight: 400;
   letter-spacing: 0.043px;
}

.playerTop
{
   display: flex;
   justify-content: space-between;
   margin: 40px;
}


.playerInfo[has_moderator="true"] .playerTop
{
   margin: 0 32px;
}
.playerInfo[has_moderator="true"] .volumeBarHorizontal
{
   border: unset;
   padding-top: 0;
   margin: 16px 24px 26px 24px;
}
.playerInfo[has_moderator="true"] .playerMeta .title
{
   font-size: 32px;
   font-weight: 400;
   letter-spacing: 0.08px;
}
.playerInfo[has_moderator="true"] .playerMeta .subTitle
{
   font-size: 24px;
   font-weight: 400;
   letter-spacing: 0.06px;
}

.playerInfo[has_moderator="false"] .moderaterTile
{
   display: none;
}




.playerTop > .playButton
{
   height: 72px;
   width: 72px;
}
.playerTop > .playButton img{
   height: 100%;
}
.playerTop > .playButton img[state="buffering"]{
   height: 100%;
   animation: buffer 5s infinite;
}
.playerTop  img[state="buffering"].playButton{
   height: 100%;
   animation: buffer 5s infinite;
}
@keyframes buffer {
   100% {
      transform: rotate(360deg);
   }
}


.playerMeta .title
{
   color: var(--font-color-accent);
   font-family: var(--font-family-headline);
   font-size: 40px;
   font-weight: 400;
   letter-spacing: 0.1px;
}
.playerMeta .subTitle
{
   color: var(--font-color-accent-light);
   font-family: var(--font-family-text);
   font-size: 32px;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
   letter-spacing: 0.08px;
}
.playerMeta .subTitle,
.playerMeta .title
{
   text-overflow: ellipsis;
}
.volumeBarHorizontal
{
   font-size: 10px;
   font-weight: 400;
   letter-spacing: 0.025px;
   
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 16px 40px 46px 40px;
   gap: 8px;

   border-top: 1px solid var(--font-color-accent-light);
   padding-top: 18px;
}
.volumeBarHorizontal > input[type="range"]
{
   transform: unset;
   flex: 1;
}
.bottomPLayer
{
   display: flex;
   flex-direction: column;
   gap: 8px;
}
.mainPlayer[type="player"] .miniPlayerVolumeButton,
.mainPlayer[type="player"] .miniPlayerVolumeButton img
{
   height: 15px;
   width: 15px;
}
.mainPlayer[type="player"] .cover
{
   width: 288px;
   height: 288px;
   background: white;
   border-right: 1px solid white;
}
.mainPlayer[type="player"] .cover img
{
   height: 100%;
   width: 100%;
}
.liveBadge
{
   display: none;
   position: absolute;
   right: 0;
   background-color: var(--font-color-accent);
   color: var(--content-bg);
   border-radius: var(--border-radius-badge);
   padding: 4px 8px;
   margin: 8px 156px;
   
   font-family: var(--font-family-headline);
   font-size: 18px;
   font-weight: 400;
   letter-spacing: 0.045px;
}

@media screen and (max-width: 700px) {
   .headerContainer .headerText
   {
      margin-top: 16px;
   }
   .headerContainer .rooftop
   {
      text-decoration: underline;
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 0.03px;
   }
   .headerContainer .title
   {
      font-size: 18px;
      font-weight: 400;
      letter-spacing: -0.09px;
      margin: 8px 0 16px 0;
   }
   .headerContainer .description
   {
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 0.07px;
   }
   .headerContainer .header
   {
      display: flex;
      flex-direction: column-reverse;
      margin: 16px 0;
      max-width: 90%;
   }
   .headerContainer .headerImage
   {
      align-self: flex-end;
   }
   .titleWrapper
   {
      border-left: 2px solid var(--font-color-accent-light);
      margin: 16px;
   }
   .titleWrapper > .title
   {
      margin: 16px 0;
      padding: 5px 8px;
      font-size: 24px;
      font-weight: 400;
      letter-spacing: -0.12px;
      padding-left: calc(5% - 8px);
   }
   .playerContainer {
      min-width: 100%;
      margin: 0 16px 16px 16px;
  }


  /* container and player specifics, replace eventually WIP */
  .mainPlayer[type="player"]
  {
     width: calc(100% - 32px);
     margin: 0 16px;
  }
  .mainPlayer[type="player"] .cover .playButton img 
  {
     display: block;
  }
  .mainPlayer[type="player"] .content {
     display: flex;
     flex-direction: column;
 }
   .mainPlayer[type="player"] .cover
   {
      display: flex;
      width: unset;
      height: unset;
      border: unset;
      background: transparent;
      margin: 16px 8px;
      align-items: center;
      justify-content: space-between;
   }
   .mainPlayer[type="player"] .cover .playControl
   {
      flex: 1;
      display: flex;
      justify-content: center;
   }
   .mainPlayer[type="player"] .cover img.mainPlayerImg
   {
      width: 164px;
      height: 164px;
   }
   .mainPlayer[type="player"] .cover img.playButton
   {
      width: 64px;
      height: 64px;
   }

   .playerInfo[has_moderator="true"] .playerMeta .title 
   {
      font-size: 24px;
      font-weight: 400;
      letter-spacing: 0.06px;
      margin-bottom: 8px;
   }
   .playerInfo[has_moderator="true"] .playerMeta .subTitle
   {
      font-size: 16px;
   }

   .moderaterTile 
   {
      margin: 16px 8px;
      width: calc(100% - 16px);
   }
   .playerInfo[has_moderator="true"] .playerTop
   {
      margin: 0 8px;
   }
   .playerTop .playButton
   {
      display: none;
   }
   .playerInfo[has_moderator="true"] .volumeBarHorizontal,
   .volumeBarHorizontal
   {
      margin: 0px 16px 16px 12px;
      padding-top: 8px;
   }
   .playerMeta
   {
      margin: 16px 0 0 0;
      border-bottom: 1px solid #F2E4C4;
      padding-bottom: 16px;
      width: 100%;
   }
   .bottomContainer
   {
      margin-top: 0;
      width: 100%;
      border: unset;
   }
   
}
@media screen and (max-width: 1000px) {
   .playerMeta .title
   {
      font-size: 30px;
   }
   .playerMeta .subTitle
   {
      font-size: 22px;
   }
}