body {
    background-color: rgb(38, 42, 43);
      width: 100%;
      height: 100%;
      /* scale it*/
      background-size: cover;
      /* center it */
      background-position: center;
      /* don't repeat it */
      background-repeat: no-repeat;
      /* fixed to the viewport */
      background-attachment: fixed;
      /*background-image: url("https://miniature-journey.pages.dev/images/DJI_0161kopia.jpg");*/
      margin-top: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
      margin-right: 0px;
    }


.music-image-box{
    height: 100%;
    border-radius: 1vh;
}
.music-text-box{
    width: 100%;
    height: 1vh;
    border-radius: 2vh;
    color: rgb(255, 255, 255);
    font-family: Roboto,sans-serif;
    font-size: 2vh;
    font-weight: normal;
    white-space: nowrap;
    text-decoration: none;
}
.music-box-div{
    flex-direction: flex-start;
    justify-content: right;
    align-items: flex-start;
    position: right;
    align-content: space-between;
    flex-direction: column;
    margin-left: 1.5vh;
    margin-bottom: 2vh;
    margin-top: 0.5vh;
    column-gap: 1vh;
}

.tittle{
    font-weight: bold !important;
    margin-bottom: 0.5vh;
    font-size: 2.3vh;
}

.xxxauthor{
    margin-bottom: 0.5vh;
    font-size: 2.3vh;
    margin-top: 1.2vh;
    margin-bottom: 2.5vh;
}

.button{
    margin-top: 0.8vh;
    height: auto;
    border-radius: 2vh;
    background-color: #1DB954;
    border: 1vh solid #1DB954; /* Green */
    padding: 0.1vh 5vh;
    text-align: center;
    font-family: Roboto,sans-serif;
    color: rgb(255, 255, 255);
    width: 37vh;
    font-size: 2vh;
    font-weight: bold !important;
}

.button:hover {
    background-color: #33C065; /* Green */
    border: 1vh solid #33C065; /* Green */
  }

.category{
    width: 100%;
    text-align: center;
    align-items: center;
}

.category-text{
    font-family: Roboto,sans-serif;
    color: rgb(255, 255, 255);
    text-align: center;
    align-items: center;
    height: 30%;
    margin: 2vh;
    font-size: 3.5vh;
}





.music-box{
    background-color: rgb(17, 18, 18);
    width: 60vh;
    height: 20vh;
    /* scale it*/
    background-size: cover;
    /* center it */
    background-position: center;
    /* don't repeat it */
    background-repeat: no-repeat;
    /* fixed to the viewport */
    background-attachment: fixed;
    position: center;
    /*background-image: url("https://miniature-journey.pages.dev/images/DJI_0161kopia.jpg");*/
    /* add corner */
    border-radius: 1vh;
    /* add shadow */
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    position: right;
    margin-top: 2vh;
    margin-bottom: 2vh;
  }

  .profile-background{
    background-image: url("https://spotify.hckrteam.com/images/bytow-back3.png");
    background-size: cover;
    height: max-content;
    min-height: 20vh;
    display: flex;
    background-position: center center;
    margin-left: auto;
    margin-right: auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 32px;
  }

  .profile-image{
    border-radius: 100vh;
    width: 15vh;
  }

  .profile-name-text{
    font-family: Roboto,sans-serif;
    color: rgb(255, 255, 255);
    font-size: 4.5vh;
    font-weight: bold !important;
    margin-bottom: -2vh;
  }

  .profile-role-text{
    font-family: Roboto,sans-serif;
    color: rgb(255, 255, 255);
    font-size: 2.5vh;
    font-weight: normal !important;
  }

  .profile-div{
    display: flex;
    margin-top: 2vh;
    margin-bottom: 2vh;

    flex-direction: row;
    justify-content: center;
    align-items: center;

    gap: 3vh;
  }
  .syf{
    color: rgba(255, 255, 255, 0);
    margin-left: -20vh;
    height: 0vh;
  }