/* Mobile-specific styles */
/* Adjust the font size and margins for better readability on small screens */
body {
  font-size: 16px;
}

h1 {
  font-size: 28px;
}

h2 {
  font-size: 24px;
}

/* Reduce margins to save space on mobile screens */
.container {
  margin: 10px auto;
  padding: 10px;
}

/* Adjust the size of the artist image on smaller screens */
.hero img {
  max-width: 80%;
}

/* For the navigation bar, display links in a vertical list on mobile */
header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

ul {
  display: flex;
  flex-direction: column;
  align-items: center;
}

li {
  margin: 5px 0;
}

/* Make the navigation links full width on mobile */
nav {
  width: 100%;
}

/* Center align the contact information on mobile */
.contact p {
  text-align: center;
}