body {
  background-color: plum;
  color: purple;
  font-family: Verdana;
}

ul {
  list-style-type: none;
  padding-left: 1em;
}

ul:not(#timeline):not(.no-bull) li::before {
  content: "\2665"; /* Red Heart Suit (♥) */
  color: mediumvioletred; /* Pink color not working*/
  padding-right: 1em;
}

.month > h4 {
  display: inline;
}

.bg1 {
  background-image: url('purp027.jpg');
}

.fixed-bg {
  background-attachment: fixed;
}

main, .margin1 {
  max-width: 100rem;
}

table:has(.merch-tit) {
  width: 100%;
  table-layout: fixed;
}

tr:has(.merch-tit) {
  height: 20rem;
}

.merch-tit {
  width: 2em;
}

.merch-tit h3 {
  margin-left: 0.5em;
}

.merch-desc {
  width: 12rem;
}

.merch-pix {
  min-width: 20em;
}

/* bounds for dvd logo, consider making class */
body > div:first-child { 
  position: relative;
  margin: 0;
  padding: 0;
  /*overflow: hidden;
  height: 100vh;
  width: 100vw;*/
}

.center, header, footer {
  text-align: center;
}

td {
  text-align: left;
}

.center > table, 
.center > div,
.center > main,
.center > section,
#bios table,
header img{
  margin: 0px auto;
}

#bios {
  margin: auto;
}

.vertext-bt {
  writing-mode: sideways-lr;
  /*text-orientation: mixed; (default)*/
}

.vertext-tb {
  writing-mode: vertical-lr;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  width: 100%;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}  

#past-shows table {
  height: 720px;
  background-color: thistle;
  width: 100%;
  border-style: ridge;
  border-width: 5px;
  border-color: gold;
}

/*#timeline, .no-bull {
  list-style-type: none;
}*/

/*#past-shows table td:first-child {*/
/*  min-width: 30%;*/
/*}*/

#past-shows table td:nth-child(2) {
  min-width: 300px;
  max-width: 60%;
}

header img {
  max-width: 100%;
  height: auto;
}

footer {
  padding-bottom: 7rem;
}

.shrink {
  max-width: 100%;
  height: auto;
}

.scroll-y {
  height: 100%;
  overflow-y: auto;
  /*overflow-x: hidden;*/
}

.scroll-x {
  overflow-x: auto;
  white-space: nowrap;
  overflow-y: hidden;
}

#miniplayer {
  z-index: 11;
  position: fixed; bottom: 0;
}

#miniplayer iframe {
  border: 0; 
  width: 100%; 
  height: 120px;
}

.article-container iframe {
  width: 100%;
  height: 100%;
  /*--article-size: 0.75;*/
  /*-ms-zoom: var(--article-size;*/
  /*-moz-transform: scale(var(--article-size));*/
  /*-moz-transform-origin: 0 0;*/
  /*-o-transform: scale(var(--article-size);*/
  /*-o-transform-origin: 0 0;*/
  /*-ms-transform: scale(var(--article-size);*/
  /*-ms-transform-origin: 0 0;*/
  /*-webkit-transform: scale(var(--article-size);*/
  /*-webkit-transform-origin: 0 0;*/
}

#reviews {
  height: 720px;
  overflow-x: visible;  
}

/* mainly for home page videos, music, etc. */
.media-box {
  background-size: 66%;
  gap: 20px; 
  min-width: 450px; 
  border: 3px ridge purple; 
  display: flex; 
  padding: 20px; 
  /*flex-wrap: nowrap; 
  justify-content: center; */
  align-items: center;
}

/* dvd logo bounce container*/
#dvd-container{
  /*temporary boundary fix. */
  left: -5rem;
  /*top: -5rem;*/
  pointer-events: none;
  position: fixed;
  height: calc(100% + 0rem);
  width: calc(100vw + 5rem);
  overflow:hidden;
  z-index: 10;
}

/* dvd logo image container */
.freebee {
  width: 20vw;
  min-width: 10rem;
  max-width: 20rem;
  height: auto;
  /*max-height: 20vh;*/
  position: absolute;
  user-select: none;
  will-change: transform;
}

@media only screen and (hover: none) and (pointer: coarse) {
  .freebee {
    width: 10rem;
  }
}

.freebee a {
  pointer-events: auto;
}

.freebee img {
  /*left: -10rem;*/
  /*top: 10rem;*/
  width: 100%;
  height: auto;
  display: block;
}

.x {
  -webkit-animation: x calc((100vw/100rem) * 13s) linear infinite alternate;
          animation: x calc((100vw/100rem) * 13s) linear infinite alternate;
}

.y {
  -webkit-animation: y calc((100vh/60rem) * 7s) linear infinite alternate;
          animation: y calc((100vh/60rem) * 7s) linear infinite alternate;
}

@-webkit-keyframes x {
  100% {
    transform: translateX(calc(100vw - 10rem));
  }
}
@keyframes x {
  100% {
    transform: translateX(calc(100vw - 10rem));
  }
}
@-webkit-keyframes y {
  100% {
    transform: translateY(calc(100vh - 10rem));
  }
}
@keyframes y {
  100% {
    transform: translateY(calc(100vh - 10rem));
  }
}