@font-face {
    font-family: 'Quicksand'; /*a name to be used later*/
    src: url('/Quicksand.ttf'); /*URL to font*/
}

body {
  font-family: "Quicksand", sans-serif;
  font-weight: 400;
  font-style: normal;
  background-color: #EEEDEB;
  color: #2F3645;
  width: 50%;
  margin: 0 auto;
}

a {
  color: #E6B9A6;
  text-decoration: underline;
}
/* https://colorhunt.co/palette/eeedebe6b9a69391852f3645 */

/* .music {
  padding: 1em;
  border: 2px solid #2F3645;
  display: inline-block;
  border-radius: 0.5em;
}

.album-art-container {
  float: left;
}

.music-info-container {
  float: right;
} */

.music {
  /* Make this the flex container */
  display: flex;
  /* (Optional) Add a gap between the art and info */
  gap: 1em;
  /* (Optional) Vertically center the content if you don't want it to stretch */
  /* align-items: center; */

  /* Your original styles */
  padding: 1em;
  border: 2px solid #2F3645;
  display: inline-flex; /* Use inline-flex to keep the block-like but inline behavior */
  border-radius: 0.5em;
}

.album-art-container img {
  height: 8em;
  width: auto;
}

.text-bubble-container {
  display: flex;
}

.text-bubble {
  background-color: #939185;
  float: right;
  border-radius: 15em;
  padding: 1em;
}