body{
    background-color: black;
    margin-left: 25px;
    margin-right: 25px;
    font-family: Helvetica;
    color: white;
}

.TopBar {
    display: flex; 
    color: white;
    align-items: center;
    font-family: Helvetica
}
a {
    color: white;
    text-decoration: none;
}
.logo{
    display: flex;
    white-space: nowrap;
}
.Spotify {
    padding: 10px;
    margin: 0px;
}
.Main {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    background-color: #474747;
    color: white;
    border-radius: 10px;
    padding-top: 10px;
}

.Section1 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr ;
    align-items: start;
    margin: 10px;
    padding-left: 10px;
    background-color: #474747;
    color: white;
    border-radius: 10px;
    padding-top: 10px;
    width: 100%;
    height: 60vh;
    overflow-y: scroll;
}
.description {
    display: flex;
    
  
}
.PlayButton {
    width: 60px;
    height: 40px;
    margin-block-end: 1em;
    margin-right: 10px;
}
.MainPlay {
    width: 60px;
    height: 40px;
    margin-block-end: 1em;
    margin-right: 10px;

}
.description h2 {
    width: 70%; /* Set the width to 70% of the container */
    display: inline-block; /* Ensure it respects the width */
    margin: 0; /* Remove any default margins if necessary */
}
.cover {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    background-color: #474747;
    color: white;
    border-radius: 10px;
    padding-top: 10px;
    margin: 10px;
    width: 80%;
    border-radius: 25px;
}
.Bottom {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    background-color: #474747;
    color: white;
    border-radius: 10px;
    padding-top: 10px;
    margin-top: 10px;
    /* position: absolute;
    bottom: 0; */
    width: 100%;
    height: 5%;
    border-radius: 25px;
}
.Scrollbar {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    background-color: #474747;
    color: white;
    border-radius: 10px;
    padding-top: 10px;
    margin-top: 10px;
    width:100%;
    border-radius: 25px;
}
#BottomCover{
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    background-color: #474747;
    color: white;
    border-radius: 10px;
    width: 75px;
    height: 75px;
    margin: 10px;
    border-radius: 25px;
}
#BottomDescript {
    margin: 10px;


}
.Middle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #474747;
    color: white;
    border-radius: 10px;
    padding-top: 10px;
    margin: 10px;
    width: 100%;
    border-radius: 25px;
}
.Right{
    margin: 20px;
}
.slider {
    -webkit-appearance: none; /* Remove default styling */
    appearance: none;
    width: 90%;
    height: 8px; /* Height of the progress bar */
    background: linear-gradient(to right, #89AFEE 0%, #89AFEE 50%, #535353 50%, #535353 100%);
    border-radius: 4px; /* Rounded edges for the track */
    outline: none;
    cursor: pointer;
    overflow: hidden; /* Ensures the thumb doesn't overflow */
}

.slider::-webkit-slider-runnable-track {
    height: 8px; /* Matches the height of the slider */
    border-radius: 4px; /* Rounded edges for the track */
    background: transparent; /* Background is handled by the parent slider */
}

.slider::-moz-range-track {
    height: 8px;
    border-radius: 4px;
    background: transparent; /* Background is handled by the parent slider */
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Remove default styling */
    appearance: none;
    width: 12px; /* Size of the thumb */
    height: 12px;
    background: #89AFEE; /* Spotify green for the thumb */
    border-radius: 50%; /* Makes the thumb circular */
    cursor: pointer;
    margin-top: -2px; /* Centers the thumb on the track */
    position: relative;
    z-index: 2; /* Ensures the thumb is above the track */
}

.slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: #89AFEE;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

.slider::-ms-thumb {
    width: 12px;
    height: 12px;
    background: #89AFEE;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    z-index: 2;
}