body {
  background: repeating-linear-gradient(-3deg,var(--colMain) 0em , rgba(0, 0, 0, 0.0) 7em, var(--colMain) 18em, var(--colMain) 22em, rgba(0, 0, 0, 0.0) 33em,  rgba(0, 0, 0, 0.0) 35em, var(--colMain) 42em, var(--colMain) 50em);
  height:100vh;
  background-attachment: fixed;
  background-size: 200% 50em;
  animation: bkgscroll 30s linear infinite;
}

.columns {
  grid-template-columns: 25% 65% 10%;
  margin: 0 8%;
  margin-bottom: 2em;
}

.playlist {
  overflow-y: scroll;
  overflow-x: hidden;
}

.track {
  color: var(--colLink);
  padding:0.25em;
  margin:0.25em;
  font-family: 'Courier New', Courier, monospace;
  border-top: 2px solid var(--colAcc);
  cursor: pointer;
}

canvas {
  border-radius: 1.5em; 
}

@media screen and (max-width: 1100px) {
  .columns {
    display: grid;
    grid-template-areas:
    "top"
    "mid"
    "bot";
    grid-template-columns: auto;
    padding: 10px;
    margin: 0;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 2em;
    margin-bottom: 1em;
  }
}