:root {
  --button-font: calc(1.5vw + 1.5vh) "Jersey 25", sans-serif;
  --button-text-color: rgb(196, 230, 250);
  --background-color: linear-gradient(to bottom, #4b0000 0%, #210000 100%);
  --banner-color: rgb(13, 119, 161, 0.7);
  --banner-font: 'Rockwell', 'Courier New';
  --main-outline: 6px solid #b89a6a;;
  --grid-outline: solid rgb(196, 230, 250) 2px;
  --button-box-shadow: 0 0 50px #ff006a inset, 0 0 80px #ff0044;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  height: auto;
  overflow-x: hidden;
  flex-shrink: 1;
}

h1{
  font-family: Georgia, serif;
  font-size: calc(1.5vw + 1.5vh);
  overflow-wrap: break-word;
}

h2{
  font-family: Georgia, serif;
  font-size: calc(0.9vw + 0.9vh);
  overflow-wrap: break-word;
}

h3{
  font-family: Georgia, serif;
  font-size: calc(0.8vw + 0.8vh);
  overflow-wrap: break-word;
}

p{
  font-family: Georgia, serif;
  font-size: calc(0.7vw + 0.7vh);
  overflow-wrap: break-word;
}

a {
  text-decoration: none;
  color:rgb(196, 230, 250);
  font-size: calc(1.5vw + 1.5vh);
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~Jukebox Page~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.mainbody {
  background-image: url("images/musicnotesbg.jpg");
  background-repeat: repeat;
  background-size: 3% auto;
  width: 100%;
  max-width: 100%;
  min-height: auto;
}

.jukeboxsprite{
  max-width: 5%;
  height: auto;
}

.mainpagecontent {
  background: radial-gradient(circle at center, #111 0%, #000 80%);    
  font-family: 'Rockwell', 'Courier New', monospace;
  color: #fff6cc;
  outline: var(--main-outline);
  box-shadow: var(--button-box-shadow);
}

.musicarticleflexbox{
  display: inline-flex;
  box-sizing: border-box;
  max-width: 100%;
  width: 100%;
  justify-content: center;
}

.jukebox {
  width: 60%;
  height: 1000px;
  background: linear-gradient(to bottom, #4b0000 0%, #210000 100%);
  border-radius: 300px 300px 40px 40px;
  outline: var(--main-outline);
  box-shadow: 0 0 50px #ff006a inset, 0 0 80px #ff0044;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5%;
  overflow: hidden;
    }

    /* glowing side lights */
.sidelight {
  width: 8%;
  height: 100vh;
  margin: 5%;
  border-radius: 20px;
  background: linear-gradient(to bottom, #ff00a8, #ff9900, #00ffff);
  box-shadow: 0 0 40px 10px rgba(255, 100, 255, 0.7);
  animation: pulse 4s infinite alternate;
}

@keyframes pulse {
  from { filter: brightness(0.8); }
  to { filter: brightness(1.4); }
}

    .jukebox h1 {
      font-size: 2.2rem;
      text-align: center;
      margin-top: 20px;
      color: #ffe4a3;
      text-shadow: 0 0 10px #ff9900, 0 0 20px #ff3300;
    }

    .record-area {
      margin-top: 30px;
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background: radial-gradient(circle at center, #222 0%, #000 80%);
      position: relative;
      box-shadow: 0 0 20px #ffcc00 inset, 0 0 20px #ff8800;
      animation: spin 8s linear infinite;
    }

    .record-center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: radial-gradient(circle, #ff3300 0%, #660000 100%);
      border: 2px solid #ffcc66;
      box-shadow: 0 0 10px #ff6600;
    }

    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    .tracklist {
      margin-top: 60px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 25px;
    }

    .selector-row {
      display: flex;
      justify-content: center;
      gap: 30px;
    }

    .track-btn.round {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, #fff 0%, #d6d6d6 40%, #999 70%, #555 100%);
      border: 3px solid #ccc;
      box-shadow:
        inset 0 0 8px #fff,
        0 2px 3px rgba(0,0,0,0.3),
        0 4px 15px rgba(255,255,255,0.3);
      position: relative;
      transition: all 0.2s ease;
    }

    .track-btn.round:hover {
      transform: translateY(-2px);
      box-shadow:
        inset 0 0 10px #fff,
        0 3px 5px rgba(0,0,0,0.3),
        0 0 15px rgba(255,220,120,0.9);
      background: radial-gradient(circle at 30% 30%, #fff 0%, #eee 30%, #ccc 70%, #999 100%);
    }

    .track-btn.round:active {
      transform: translateY(2px);
      box-shadow:
        inset 0 0 5px #888,
        0 1px 3px rgba(0,0,0,0.4);
    }

    .label {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 1.2rem;
      font-weight: bold;
      color: #fff6cc;
      text-shadow:
        0 0 5px #ffd95a,
        0 0 10px #ffc400,
        0 0 20px #ff7b00;
      pointer-events: none;
    }

    .jukebox-footer {
      margin-top: 50px;
      font-size: 1rem;
      color: #ffccaa;
      text-shadow: 0 0 8px #ff8800;
    }