/* ======================= INTRO ====================== */
.intro>* {
  margin: 1rem 20vw 5rem 10vw;
}

.intro {
  position: relative;
  width: 100%;
}

.pageTitle {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 6rem;
}

.pageTitle h3 {
  color: #989898;
}

.pageTitle p {
  text-align: right;
  font-style: italic;
}

.showList {
  display: flex;
  gap: 13vw;
}

.num {
  padding-bottom: .5rem;
  border-bottom: #d8aa50 1px solid;
}

.artDirectorMessage {
  display: flex;
  gap: 5vw;
}

.artDirectorMessage .message h3 {
  margin-bottom: 1.5rem;
}

.artDirectorMessage .message p {
  margin-bottom: 1rem;
}

.avatar {
  display: block;
  width: 25vw;
  margin-bottom: 1rem;
}

@media only screen and (max-width: 1300px) {
  .intro>* {
    margin: 1rem 10vw 3rem 10vw;
  }
}

@media only screen and (max-width: 900px) {
  .intro>* {
    margin: 1rem 10vw 3rem 10vw;
  }

  .pageTitle {
    width: fit-content;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .pageTitle p {
    text-align: left;
  }

  .showList {
    display: flex;
    justify-content: flex-start;
    gap: 10vw;
  }

  main .intro .artDirectorMessage {
    width: fit-content;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 0.15fr;
    justify-content: space-between;
    grid-gap: 1rem;
  }

  main .intro .artDirectorMessage .message {
    grid-row: 1;
  }

  main .intro .avatar {
    grid-row: 2;
    width: 100%;
  }

  main .intro .avatar img {
    display: none;
  }
}

@media only screen and (max-width: 450px) {
  .intro>* {
    margin: 1rem 1.25rem 3rem 1.25rem;
  }
}

/* ======================= PERFORMANCE INFO ====================== */


.post {
  color: #989898;
}

.aboutRight {
  width: 47.5rem;
}

.aboutRight p {
  margin-bottom: 2.375rem;
  color: #f5f5f5;
}

.aboutRight .aboutRightTitle {
  color: #f5f5f5;
  margin-bottom: 3.875rem;
}

.aboutRight .aboutRightName {
  color: #f5f5f5;
  font-weight: bold;
  margin-bottom: .375rem;
}

.info02 {
  max-width: 80%;
  height: auto;
}

@media only screen and (max-width: 800px) {
  .info02 {
    max-width: 100%;
    height: auto;
  }
}

/* .participateInfo {
  display: flex;
  width: 65%;
  margin: 4.6875em auto 4.6875em 15%;
  position: relative;
} */

.participateInfo {
  display: grid;
  width: 65%;
  grid-template-columns: auto auto;
  position: relative;
  margin: 4.6875rem auto 4.6875rem 10%;
}

.participateInfo .dancers {
  padding-right: 5%;
  color: #f5f5f5;
}

.dancersTitle {
  font-weight: bold;
  margin-bottom: 2.1875rem;
  color: #f5f5f5;
}

.participateInfo .dancers .dancersList {
  display: flex;
  justify-content: flex-start;
  /* width: 22.8125rem; */
  /* gap: 4rem; */
}

.dancersListLeft {
  margin-right: 1rem;
}

.participateInfo .dancers .dancersList p {
  margin-bottom: .625rem;
  width: 200px;
}

.productionTitle {
  font-weight: bold;
  color: #f5f5f5;
  margin-bottom: 2.1875rem;

}

.productionList {
  display: flex;
  /* justify-content: space-between; */
}

.productionListLeft {
  margin-right: 0.8rem;
}

.productionListRight {
  margin-right: 1rem;
}

.productionListItem {
  margin-bottom: 2.5rem;
  color: #f5f5f5;
}

.productionListItem p:nth-of-type(1) {
  margin-bottom: .625rem;
  font-weight: bold;
  color: #f5f5f5;
}

@media only screen and (max-width: 800px) {
  .participateInfo {
    gap: 2rem;
  }

  .participateInfo .dancers {
    grid-row: 1;
  }

  .participateInfo .dancersListLeft {
    margin-right: -2rem;
  }

  .participateInfo .production {
    grid-row: 2;
  }
}

.music {
  /* width: 81.25rem; */
  width: 70%;
  margin: 4.6875rem auto 4.6875rem 10%;
  position: relative;
}

.musicInfo {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2.625rem;
}

.musicInfo .musicRight {
  width: 50%;
  height: auto;
  max-height: 500px;
  object-fit: contain;
}

.musicInfo .musicLeft {
  margin-right: 2rem;
}

.musicInfo .musicLeft p {
  color: #f5f5f5;
  margin-bottom: .625rem;
}

.musicInfo .musicLeft .musicTitle {
  margin-bottom: 3.3125rem;
  color: #f5f5f5;
  font-weight: bold;
}

.musicInfo .musicLeft .musicMusicians {
  margin-bottom: 3.3125rem;
  color: #f5f5f5;
  font-weight: bold;
  margin-top: 3.125rem;
}

.musicInfo .musicLeft .musicTitle:nth-of-type(2) {
  margin-top: 3.625rem;
}

@media only screen and (max-width: 780px) {
  .musicRight {
    display: none;
  }
}

.choreoInfo {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2.625rem;
}

.choreoInfoLeft {
  width: 23.9375rem;
  margin-right: 3.4375rem;
  margin-bottom: 2rem;
}

.choreoInfoLeft img {
  display: block;
  width: 23.9375rem;
  height: auto;
}

.choreoInfoRight {
  color: #f5f5f5;
  line-height: 1.875rem;
}

.choreoInfoRight p {
  margin-bottom: 2.625rem;
}

@media only screen and (max-width: 1000px) {
  .choreoInfo {
    width: 100%;
    flex-wrap: wrap;
  }

  .choreoInfoLeft {
    flex: 100%;
  }

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

  .choreoInfoRight {
    flex: 100%;
  }
}

a {
  font-family: 'Source Sans 3', sans-serif;
}


.jump {
  color: #f5f5f5;
  font-weight: bold;
  margin-top: 5.625rem;
  text-decoration: underline;
}

/* .info05 {
  width: 87.5rem;
  height: 33.0625rem;
  margin-top: 12.5rem;
} */

.info05 {
  max-width: 80%;
  height: auto;
}

@media only screen and (max-width: 800px) {
  .info05 {
    max-width: 100%;
    height: auto;
  }
}

.group {
  color: #f5f5f5;
  font-weight: bold;
}

.meet {
  display: flex;
  /* justify-content: space-between; */
  width: 90%;
  position: relative;
  margin-top: 13rem;
}

.meetLeft {
  width: 60%;
  height: auto;
}

.meetRight {
  margin-left: 3rem;
  margin-top: 2rem;
}

.meetRightJump {
  color: #f5f5f5;
  font-weight: bold;
  margin-top: 5px;
  text-decoration: underline;
}

@media only screen and (max-width: 800px) {
  .meet {
    width: 100%;
    flex-wrap: wrap;
  }

  .meetLeft {
    flex: 100%;
    height: auto;
  }

  .meetRight {
    flex: 100%;
  }
}

/* ======================= BACKGROUND ====================== */

.astigmatism1 {
  position: absolute;
  width: 1200px;
  height: 1200px;
  background-image: radial-gradient(#D7A74A, transparent 60%);
  opacity: 0.3;
  z-index: -1;
  right: -600px;
}

.astigmatism2 {
  position: absolute;
  width: 1600px;
  height: 1600px;
  background-image: radial-gradient(#6F298F, transparent 60%);
  opacity: 0.3;
  left: -600px;
  top: -500px;
  z-index: -1;
}

.astigmatism3 {
  position: absolute;
  width: 1000px;
  height: 1000px;
  background-image: radial-gradient(#6F298F, transparent 60%);
  opacity: 0.3;
  z-index: -1;
  right: -500px;
  top: -400px;
}

.astigmatism4 {
  position: absolute;
  width: 1200px;
  height: 1200px;
  background-image: radial-gradient(#D7A74A, transparent 60%);
  opacity: 0.3;
  z-index: -1;
  left: -300px;
  top: -1200px;
}