body {
  background: white;
}

header {
	position: fixed;
}
/* .logo {
	height: 0;
	margin-bottom: 0;
} */

.episode-intro footer {
  writing-mode: initial;
	position: fixed;
	top: 0em;
	left: calc(40px + 1em);
	margin-top: clamp(1em, 4vw, 2em);
	margin-left: clamp(1em, 4vw, 2em);
}

.episode-intro h1 {
	background-color: transparent;
	white-space: initial;
  max-width: 15ch;
  font-size: clamp(3em, 8vw, 5em);
  line-height: 1em;
  margin-top: 1em;
  margin-top: 15vh;
  margin-bottom: 0.4em;
  padding: 0;
  filter: brightness(1);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 0.5em;
  text-underline-offset: -0.5em;
  text-decoration-color: paleturquoise;
  text-decoration-skip-ink: none;
}


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

h3 {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 0.5em;
  text-underline-offset: -0.5em;
  text-decoration-color: paleturquoise;
  text-decoration-skip-ink: none;
}


.player {
  top: 1em;
  border-radius: 1em;
  background: rgba(0,0,0,0.8)
}


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

.direct-link {
	color: slateblue;
}

.direct-link:hover {
	color: darkslateblue;
}



[id="shownotes"] + ul li a {
  background: transparent;
}

[id="shownotes"] + ul li a:hover {
  background: thistle;
}

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

p strong {
  background: none;
}

.shownotes, .measure-measurer {
  background: whitesmoke;
  padding: 1em 2em 1em;
  margin-bottom: 1em;
  border-radius: 0.5em;
}

.shownotes .direct-link, .measure-measurer .direct-link {
  display: none;
}

.measure-radio {
  background: white;
  display: inline-block;
  padding: 0.4em 1em 0.6em 0.5em;
  margin-bottom: 1em;
  border-radius: 0.3em;
  font-size: 1.1em;
  color: black;
  border: 2px solid white;
}

.measure-radio:hover {
  color: black;
  border-color: slategray;
}

#conversation {
  display: flex;
  flex-direction: column;
}

#conversation p {
  padding: 1em;
  border-radius: 1em;
}

#conversation p:nth-of-type(odd) { background-color: lavender; align-self: flex-start; margin-right: 4em;}

#conversation p:nth-of-type(even) { background-color: paleturquoise; align-self: flex-end; margin-left: 4em; }

input[id^="measure"] {
  position: absolute;
  left: -1000em;
}

.measure20 p,
input[id="measure-20em"]:checked ~ #conversation p
 {
  max-width: 20em;
}

.measure30 p,
input[id="measure-30em"]:checked ~ #conversation p {
  max-width: 30em;
}

.measure40 p,
input[id="measure-40em"]:checked ~ #conversation p {
  max-width: 40em;
}
.measure-measurer label::before {
  content: "☐";
}
input[id="measure-20em"]:checked ~ .measure-measurer label[for="measure-20em"]::before,
input[id="measure-30em"]:checked ~ .measure-measurer label[for="measure-30em"]::before,
input[id="measure-40em"]:checked ~ .measure-measurer label[for="measure-40em"]::before {
  content: "☑";
}

input[id="measure-20em"]:checked ~ .measure-measurer label[for="measure-20em"],
input[id="measure-30em"]:checked ~ .measure-measurer label[for="measure-30em"],
input[id="measure-40em"]:checked ~ .measure-measurer label[for="measure-40em"] {
  border-color: slategray;
}

input[id="measure-20em"]:focus ~ .measure-measurer label[for="measure-20em"],
input[id="measure-30em"]:focus ~ .measure-measurer label[for="measure-30em"],
input[id="measure-40em"]:focus ~ .measure-measurer label[for="measure-40em"] {
  outline: 1px solid;
}



.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"] ~ p {

}





input:checked ~ p,
input:checked ~ .episode-intro h1 {
  text-decoration-color: hsla(0,0%,100%,0);
}
p code {
  font-style: normal;
}
label {
  cursor: pointer;
}
label:hover {
  color: powderblue;
}
input + label::before {
  content: '⨻ ';
  line-height: 1;
}
input:checked + label::before {
  content: '✓ ';
}
input[type="checkbox"]:focus + label {
  outline: dashed red;
}

/* MEDIA  */

@media (max-width: 44em) {

	header {
		position: relative;
	}
	.episode-intro footer {
		position: relative;
		left: 0;
		margin: 0;
	}

  .episode-intro h1 {
    margin-top: 0.5em;
  }
}

@media (max-width: 24em) {

  header {
    position: relative;
    height: 3em;
    background-color: white;
	}
}
@media (max-width: 30em) {

}
.para-big {
  font-size: 1.3em;
}

@media (min-width: 60em) {
  .para-big {
    font-size: 1.5em;
  }

}
@media (min-width: 70em) {
  .para-big {
    font-size: 1.8em;
  }
}