body {
  background-color: #000000;
  color: #FFFFFF;
  font-family: Verdana;
  background-image: url("stars.jpg");
  background-repeat: repeat;
  
}

.all {
  display: block;
  margin: 0 auto;
  width: 1200px;
  max-width: 100%;
}

.head {
  margin: 0 auto;
  width: 100%;
  padding-top: 100px;
}

.subhead {
  margin: 2% auto;
  width: 70%;
  margin-top: 30%;
  padding-bottom: 20%;
  text-align: center;
}


.main {
  text-align: center;
  padding-top: 50px;
}

.song {
  width: 1000px;
  max-width: 100%;
  margin: 10px auto;
}

.album {
  float: left;
  width: 50%;
  text-align: center;
  color: #ad669d;
  padding: 2%;
  margin: 2% 0;
  background-color: #280c23;
  border: 2px solid #444;
}

.songlinks {
  font-size: 24px;
  float: right;
  padding-top: 5%;
  padding-right: 3%;
  max-width: 40%;
  width: 400px;
  text-align: center;
  margin: 0 auto;
}

.songbutton {
  margin: 2% auto;
  width: 80%;
}

.logolinkbox {
  width: 100%;
  margin: 3% auto;
}

.logolink {
  width: 15%;
  max-width: 100px;
  margin: 0 auto;
  padding: 0 2%;
}





/* Container styles */
.scrolling-text-container {
    background-color: #C00;
    overflow: hidden;
    width: 85%;
    margin: 0 auto;
}

/* Inner container styles */
.scrolling-text-inner {
    display: flex;
    white-space: nowrap;
    font-size: 24px;
    font-weight: 600;
    padding: 8px 0;
}

/* Text styles */
.scrolling-text {
    text-align: center;
    display: flex;
}

.scrolling-text-item {
    padding: 0 30px;
}

/* Apply the animation to the text items */
.scrolling-text-inner>div {
    animation: var(--direction) var(--marquee-speed) linear infinite;
}

/* Setting the Animation using Keyframes */
@keyframes scroll-left {
    0% {
        transform: translateX(50%);
    }

    50% {
        transform: translateX(-100%);
    }
    
    100% {
        transform: translateX(50%);
    }
}

@keyframes scroll-right {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(100%);
    }
}