@font-face {
    font-family: "agencyfb";
    src:
      url("./fonts/agencyfb_bold-webfont.woff2") format("woff2"),
      url("./fonts/agencyfb_bold-webfont.woff") format("woff");
  }

  @font-face {
    font-family: "gilroy";
    src:
      url("./fonts/gilroy-light-webfont.woff") format("woff2"),
      url("./fonts/gilroy-light-webfont.woff2") format("woff");
  }


  * {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    user-select: none;
  }

  * {
    user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
  }


  body,
  html {
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
  }

  body {
    background: black;
    position: relative;
    z-index: 2;
  }
  #video-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
  }

  #video-container-video {
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    opacity: 0.8;
  }
  .background-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('image/img/backgr.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    z-index: 0;
    opacity: 0.6;
    pointer-events: none;
  }

  .lineblockup {
    position: absolute;
    top: 1.8519vh;
    right: -11.1111vh;
    width: 100vh;
    height: 0.1926vh;
    flex-shrink: 0;
    background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%);
  }

  .lineblockup-stripe {
    position: absolute;
    display: flex;
    width: 8.7963vh;
    height: 0.2778vh;
    right: 34.9074vh;
    flex-shrink: 0;
    background: #FFF;
    box-shadow: 0vh 0vh 3.3148vh 0vh #FFF;
  }

  .lineblock {
    position: absolute;
    top: -4.6296vh;
    right: -7.4074vh;
    width: 0.1926vh;
    height: 100vh;
    flex-shrink: 0;
    background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%);
  }

  .lineblock-innere {
    position: absolute;
    display: flex;
    top: 45.5556vh;
    width: 0.2778vh;
    height: 8.7963vh;
    flex-shrink: 0;
    background: #FFF;
    box-shadow: 0vh 0vh 3.3148vh 0vh #FFF;
  }

  .lineblockr {
    position: absolute;
    top: -4.6296vh;
    left: -7.4074vh;
    width: 0.1926vh;
    height: 100vh;
    flex-shrink: 0;
    background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%);
  }

  .person-container {
    display: flex;
    position: relative;
    width: 100%;
    max-width: 138.8889vh;
    margin: 0 auto;
  }

  .person {
    width: 27.7778vh;
    height: auto;
    position: absolute;
    left: -20%;
    bottom: -4.6296vh;
  }

  .groundblurtwo {
    border-radius: 103.4259vh;
    width: 103.4259vh;
    height: 103.4259vh;
    opacity: 0.25;
    background: #ebef1e;
    filter: blur(30.5556vh);
    position: absolute;
    bottom: 0;
  }

  .container {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 129.6296vh;
    margin: 0 auto;
    margin-top: 1.8519vh;
    justify-content: space-between;
    align-items: center;
  }

  .store {
    margin-left: auto;
  }

  .header__wrapper {
    display: flex;
    align-items: center;
  }

  .title {
    color: white;
    font-family: 'agencyfb';
    font-weight: 700;
    font-size: 4.4444vh;
    white-space: nowrap;
    margin-top: 2.7778vh;
  }

  .text {
    width: 13.3333vh;
    display: block;
    font-family: 'gilroy';
    color: rgba(255, 255, 255, 0.55);
    font-size: 1.1111vh;
    font-weight: 400;
    margin: 0 auto;
    padding-top: 2.7778vh;
    padding-left: 1.8519vh;
  }
  
  .info {
    display: flex;
  }

  .discord {
    position: relative;
    max-width: 101.8519vh;
    width: 32.4074vh;
    height: 50.9259vh;
    background-color: rgba(255, 255, 255, 0.01);
    flex-shrink: 0;
    border-radius: 1.8519vh;
    border: 0.0926vh solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
  }

  .groundblur {
    width: 30.8333vh;
    height: 7.5926vh;
    background-color: rgba(217, 217, 217, 0.25);
    filter: blur(8.2407vh);
    position: absolute;
    bottom: 0;
  }

  .discord {
    text-align: center;
  }

  .discordimg {
    position: relative;
  }

  .discordlogo {
    position: absolute;
    left: 50%;
    top: 6.7778vh;
    bottom: 3.7037vh;
    transform: translate(-50%, -50%);
  }

  .storelogo-1 {
    width: 28.537vh;
    height: 28.537vh;
    flex-shrink: 0;
  }

  .storelogo-2 {
    width: 13.537vh;
    height: 13.537vh;
  }

.storelogo-3 {
    display: flex;
    position: absolute;
    width: 23.7037vh;
    height: 23.7037vh;
    transform: rotate(5.578deg);
    right: -10.2593vh;
  }

  .discord-logo-1 {
    width: 23.7037vh;
    height: 23.7037vh;
    flex-shrink: 0;

  }

  .discordlogoright {
    position: absolute;
    top: 24.8889vh;
    right: -0.2593vh;
  }

  .discordlogoright-2 {
    display: flex;
    position: absolute;
    width: 23.7037vh;
    height: 23.7037vh;
    transform: rotate(5.578deg);
    right: -10.2593vh;
  }

  .discordlogoleft {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    border-radius: 1.8519vh 0 0 0;
  }

  .discordlogoleft-2 {
    width: 10.7407vh;
    height: 10.7407vh;
  }

  .textinfo {
    position: absolute;
    bottom: 13.8889vh;
    left: 0;
    width: 100%;
    text-align: center;
  }

  .discinfo {
    color: white;
    font-family: 'agencyfb';
    font-size: 2.963vh;
    font-weight: 700;
    display: block;
    margin: 0;
  }

  .disctext {
    color: rgba(255, 255, 255, 0.55);
    font-family: 'gilroy';
    font-size: 1.1111vh;
    font-weight: 400;
    display: block;
    margin-top: 0.9259vh;
    max-width: 23.1481vh;
    margin-left: auto;
    margin-right: auto;
    line-height: 2;
  }

  .visit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24.3519vh;
    height: 4.1667vh;
    border-radius: 0.6481vh;
    position: absolute;
    bottom: 3.7037vh;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 0.0926vh solid #ebef1e;
    background: #ebef1ee8;
    box-shadow: 0vh 1.8519vh 5.6296vh 0vh #ebef1e56;
    z-index: 2;
    cursor: pointer;
  }

  a {
    font-family: 'gilroy';
    text-decoration: none;
    color: white;
    font-size: 1.8111vh;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }




  a:hover {
    color: #ffffff;
    transition: 0.3s ease
  }

  .ellipses {
    position: relative;
    width: 46.9444vh;
    height: 46.9444vh;
    margin: 0 auto;
    filter: drop-shadow(0 0 3vh #ebef1e);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  @keyframes pulse {
    0% {
      transform: scale(1) translate(-50%, -50%);
    }

    50% {
      transform: scale(1.05) translate(-50%, -50%);
    }

    100% {
      transform: scale(1) translate(-50%, -50%);
    }
  }

  .ellipses img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: auto;
    animation: pulse 2s ease-in-out infinite;
    filter: drop-shadow(0 0 2vh #ebef1e);
  }

  .ellipses-große {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .player {
    z-index: 3;
    flex: 1;
    display: flex;
    height: 6.4815vh;
    border: 0.0926vh solid rgba(255, 255, 255, 0.05);
    border-radius: 1.0185vh;
    width: 100%;
    box-sizing: border-box;
  }

  .music {
    justify-content: center;
    display: flex;
    align-items: center;
    width: 4.9074vh;
    height: 4.9074vh;
    border: 0.0926vh solid rgba(255, 255, 255, 0.05);
    border-radius: 0.6481vh;
    background: rgba(255, 255, 255, 0.01);
    align-self: center;
    margin-left: 0.6481vh;
  }

  .volume {
    display: flex;
    align-items: center;
    width: 13.8889vh;
    height: 4.9074vh;
    border: 0.0926vh solid rgba(255, 255, 255, 0.05);
    ;
    border-radius: 0.6481vh;
    background: rgba(255, 255, 255, 0.01);
    ;
    align-self: center;
    margin-left: 0.6481vh;
  }

  .left {
    width: 1.5741vh;
    height: 1.3889vh;
    flex-shrink: 0;
  }

  .scale {
    width: 7.5vh;
    height: 0.2778vh;
    border-radius: 0.1852vh;
    background: rgba(255, 255, 255, 0.11);
    position: relative;
  }

  .activeScale {
    width: auto;
    position: relative;
    height: 0.2778vh;
    border-radius: 0.1852vh;
    background: rgba(255, 255, 255, 1);
    max-width: 7.2593vh;
  }

  .left,
  .right {
    margin: 0 0.9259vh;
  }

  .right {
    width: 1.5741vh;
    height: 1.3889vh;
    flex-shrink: 0;
  }

  .slider {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0%, -50%);
    width: 0.6481vh;
    height: 1.2037vh;
    border-radius: 0.1852vh;
    background: #ebef1e;
    box-shadow: 0 0.3704vh 0.9259vh #ebef1e91;
  }

  .logomusic {
    display: flex;
    align-items: center;
  }

  .logomusic svg {
    width: 2.1296vh;
    height: 2.3148vh;
  }

  .back {
    justify-content: center;
    display: flex;
    align-items: center;
    width: 4.9074vh;
    height: 4.9074vh;
    border: 0.0926vh solid rgba(255, 255, 255, 0.05);
    ;
    border-radius: 0.6481vh;
    background: rgba(255, 255, 255, 0.01);
    ;
    align-self: center;
    margin-left: 0.6481vh;
  }

  .back svg {
    width: 1.3889vh;
    height: 1.4815vh;
    flex-shrink: 0;
  }


  .back path {
    fill: white;
  }

  .back:hover path {
    fill: #ebef1e;
    box-shadow: 0 0.3704vh 0.9259vh #ebef1ea1;
  }

  .play {
    justify-content: center;
    display: flex;
    align-items: center;
    width: 4.9074vh;
    height: 4.9074vh;
    border: 0.0926vh solid rgba(255, 255, 255, 0.05);
    ;
    border-radius: 0.6481vh;
    background: rgba(255, 255, 255, 0.01);
    ;
    align-self: center;
    margin-left: 0.6481vh;
  }

  .play img {
    width: 1.8889vh;
    height: 1.8815vh;
    flex-shrink: 0;
  }

  .forward {
    justify-content: center;
    display: flex;
    align-items: center;
    width: 4.9074vh;
    height: 4.9074vh;
    border: 0.0926vh solid rgba(255, 255, 255, 0.05);
    ;
    border-radius: 0.6481vh;
    background: rgba(255, 255, 255, 0.01);
    ;
    align-self: center;
    margin-left: 0.6481vh;
  }

  .forward svg {
    width: 1.3889vh;
    height: 1.4815vh;
    flex-shrink: 0;
  }

  .forward path {
    fill: white;
  }

  .forward:hover path {
    fill: #ebef1e;
    box-shadow: 0 0.3704vh 0.9259vh #ebef1ea4;
  }

  .track {
    height: 0.2778vh;
    width: 87.963vh;
    border-radius: 0.1852vh;
    background: rgba(255, 255, 255, 0.11);
    align-self: flex-end;
    margin-bottom: 1.3889vh;
    margin-left: 1.5741vh;
  }

  .song {
    margin-top: -3.2407vh;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }

  .songname {
    font-family: 'gilroy';
    font-size: 1.4815vh;
    color: white;
  }

  .time {
    font-family: 'gilroy';
    font-size: 1.4815vh;
    color: white;
  }

  .blocks {
    display: flex;
  }

  .block {
    display: flex;
    position: relative;
    width: 41.6667vh;
    height: 14.3519vh;
    border-radius: 1.8519vh;
    border: 0.0926vh solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
    align-items: center;
  }

  .leftline {
    width: 0.2778vh;
    height: 15.9259vh;
    background: #ebef1e;
    box-shadow: 0.2778vh 0vh 1.75vh 0vh #ebef1e77;
  }

  .icon {
    justify-content: center;
    display: flex;
    align-items: center;
    width: 4.4444vh;
    height: 4.4444vh;
    border-radius: 0.5556vh;
    background: rgba(255, 252, 64, 0.07);
    margin-left: 3.2407vh;
    margin-top: -5.5556vh;
  }

  .icon svg {
    width: 2.037vh;
    height: 2.4074vh;
    flex-shrink: 0;
  }

  .username {
    color: white;
    font-family: 'agencyfb';
    font-size: 2.037vh;
    font-weight: 700;
    margin-left: 1.3889vh;
    margin-bottom: 7.4074vh;
  }

  .post {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    margin-left: 9.2593vh;
    width: 7.963vh;
    height: 1.9444vh;
    margin-top: -1.8519vh;
    border-radius: 0.2778vh;
    border: 0.0926vh solid #ebef1e;
    background: #ebef1e85;
    box-shadow: 0vh 0vh 0.5463vh 0vh #ebef1e8a inset, 0vh 0.3704vh 1.3241vh 0vh #ebef1e8f;
  }

  .posttext {
    color: #FFF;
    font-family: 'gilroy';
    font-size: 1.1111vh;
    font-weight: 400;
  }

  .apostrophe {
    position: absolute;
    margin-left: 9.2593vh;
    margin-bottom: -8.3333vh;
    margin-top: -1.8519vh;
    width: 0.0926vh;
    height: 3.1481vh;
    background: rgba(255, 255, 255, 0.11);
  }

  .apostrophetext {
    width: 28.5926vh;
    display: block;
    color: rgb(189, 187, 187);
    font-family: 'gilroy';
    font-size: 1.4111vh;
    font-weight: 400;
    display: block;
    padding-left: 0.9259vh;
    line-height: 1.3;
  }

  .trackprocess {
    max-width: 101.8519vh;
    height: 0.2778vh;
    border-radius: 0.6481vh;
    background: white;
    width: 0%;
  }

  .pause {
    justify-content: center;
    display: flex;
    align-items: center;
    width: 4.9074vh;
    height: 4.9074vh;
    border: 0.0926vh solid rgba(255, 255, 255, 0.05);
    ;
    border-radius: 0.6481vh;
    background: rgba(255, 255, 255, 0.01);
    ;
    align-self: center;
    margin-left: 0.6481vh;
  }

  .sonny-black-bild {
    position: absolute;
    display: flex;
    width: 43.7037vh;
    height: 91.2963vh;
    right: 0vh;
    top: 8.7037vh;
  }

  .sanchez-black-bild {
    position: absolute;
    display: flex;
    left: 0vh;
    top: 5.0926vh;
    width: 43.1481vh;
    height: 94.9074vh;
  }

  .loading-container {
    position: fixed;
    bottom: 10vh;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1vh;
    z-index: 1000;
  }

  .loading-text {
    color: #FFF;
    font-family: 'agencyfb';
    font-size: 2vh;
    font-weight: 700;
    letter-spacing: 0.5vh;
  }

  .loading-bar-container {
    width: 40vh;
    height: 0.5vh;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0.25vh;
    overflow: hidden;
    position: relative;
  }

  .loading-bar {
    width: 0%;
    height: 100%;
    background: #f1ee0a;
    position: absolute;
    left: 0;
    transition: width 0.3s ease;
    box-shadow: 0 0 1vh rgba(255, 236, 64, 0.5);
  }

  .loading-percentage {
    color: #ebef1e;
    font-family: 'gilroy';
    font-size: 1.5vh;
    font-weight: 500;
  }

  .loading-progress {
    position: fixed;
    bottom: 1vh;
    left: 0;
    right: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    filter: drop-shadow(0 0 4vh #ebef1e);
  }

  .progress-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5vh;
  }

  .progress-text {
    color: #FFF;
    font-family: 'agencyfb';
    font-size: 2.2vh;
    font-weight: 700;
    letter-spacing: 0.4vh;
    text-shadow: 0 0 1vh #ebef1e8c;
  }

  .progress-bar {
    width: 37vh;
    height: 0.4vh;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0.2vh;
    overflow: hidden;
    position: relative;
  }

  .progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: #ebef1e;
    box-shadow: 0 0 2vh #ebef1e8c;
    transition: width 0.3s ease-out;
  }

  .progress-value {
    color: #ffffff;
    font-family: 'gilroy';
    font-size: 1.3vh;
    font-weight: 500;
    text-shadow: 0 0 1vh #ebef1e80;
  }