body {
  background: hsla(260, 40%, 73%);
  display: block;
}
* {
  scroll-behavior: smooth;
}

main {
  display: grid;
  grid-template-columns: 2fr 3fr;
  grid-template-rows: 1fr auto 1fr;
  grid-area:initial;
}

h2 {
  font-size: clamp(2em, 6vw, 2.5em);
  max-width: 15ch;
}

p {
  font-size: clamp(1em, 1.4vw, 1.2em);
}

.episode-footer {
  grid-area: initial;
}

.episode-title {
  grid-column: 1 / span 1;
  grid-row: 1 / span 3;
  padding: 2vw;
}

.episode-intro, .episode-transcript, .episode-meta, .episode-links, .episode-player, .episode-shownotes, .episode-art, .episode-footer {
  grid-column: 2 / span 1;
  padding: 2vw;
}

/* //////////////////////////////////////////////////////////////////////////////////////

Episode title (left hand sticky area)

////////////////////////////////////////////////////////////////////////////////////// */

.episode-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  position: sticky;
  top: 0;
  background-color: hsla(187, 34%, 75%, 1.000);
  text-align: center;
}

.episode-title h1 {
	background-color: initial;
	white-space: initial;
  max-width: 15ch;
  font-size: clamp(2.5em, 5vw, 14em);
  line-height: 1em;
  margin-bottom: 0.4em;
  padding: 0;
  filter: brightness(1);
}

.episode-title h3 {
  margin-bottom: 0.2em;
  text-decoration: none;
  text-decoration-thickness: 2px;
}

.episode-title .meta {
  writing-mode: initial;
  /* text-transform: uppercase; */
  color: black;
}

.episode-title .meta a {
  text-decoration: none;
  color: black;
}

.episode-title .meta a:hover {
  text-decoration: underline;
  /* background-color: navajowhite; */
}


/* //////////////////////////////////////////////////////////////////////////////////////

Episode intro (player and shownotes)

////////////////////////////////////////////////////////////////////////////////////// */

.episode-intro {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  background-color: black;
  text-align: center;
  padding: 5vw;
  padding-bottom: 0;
  min-height: 50vh;
}

.episode-intro p {
  color: whitesmoke;
  line-height: 1.5em;
  margin-bottom: 2em;
  max-width: 23em;
}

.episode-intro h3, .episode-shownotes h3 {
  color: hsl(260, 40%, 73%);
}

.episode-player {
  position: sticky;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  top: 0;
  padding: 3vh 5vw;
  background-color: black;
  clip-path: polygon(0 0, 100% 0, 100% 82%, 91% 96%, 74% 97%, 53% 100%, 34% 97%, 13% 98%, 0 84%);
  z-index: 3;
}

.episode-player audio {
  max-width: 400px;
  background-color: dimgray;
  /* height: 100px; */
}

.episode-shownotes {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: black;
  text-align: center;
  padding: 2em 5vw 5vw;
  margin-top: -1em;
  min-height: 50vh;
  clip-path: polygon(0 0, 100% 0, 100% 64%, 94% 80%, 80% 89%, 60% 89%, 36% 92%, 16% 96%, 0 77%);
}

.episode-shownotes h3 {
  margin-bottom: 1em;
  margin-top: -1.5em;
}

.episode-shownotes ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.episode-shownotes ul li {
  margin-bottom: 1em;

}

.episode-shownotes a {
  color: whitesmoke;
}

.episode-shownotes a:hover {
  color: hsla(187, 34%, 75%, 1.000);
}
.episode-shownotes a:focus {
  background: hsla(187, 34%, 75%, 1.000);
  color: black;
  border: dashed red;
}


/* //////////////////////////////////////////////////////////////////////////////////////

Transcript

////////////////////////////////////////////////////////////////////////////////////// */

.episode-transcript h3 {
  text-align: center;
}

.episode-transcript .closed-caption {
  text-align: center;
  max-width: none;
}

.nav li a:hover {
	background-color: thistle;
}

.direct-link {
	color: black;
}

.direct-link:hover {
	color: hsla(187, 34%, 75%, 1.000);
}

p {
  transition: .2s;
  line-height: 1.7;
}

p strong {
  background: none;
}

.conversation {
  display: flex;
  flex-direction: column;
  position: relative;
}

.conversation p {
  padding: 1em;
  border-radius: 1em;
  color: white;
  text-shadow: 1px 1px hsla(227, 63%, 21%, 1.000);
  margin: 1em;
  padding: 1em;
}

.conversation p:nth-of-type(odd) {
  border-top-left-radius: 0.1em;
  align-self: flex-start;
  margin-right: 4em;
}

.conversation p:nth-of-type(even) {
  border-top-right-radius: 0.1em;
  align-self: flex-end;
  margin-left: 4em;
}
@media (max-width: 30em) {
  .conversation p:nth-of-type(odd),
  .conversation p:nth-of-type(even) {
    margin: 1em;
  }
}
/* p[data-time]::before {
  content: attr(data-time);
  position: absolute;
  color: transparent;
  font-size: 2em;
  line-height: 1;
  font-weight: bold;
  font-family: "Irma Bold 8",sans-serif;
  text-shadow: none;
}
.conversation p:nth-of-type(odd)[data-time]:hover::before {
  color: hsla(184, 40%, 73%);
  margin-left: -.5em;
}
.conversation p[data-time]:hover::before {
  color: hsla(199, 40%, 73%);
  transition: .3s;
  margin-top: -1.19em;
} */

#bubbles {
  position: absolute;
  width: calc(60% - 4vw);
}
#bubbles p {
  text-shadow: none;
  position: sticky;
  top: calc(2em + 4vh);
  background-color: hsla(185, 40%, 73%);
  color: transparent;
  mix-blend-mode: multiply;
  clip-path: polygon(39% 0, 92% 10%, 100% 43%, 98% 70%, 82% 95%, 32% 100%, 6% 84%, 0% 43%, 9% 8%);
  /* Unfortunately had to switch off animating these polygons
  because both Chrome and Safari should fix their rendering engines  */
  /* animation-name: poly; */
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 37s;
  animation-delay: -13s;
}
@@media (prefers-reduced-transparency: reduce) {
  #bubbles p {
    mix-blend-mode: normal;
  }
}
#bubbles p:nth-of-type(even) {
  background-color: hsla(200, 40%, 73%);
  clip-path: polygon(68% 1%, 93% 21%, 95% 44%, 98% 70%, 90% 95%, 53% 95%, 6% 96%, 0 58%, 9% 8%);
  animation-duration: 47s;
  animation-delay: -29s;
}
#bubbles p:nth-of-type(3n) {
  background-color: hsla(215, 40%, 73%);
  clip-path: polygon(55% 3%, 90% 15%, 95% 36%, 100% 75%, 82% 95%, 53% 100%, 0 71%, 3% 40%, 6% 3%);
  animation-duration: 61s;
  animation-delay: -31s;
}
#bubbles p:nth-of-type(5n) {
  background-color: hsla(230, 40%, 73%);
  animation-duration: 73s;
  animation-delay: -37s;
}
#bubbles p:nth-of-type(7n) {
  background-color: hsla(245, 40%, 73%);
}
#bubbles p:nth-of-type(11n) {
  background-color: hsla(260, 40%, 73%);
}
#bubbles p:nth-last-of-type(even) {
  top: calc(2em + 2vh);
}
#bubbles p:nth-last-of-type(3n) {
  top: calc(2em + 6vh);
}
#bubbles p:nth-last-of-type(5n) {
  top: calc(2em + 10vh);
}
#bubbles p:nth-last-of-type(7n) {
  top: calc(2em + 14vh);
}
#bubbles p:nth-last-of-type(11n) {
  top: calc(2em + 22vh);
}

@keyframes poly {
  0% {
    clip-path: polygon(39% 0, 92% 10%, 100% 43%, 98% 70%, 82% 95%, 32% 100%, 6% 84%, 0% 43%, 9% 8%);
  }
  33% {
    clip-path: polygon(68% 1%, 93% 21%, 95% 44%, 98% 70%, 90% 95%, 53% 95%, 6% 96%, 0 58%, 9% 8%);
  }
  67% {
    clip-path: polygon(55% 3%, 90% 15%, 95% 36%, 100% 75%, 82% 95%, 53% 100%, 0 71%, 3% 40%, 6% 3%);
  }
}
@media (prefers-reduced-motion) {
  @keyframes poly {}
}

.para-big {
  background-color: transparent !important;
}

p.closed-caption {
	text-decoration-style: dotted;
	text-decoration-color: powderblue;
}
[id="why-does-this-page-look-like-this%3F"]:target {
  padding-top: 6em;
}


/* //////////////////////////////////////////////////////////////////////////////////////

Other

////////////////////////////////////////////////////////////////////////////////////// */


.episode-art {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  grid-column: 2 / span 1;
  padding: 5vw;
  text-align: center;
}

.prevnext {
  text-align: center;
}

.prevnext li a {
  background-color: khaki;
}

.prevnext li a:hover {
  background-color: hsla(187, 34%, 75%, 1.000);
}

p code {
  font-style: normal;
}

.episode-footer {
  text-align: center;
}

.episode-footer ul {
  padding: 0;
}

.episode-footer ul li {
  list-style: none;
  margin: 0 0 0.5em;
  padding: 0;
}

.episode-footer ul li a {
  color: black;
  background-color: khaki;
}

.episode-footer ul li a:hover {
  background-color: hsla(187, 34%, 75%, 1.000);
}

.logo {
  display: inline-block;
}

abbr {
  font-variant-caps: initial;
}


body::before {
  content: '';
  background: hsla(187, 34%, 75%, 1.000);
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100vh;
}

body::after {
  content: '';
  background: black;
  position: fixed;
  bottom: 0;
  left: 40%;
  width: 60%;
  height: 11vh;
  clip-path: polygon(10% 70%, 28% 48%, 54% 40%, 71% 41%, 80% 31%, 87% 20%, 100% 0, 100% 100%, 0 100%);
}

/* MEDIA  */

@media (max-width: 50em) {
  .episode-title, .episode-intro, .episode-transcript, .episode-meta, .episode-links, .episode-player, .episode-shownotes, .episode-art, .episode-footer {
    grid-column: 1 / span 2;
    padding: 2vw;
  }

  .episode-title {
    min-height: 60vh;
    height: auto;
    clip-path: polygon(0 0, 100% 0, 100% 64%, 94% 80%, 74% 88%, 58% 85%, 29% 89%, 11% 79%, 0 68%);
  }

  .episode-intro {
    padding-top: 8vh;

  }

  .episode-shownotes {
    padding-bottom: 10vh;
    position: relative;
    clip-path: none;
    z-index: 2;
  }
  .episode-transcript,
  .episode-art {
    position: relative;
    background-color: hsla(260, 40%, 73%);
  }
  #bubbles {
    width: calc(100% - 4vw);
  }
  .episode-links {
    padding-bottom: 40vh;
  }

  body::before {
    width: 100%;
    height: 60vh;
  }
  body::after {
    z-index: 1;
    left: 0%;
    width: 100%;
    height: 5vh;
    background-color: black;
  }

}