/* 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." */

body {
  background-color: white;
  color: black;
  font-family: Courier;
}

/* 1. Ensure padding and borders don't add extra pixel width */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Fix the container padding on mobile */
.text-box {
  background-color: rgba(255, 255, 255, 0.75);
  padding: 20px;
  border-radius: 12px;
  max-width: 800px;
  width: 90%; /* Keeps margin spacing on tiny mobile screens */
  margin: 40px auto;
  line-height: 1;
}

/* 3. Force image scaling and override inline HTML attributes */
.text-box img {
  display: block;
  width: 100% !important;     /* Force full container width */
  max-width: 100% !important; /* Never expand wider than parent */
  height: auto !important;    /* Override fixed HTML heights */
  margin: 20px auto;
}

.bandcamp-player {
  width: 100%;
  display: flex !important;
  justify-content: center !important;
  align-items: center;
}

.bandcamp-player iframe {
  width: 500px !important;
  max-width: 100%; /* Keeps iframe from overflowing on small screens */
  height: 472px;
  border: 0;
}


.text-box h1,
.text-box h2,
.text-box p,
.text-box img,
.text-box a {
  display: block;
}

.text-box h1 {
  text-align: center;
}