html, body {
 font-size: 20px;
}
body * {
   box-sizing: border-box;
}
p {
   margin : 0.3em;
   line-height: 1.25;
}

.row {
   display: flex;
   flex-flow: row wrap;
   align-items: space-between;
}
.justify-content--center {
   justify-content: center;
}
.sketch__outer {
   background-image: radial-gradient(farthest-corner at center, #AAA 0, #EEE 100%);
   color: black;
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   overflow: auto;
}
.sketch__inner {
   padding: 1rem;
}
p, .sketch__inner {
   max-width: 100vw;
}
.instruction, .action, .narration {
   flex: 1 0 100%;
}
.instruction {
   font-size: 0.5rem;
   font-style: italic;
}
.narration {
   font-family: Tinos, serif;
   font-size: 1.4rem;
   font-weight: 800;
}
.action {
   color: rgb(2, 81, 177);
   font-family: 'Open Sans', sans-serif;
   font-size: 1rem;
   font-weight: 600;
}

.video__iframe {
   width: 80vw;
}
@media screen and (min-width:760px){
   p, .sketch__inner{
      max-width: 70ex;
   }
   .sketch__inner {

   }
   .video__iframe {
      width: 480px;
   }
}