body {
  text-align: center;
  background: radial-gradient(circle at left center, rgba(127, 255, 212, 0.15), transparent 70%),
    radial-gradient(circle at right center, rgba(127, 255, 212, 0.15), transparent 70%),
    linear-gradient(180deg, #718a9a 0%, #5d7482 100%);
  font-size: 20px;
  font-family: "DM Mono", monospace;
  font-weight: 400;
  font-style: normal;
}


.record-1 {
  z-index: 3;
  margin-left: auto;
  margin-right: auto;
  width: 20%;
  height: auto;
  position: relative;
  top: -280px;
  left: -50px;

}

.record-2 {
  z-index: 3;
  margin-left: auto;
  margin-right: auto;
  width: 20%;
  height: auto;
  position: relative;
  top: -280px;
  left: 50px;

}



img {
  width: 500px;
  height: 500px;
}

.stage {
  position: relative;
}


.poster {
  position: relative;
  z-index: 2;
  width: 40%;
  height: auto;

}

img.poster {
  box-shadow: 0 0 25px #7FFFD4;
  border-radius: 10px;
}


.amp {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 75px);
  z-index: 1;
  width: 80%;
  height: 700px;

  width: 100%;

}

#playBtn {

  background-color: #bebfc2;
  border-color: #758794 color, #19191a;
  font-family: "Didact Gothic", sans-serif;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 20px;
  cursor: pointer;
  width: 500px;
  transition: 0.3s;
  content: "#9654";
}

/* Hover effect */
#playBtn:hover {
  background-color: #545b64;
  transform: scale(1.05);
}

#playBtn:active {
  background-color: azure;
  transform: scale(1.05);
}

.classic {
  text-align: center;
  padding-top: -10spx;
  padding-right: 15px;
  padding-bottom: 15px;
  padding-left: 15px;
  font-family: "Didact Gothic", sans-serif;
  color: #242121;
  font-weight: 400;
  font-style: normal;
  font-size: 60px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  line-height: 10px;

}

h1.classic {
  text-align: center;
  padding-top: 15px;
  padding-right: 15px;
  padding-bottom: 15px;
  padding-left: 50px;
  font-family: "Didact Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 70px;




}

hr {
  color: #d9d3d2;
  background-color: #d9d3d2;
  border-radius: 15px;
  height: 5px;
  margin-top: 15px;
  margin-bottom: 15px;


}

.credits {
  text-align: left;
  padding-top: 15px;
  padding-right: 50px;
  padding-bottom: 15px;
  padding-left: 50px;
  font-family: "Herr Von Muellerhoff", cursive;
  font-weight: 600;
  font-style: normal;
  font-size: 55px;
  color: #2e2a2a;
}

.bar {
  font-family: "DM Mono", monospace;
  font-weight: 500;
  font-style: normal;
  font-display: block;
  font-weight: bold;


}

.lyrics {
  margin-top: auto;
  margin-bottom: auto;
  margin-left: auto;
  margin-right: auto;
  line-height: 18px;
  font-size: 25px;
  font-family: "Didact Gothic", sans-serif;
  color: #242121;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
  width: 80%;
}

.lyrics {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease-out;
}

.lyrics.visible {
  opacity: 1;
  transform: translateY(0);
}