body{
  background-color: black;
}

.card-container{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  padding: 1rem;
  min-height: 100vh;
  flex: 1;
}

.skatingStats {
    margin-top:20px;
    margin-left:10px;
    margin-right:10px;
    background-color:lightpink;
    display: grid;
    grid-template-rows: "a";
    text-align: center;
    padding: 20px;
    transition: transform 0.3s ease;
}

.card {
    display: inline-block;
    text-align: center;
    padding: 20px;
    transition: transform 0.3s ease;
}

/* Card hover lift effect */
.card:hover {
    transform: translateY(-5px);
}

/* Circle animation */
.link-circle {
    fill: transparent;
    stroke-width: 4;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: center;
}

.card:hover .link-circle {
    stroke: #ffeb3b;
    stroke-width: 6;
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px rgb(181, 139, 243));
}

/* Text animation */
.mt-text {
    font-family: sans-serif;
    font-size: 12px;
    fill: #fffdfd; /* Change to white (#fff) if your background is dark */
    transition: fill 0.3s ease;
}

.card:hover .mt-text {
    fill: #ffeb3b;
}

.mt-text{
  font-family: sans-serif;
  font-size: 16px;
  font-weight: bold;
  fill: #323437;
  transition: fill 0.3s ease;
}

a:hover .mt-text
{
  fill: #ffffff;
}

.footer{
  background-color: #333;
  color: white;
  text-align: center;
  padding: 20px;
  display: flex;
  gap: 20px;
  justify-content: center;
}

.footer a:not(:last-child)::after{
  content: "|";
  margin-left: 15px;
  color: #888;
}

a{
  color:white;
}

.music-container {
  display: grid;
  grid-template-columns: 1fr; 
  grid-auto-rows: minmax(80px, auto);
  gap: 1.5rem; /* gap between the music cards*/
  padding: 1rem;
  min-height: 100vh;
  flex: 1;
  background-color: black;
}

.music-card {
  background: #411980;
  border-radius: 2px;
  padding: 1.5rem;
  display: flex;
  justify-content:space-around;
  align-items: center;
  max-height: 20vh;
}

.music-title {
  background: yellow;
  border-radius: 4px;
  padding: 1rem;
  display: flex;
  justify-content:space-around;
  align-items: center;
  max-height: 20vh;
}