#main {
   display: flex;
   gap: 2rem;
   padding: 1rem;
   align-items: start;
   max-width: 80em;
   margin: auto;
}

#blog-main {
   gap: 2rem;
   padding: 5rem;
   align-items: center;
   max-width: 41em;
   margin: auto;
}

.text audio {
   display: block;
   width: 100%;
   margin: 1rem 0;
}

.text {
   flex: 1;
   font-family: sans-serif;
}

.image {
   flex: 2;
}

.image img {
   width: 100%;
   height: auto;
}


.music-profile {
   padding-bottom: 0.5em;
}

.music-profile img {
   width: 15em;
}

@media (max-width: 800px) {
   #main {
      flex-direction: column;
   }

   .music-profile img {
      width: 10em;
   }

   #blog-main {
      gap: 2rem;
      padding: 1rem;
   }

}

code {
   font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;
   font-size: 85%;
   margin: 0;
   hyphens: manual;
}

pre {
   margin: 1em 0;
   overflow: auto;
}

pre code {
   padding: 0;
   overflow: visible;
   overflow-wrap: normal;
}