/* Pepper's Workshop stylesheet.
   I wrote this by hand, in one sitting, on a Sunday.
   If a margin looks a little off, it probably is.
   That is the point. No framework, no template, no generated art.
   Just paper, ink, and a microphone. - Pepper */

body {
  background: #f4f1ea;
  background-image: repeating-linear-gradient(
    transparent,
    transparent 31px,
    #c9c2b0 31px,
    #c9c2b0 32px
  );
  color: #222222;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  line-height: 32px;
  margin: 0;
  padding: 0 20px 60px 20px;
}

main {
  max-width: 680px;
  margin: 0 auto;
  border-left: 2px solid #d8a0a0;
  padding-left: 28px;
}

.hand {
  font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  color: #0e2a5c;
}

h1 {
  font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  font-size: 52px;
  line-height: 56px;
  color: #0e2a5c;
  margin-bottom: 0;
  transform: rotate(-1deg);
}

h2 {
  font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  font-size: 28px;
  line-height: 32px;
  color: #0e2a5c;
  margin-top: 48px;
}

h3 {
  font-size: 22px;
  line-height: 32px;
  margin-bottom: 0;
}

p {
  margin-top: 0;
}

a {
  color: #0e2a5c;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

a:hover {
  background: #ffffa5;
}

.scribble {
  text-decoration: line-through;
  text-decoration-color: #d12828;
  text-decoration-thickness: 3px;
}

.note {
  background: #ffffa5;
  padding: 16px 20px;
  transform: rotate(-2deg);
  box-shadow: 3px 3px 0 #d8d0a8;
  border: 1px solid #e6dd8a;
  margin: 32px 0;
  position: relative;
}

.note:before {
  content: "";
  display: block;
  width: 80px;
  height: 24px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid #ddd;
  position: absolute;
  top: -12px;
  left: 40%;
  transform: rotate(-3deg);
}

.episode {
  background: #fffdf5;
  border: 2px solid #222;
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  padding: 20px 24px;
  margin: 32px 0;
  box-shadow: 4px 4px 0 #c9c2b0;
}

.episode audio {
  width: 100%;
  margin: 16px 0;
}

.meta {
  font-size: 16px;
  line-height: 24px;
  color: #555;
}

.arrow {
  font-family: "Segoe Print", "Bradley Hand", cursive;
  color: #d12828;
  font-size: 24px;
}

footer {
  margin-top: 64px;
  font-size: 16px;
  line-height: 24px;
  color: #555;
  border-top: 2px dashed #999;
  padding-top: 16px;
}

.coffee {
  width: 90px;
  height: 90px;
  border: 6px solid rgba(120, 70, 20, 0.18);
  border-radius: 50%;
  float: right;
  margin: 10px 0 10px 20px;
}