/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
HTML content. To learn how to do something, just try searching Google for questions like
"how to change link color." */

.musicbox {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  background: linear-gradient(#bdc9db, #8f9cb0);
  padding-top: 10px;
  padding-right: 10px;
  padding-left: 10px;
  border-radius: 10px;
}


.cd-wrapper {
  position: relative;
  display: inline-block;
  width: 80px;
  padding-bottom: 5px; /* makes room for the label below the shadow */
}

.cd-wrapper::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 60%;
  height: 10px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  transform: translateX(-50%);
  filter: blur(3px);
  animation: shadow-pulse 4s ease-in-out infinite;
}


.cd-label {
  position: absolute;
  bottom: -18px; /* pushes it below the shadow, which sits at bottom: 0 */
  left: 0;
  right: 0;
  text-align: center;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: Georgia, serif;
  font-size: 14px;
  letter-spacing: 2px;
  word-spacing: 2px;
  color: #000000;
  font-weight: normal;
  text-decoration: none;
  font-style: normal;
  font-variant: normal;
  text-transform: none;
}

.cd {
  display: block;
  width: 100%;
  cursor: pointer;
  animation: float 4s ease-in-out infinite;
}

.cd.playing {
  animation: rotating 2s linear infinite;
}

@keyframes float {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(-8px); }
  60%  { transform: translateY(-8px); } /* holds the same position */
  100% { transform: translateY(0); }
}

@keyframes shadow-pulse {
  0%, 100% { transform: translateX(-50%) scale(0.8);   opacity: 0.25; }
  50%      { transform: translateX(-50%) scale(0.7); opacity: 0.2; }
}


@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

body {
  /*background: linear-gradient(darkslateblue, aqua);*/
  background: beige;
  color: black;
  font-family: Arial, Helvetica, sans-serif;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
  /*border: 69px ridge rgba(164, 68, 72, 0.57);*/
  min-height: 100vh
}

.container {
  display: flex;
  justify-content: center;
  /* horizontal centering */
  align-items: center;
  /* vertical centering */
}

a {
  color: aqua;
}

.faic {
  width: 20px;
}

.listy {
  background-color: skyblue;
  color: black;
  border: 3px solid black;
  padding: 10px;
  border-radius: 20px;
  /*right down blur spread opacity*/
  box-shadow: 5px 5px 20px 5px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  padding: 10px;
  font-family: Papyrus, fantasy;
  color: rgb(0, 1, 1);
  text-shadow: rgb(0, 230, 230) -5px 5px 0px, rgb(1, 204, 204) -10px 10px 0px, rgb(0, 189, 189) -15px 15px 0px;
}

h1:hover {
  color: transparent;
  text-shadow: rgba(179, 179, 179, 0.4) -4px 4px, rgba(153, 153, 153, 0.2) -3px 3px, rgba(179, 179, 179, 0.2) -2px 2px, rgba(179, 179, 179, 0.2) -1px 1px, rgba(128, 128, 128, 0.5) 0px 0px, rgba(77, 77, 77, 0.6) 1px -1px, rgba(77, 77, 77, 0.7) 2px -2px, rgba(82, 82, 82, 0.8) 3px -3px, rgba(77, 77, 77, 0.9) 4px -4px, rgb(77, 77, 77) 5px -5px;
  --darkreader-inline-color: transparent;
  --darkreader-inline-bgcolor: var(--darkreader-background-ffffff, #1e1f1f);
  --darkreader-inline-bgimage: none;
}

h2 {
  text-shadow: 0px 0px 0 #899CD5, 1px 1px 0 #8194CD, 2px 2px 0 #788BC4, 3px 3px 0 #6F82BB, 4px 4px 0 #677AB3, 5px 5px 0 #5E71AA, 6px 6px 0 #5568A1, 7px 7px 0 #4C5F98, 8px 8px 0 #445790, 9px 9px 0 #3B4E87, 10px 10px 0 #32457E, 11px 11px 0 #2A3D76, 12px 12px 0 #21346D, 13px 13px 0 #182B64, 14px 14px 0 #0F225B, 15px 15px 0 #071A53, 16px 16px 0 #02114A, 17px 17px 0 #0B0841, 18px 18px 0 #130039, 19px 19px 0 #1C0930, 20px 20px 0 #251227, 21px 21px 20px rgba(0,0,0,1), 21px 21px 1px rgba(0,0,0,0.5), 0px 0px 20px rgba(0,0,0,.2), 2px 2px 2px rgba(206,89,55,0); 
  padding-bottom: 20px;
}

.spinner {
  display: inline-block;
}

.spinner.spinning {
  animation-name: spin;
  animation-timing-function: ease-in-out;
  /* was linear */
  animation-iteration-count: infinite;
}

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

  to {
    transform: rotate(3deg);
  }
}