body {
        background-image:
         url('img/bg/worn-dots.png');
         background-color: rgb(222, 231, 231);

    }

    #albumscontainercontainer {
      background-color: rgb(255, 225, 57);
      border: 3px outset rgb(255, 228, 75);
      border-radius: 20px;
      padding-block: 12px;
    }
    .concerts {
      width:33rem;
      display: inline-block;
      top: -2rem;
      position: relative;
    
    }

    .concerts .list {
      background-image:
      url("img/bg/dark-mosaic.png"),
       linear-gradient(0deg, #704090 0%, #49168b 100%); 
      scrollbar-width: thin;
      border: 5px ridge rgb(85, 85, 85);
      width: 80%;
      height: 25rem;
      margin: -20px auto;
      font-family: Comic Sans MS, ChalkboardSE;
      position: relative;
      top:-15px;
      border-radius: 10px;
      overflow-y: scroll;
    }

    .concerts h3 {
      text-align: center;
      color:white;
      text-shadow: 1px 2px black;;
    }

    .lyricbot {
      width: 40rem;
        padding-inline:10px;
        background-color: #59759b;
        background-image: url("img/bg/ps-neutral.png");
        display: inline-block;
        text-align: center;
    }
    .lyricbot h1 {
      font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
            text-shadow: 2px 2px 0px black;
      color:white;
      top: -15px;
  
    }
    #author {
      text-align: right;
      color:white;
      text-shadow: 1px 1px 0px black;
    }

    .concerts .list li {
      list-style-type: none;
          width: 100%;
      background-color: #9080f7;
      padding:3px;
      box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    }
    .concerts .list li h3 {
      display: inline;

    }
    .concerts .list li .rating {
      color: gold;
      float: right;
      margin-right: 4px;
    }
    .concerts .list li p {
      clear: both;
      font-size: 0.9rem;
      background-color: white;
      padding: 2%;
    }

    .concerts h1 {
      background-image: url('img/music/concert.png');
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      font-family: adlib;
      text-align: center;
      position: relative;
      display: block;
      z-index: 1;
      margin: 0;
      min-height: 150px;
    }
    .concerts h1 span {
      position: relative;
      text-shadow: 2px 3px rgb(0, 0, 0);
      color: white;
      top: 30px;
    }


      /* HTML: <div class="tooltip">This is a Tooltip with a solid coloration and without border radius </div> */
      .tooltip2 {
        color: #fff;
        font-size: 18px;
        max-width: 28ch;
        position: relative;
        display: inline-block;
        text-align: center;
        height: 10rem;
      }
      .tooltip2 {
        /* triangle dimension */
        --b: 1em; /* base */
        --h: 1em; /* height */

        --p: 50%; /* triangle position (0%:top 100%:bottom) */
        
        padding: 1em;
        clip-path: polygon(0 100%,100% 100%,100% 0,0 0,
          0 max(0%  ,var(--p) - var(--b)/2),
          calc(-1*var(--h)) var(--p),
          0 min(100%,var(--p) + var(--b)/2));
        border-image: fill 0//var(--h)
          conic-gradient(green 0 0); /* the color */
      }
    

    .shelf {
      background-image: url("img/bg/ps-neutral.png");
      background-color: #666682;
      box-shadow: inset 0px 3px 5px black;
      width: 35rem;
      float: right;
      border: 15px #7a7a9c ridge;
      margin-right: 2rem;
    }
    .shelf img {

        image-rendering: pixelated;
    }

    .shelf img:hover {
      scale: 2;
      z-index: 100000;
      position: relative;
    }

    .shelf h2 {
      margin: 0;
    }
    .shelf h2 img:hover {
      scale: 1;
    }

    
@keyframes scroll-r2l {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }}
.scroll-r2l { animation: scroll-r2l 20s linear infinite; }

@keyframes scroll-l2r {
  from { transform: translateX(0); }
  to { transform: translateX(100%); } }
.scroll-l2r { animation: scroll-l2r 30s linear infinite; }



/* 'Display: Flex' is extremely important to use here so all the items inside the marquee line up correctly, and the duplicated container lines up properly with the original */
.marquee {
  overflow: hidden;
  display: flex;
  width: 92%;
  margin: 0;
  flex-wrap: nowrap;
  position: relative;
  left:90px;
  box-sizing: unset;
  border: 5px inset gold;
}

.marquee-items {
  display: flex;
  flex-shrink: 0;
  height: 100%;
  min-width: 100%;
  position: relative;
}

/* Changes to this class will only affect the children
of the marquee-items, and not all of their descendants.
Make changes here if you want spaces in-between the
marquee items or other effects and styles!*/
.marquee-items > * {
  margin: 0;
    border-left: 1px solid black;
  height: 100px; }

.paused { -webkit-animation-play-state: paused; -moz-animation-play-state:paused; -o-animation-play-state:paused; animation-play-state: paused; }

/* HTML: <div class="tooltip">This is a Speech Bubble with a solid coloration and with border radius </div> */
.lyricbubble {
  color: #000000;
  font-family: Good Ol DOS;
  font-size: 18px;
  text-align: center;
  min-height: 8rem;
}
.lyricbubble {
  /* triangle dimension */
  --b: 2em; /* base */
  --h: 1em; /* height */

  --p: 50%; /* triangle position (0%:left 100%:right) */
  --r: 1em; /* the radius */
  --c: #e8ffa7;

  padding: 1em;
  clip-path: polygon(0 100%,0 0,100% 0,100% 100%,
    min(100%,var(--p) + var(--b)/4) 100%,
    var(--p) calc(100% + var(--h)),
    max(0%  ,var(--p) - var(--b)/4) 100%);
  background: var(--c);
  border-image: conic-gradient(var(--c) 0 0) fill 0/
    var(--r) calc(100% - var(--p) - var(--b)/2) 0 calc(var(--p) - var(--b)/2)/
    0 0 var(--h) 0;
}

.tooltip3 {
    position: relative;
    display: inline-block; }
        .tooltip3 .tooltiptext3 {
            visibility: hidden;
            width: 200px;
            background-color: white;
            color: black;
            text-align: center;
            padding: 5px 0;
            position: absolute;
            z-index: 1;
            bottom: 150%;
            left: 0%;
            margin-left: -60px;
              box-shadow: rgb(0, 0, 0) 3px 0px 0px, rgb(0, 0, 0) 2.834871px 0.981584px 0px, rgb(0, 0, 0) 2.357662px 1.855109px 0px, rgb(0, 0, 0) 1.620907px 2.524413px 0px, rgb(0, 0, 0) 0.705713px 2.915814px 0px, rgb(0, 0, 0) -0.287171px 2.986224px 0px, rgb(0, 0, 0) -1.248441px 2.727892px 0px, rgb(0, 0, 0) -2.072274px 2.169258px 0px, rgb(0, 0, 0) -2.66798px 1.371818px 0px, rgb(0, 0, 0) -2.969977px 0.42336px 0px, rgb(0, 0, 0) -2.945022px -0.571704px 0px, rgb(0, 0, 0) -2.59586px -1.503831px 0px, rgb(0, 0, 0) -1.960931px -2.270407px 0px, rgb(0, 0, 0) -1.11013px -2.787044px 0px, rgb(0, 0, 0) -0.137119px -2.996865px 0px, rgb(0, 0, 0) 0.850987px -2.876773px 0px, rgb(0, 0, 0) 1.74541px -2.439988px 0px, rgb(0, 0, 0) 2.447689px -1.734595px 0px, rgb(0, 0, 0) 2.880511px -0.838247px 0px }
          .tooltip3:hover .tooltiptext3 { visibility: visible; }