#lastfm-widget {
  color: white;
  width: 100%;
}

#lastfm-widget h2 {
  text-align: center;
  margin-bottom: 2px;
}

#lastfm-widget h5 {
  text-align: center;
  margin-top: 2px;
}

#lastfm-widget a {
  color: white;
}

.lastfm-status {
  text-align: center;
}
.lastfm-tracklist {
  display: grid;
  gap: 1rem;
}

.lastfm-track {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  grid-template-areas: "image info timestamp";
  align-items: center;
}

.lastfm-image {
  grid-area: image;
  max-width: 100%;
  margin-right: 0.75rem;
}

.lastfm-info {
  display: grid;
  grid-area: info;
  grid-template-areas:
    "title"
    "artist";
}

.lastfm-title {
  grid-area: title;
}

.lastfm-artist {
  grid-area: artist;
}

.lastfm-timestamp {
  grid-area: timestamp;
  align-self: flex-start;
  margin: 0.5rem 0.5rem;
  color: dimgray;
  text-decoration: underline;
  font-size: medium;
}

@media (max-width: 700px) {
  .lastfm-track {
    display: grid;
    grid-template-columns: 4.25rem minmax(0, 1fr) 5rem;
    grid-template-rows: auto;
    grid-template-areas: "image info timestamp";
    align-items: center;
    width: 100%;
    max-width: 28rem;
    justify-self: center;
  }

  .lastfm-image {
    width: 3.5rem;
    margin-right: 0.75rem;
  }

  .lastfm-info {
    min-width: 0;
    text-align: center;
  }

  .lastfm-title,
  .lastfm-artist {
    overflow-wrap: anywhere;
  }

  .lastfm-timestamp {
    align-self: center;
    margin: 0;
    font-size: 0.8rem;
    text-align: center;
  }
}