body {
  background-color: #00171F;
  color: #00A8E8;
}
p {
  font-size: 30px;
}
h5 {
  font-size: 30px;
}
h2 {
  font-weight: bold;
  font-size: 35px;
}
li {
  font-size: 30px;
}
img {
  width: 400px;
  height: 600px;
}
hr {
  border: 3px dashed #003459;
}
/*styles top button menu*/
.bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  background-color: #007EA7;
}

.top {
  border: solid 3px #003459;
  border-width: thick;
  border-radius: 20px;
  padding: 10px;
  margin: 10px;
  background-color: #00A8E8;
  color: #003459;
  font-size: 30px;
  width: 14vw;
  text-align: center;
  align-content: center;
  text-decoration: none;
}

/* styles the card gallery of playbills */
.icon {
  width: 200px;
  height: 300px;
  border: 5px solid #003459;
  border-radius: 20px;
}
.card {
  border: solid 5px #003459;
  padding: 30px;
  margin: 15px;
  border-radius: 30px;
  text-align: center;
  font-size: 20px;
  align-content: flex-end;
  background-color: #007EA7;
  color: #00171F;
}

.card-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: flex-start;
}
/*styles heathers screen*/
.music {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  margin: 10px;
}
.pic {
  border: solid 5px #00A8E8;
  margin: 20px;
  border-radius: 5px;
}

.img {
  border: solid 8px #00A8E8;
  margin: 20px;
  border-radius: 10px;
  width: 1000px;
  height: auto;
  justify-content: center;
}
/* Use a media query to add a break point at 1000px: */
@media screen and (max-width:1000px) {
  .top {
    padding: 0px;
    margin: 5px;
    width: 80%;
  }
  p {
    font-size: 25px;
  }
  h2 {
    text-align: center;
  }
    /* The width is 90%, when the viewport is 1000px or smaller */
  }