html{
margin:0;
padding:0;
background:#fcfbf7;
}

body{
margin:0;
padding:0;
color:#1f1f1b;
font-family:Georgia,"Times New Roman",serif;
}

.page{
max-width:760px;
margin:0 auto;
padding:72px 28px 96px;
}

.title-block{
text-align:center;
margin-bottom:60px;
}

h1{
margin:0;
font-size:3rem;
font-weight:500;
letter-spacing:0.04em;
}

.genre{
margin:10px 0 20px;
font-style:italic;
color:#555248;
}

.cast{
margin:0;
font-size:0.95rem;
letter-spacing:0.06em;
color:#444238;
}

.sc{
font-variant:small-caps;
letter-spacing:0.05em;
}

.illustration{
text-align:center;
margin:36px 0 44px;
}

.illustration img{
max-width:68%;
height:auto;
opacity:0.92;
}

.play{
font-size:1.08rem;
line-height:1.72;
}

.stage{
margin:0 0 42px;
font-style:italic;
color:#555248;
}

.speech{
margin:0 0 30px;
}

.speaker{
margin:0 0 1px;
font-size:0.9rem;
letter-spacing:0.08em;
text-transform:uppercase;
color:#2f2d27;
}

.direction{
margin:0 0 1px 14px;
font-style:italic;
font-size:0.95em;
color:#77756c;
}

.speech p{
margin:0;
}

.footer{
margin-top:92px;
text-align:center;
}

.footer a{
text-decoration:none;
color:#7e8d7c;
font-size:0.9rem;
letter-spacing:0.22em;
text-transform:lowercase;
}

.footer a:hover{
opacity:0.8;
}

@media (max-width:720px){

.page{
padding:56px 22px 80px;
}

h1{
font-size:2.35rem;
}

.play{
font-size:1.03rem;
line-height:1.68;
}

.illustration img{
max-width:90%;
}

.stage{
margin-bottom:34px;
}

.speech{
margin-bottom:26px;
}

.direction{
margin-left:12px;
}

}