body {
  font-size: large;
  background-color: #565656;
  display: flex;
  flex-direction: column;
  width: min(95%, 700pt);
  margin: auto;
  color: white;
  font:
    large "Fira Sans",
    sans-serif;
}

/* Two panel box. Vertical on mobile, Horizontal on PC. */
.twoPanel {
  display: flex;
}

@media (max-width: 700pt) {
  .twoPanel {
    flex-direction: column;
  }
}

@media (min-width: 700pt) {
  .twoPanel {
    flex-direction: row;
  }

  .twoPanel>img {
    max-height: 200pt;
  }
}


#movie {
  aspect-ratio: 16/9;
  width: 100%;
}

#longdescription img {
  margin: auto;
}

#shortDescription {
  display: grid;
  grid-template-areas: "content poster" "more more";
}

a {
  color: #b5f0fe;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.box {
  background-color: #353577;
  padding: 11pt;
  border: 5pt solid #353565;
  margin: 10pt 0;
}


p {
  margin: 10pt 5pt;
}

h1 {
  margin-bottom: 4pt;
}

#title {
  font-size: 2em;
  font-weight: bold;
  grid-area: title;
}

#subtitle {
  font-size: 1em;
  font-style: italic;
  grid-area: subtitle;
}

#img_paloma {
  grid-area: pic1;
}

#img_vancouver {
  grid-area: pic2;
}

#desc1 {
  grid-area: desc1;
}

#desc2 {
  grid-area: desc2;
}

#trailer {
  display: block;
  width: min(800pt, 90%);
  margin: 5pt auto 0 auto;
}

#nav {
  grid-area: nav;
  display: flex;
  flex-direction: row;
  justify-content: center;
  column-gap: 10pt;
  margin: auto 0;
}

section {
  display: flex;
  flex-direction: column;
  row-gap: 10pt;
  width: min(90vw, 600pt);
}

.bio {
  display: grid;
  grid-template-areas: "img title" "img bio";
  column-gap: 10pt;
  row-gap: 0pt;
}

.bio h1 {
  grid-area: title;
  margin: 5pt 0;
}

.bio img {
  grid-area: img;
  width: 100pt;
  margin: auto 15pt;
}

.biotext {
  grid-area: bio;
}

/* Clickable box with an image */
.linkBox {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10pt;
  color: #3c2c5b;
  font-weight: bold;
  font-size: large;
  background-color: #beba38;
  margin: auto 40pt;
  border: 5pt solid #9f9c32;
}

.linkBox div {
  flex-grow: 1;
}

.linkBox img {
  float: right;
  border: none;
  height: 100pt;
  width: 100pt;
}

#podLeft {
  flex-grow: 1;
}

header {
  margin: 10pt auto;
  display: grid;
  grid-template-areas: "title nav" "subtitle nav";
  flex-direction: column;
  width: 100%;
}

main {
  font-size: large;
  margin-top: 10pt;
  margin: auto;
}

#longdescription {
  display: grid;
  grid-template-areas: "pic1 desc1" "desc2 pic2";
  column-gap: 10pt;
}

#longdescription img {
  max-width: calc(100% - 4pt);
  max-height: 200pt;
}

img {
  border: 2pt solid black;
}

.left {
  flex-grow: 1;
}

#get_tickets {
  text-align: center;
  font-size: 25pt;
  font-weight: bolder;
}

.quoteBox {
  margin: 4pt 40pt;
  border-left: solid 5pt white;
  background-color: #444444;
}

.quoteAuthor {
  font-weight: bold;
  margin-bottom: 5pt;
}

.quoteAuthorTagline {
  font-style: italic;
  margin-top: 5pt;
}

#gallery {
  display: flex;
  flex-wrap: wrap;
  column-gap: 50pt;
}

#gallery img {
  height: 100pt;
}

@media (max-width: 700pt) {
  main {
    font-size: 15pt;
    row-gap: 50pt;
  }

  #title {
    text-align: center;
  }

  #subtitle {
    text-align: center;
  }

  #longdescription {
    display: grid;
    grid-template-areas: "pic1" "desc1" "pic2" "desc2";
  }

  #shortDescription {
    flex-direction: column;
  }

  header {
    grid-template-areas: "title" "subtitle" "nav"
  }

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

  .box {
    width: auto;
  }

  #podcast {
    flex-direction: column;
  }
}