body {
     display: flex;
     min-height: 100vh;
     margin: 0 auto;
     flex-direction: column;
     font-family: 'Roboto', sans-serif;
     font-weight: 400;
     background-color: #fff;
     color: #333;
}
 header {
     padding: .25rem .5rem;
}
 header h1 {
     color: #999;
}
 main {
     min-height: 8rem;
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: center;
}
 blockquote {
     width: 20rem;
     padding: 1rem 0 2rem 0;
}
 blockquote p {
     padding: .5rem 1.5rem;
     font-size: 1.5rem;
     position: relative;
     text-align: justify;
}
 blockquote p::before, blockquote p::after {
     position: absolute;
     height: 1.5rem;
     width: 1.5rem;
     font-size: 4rem;
     line-height: 4rem;
     color: #999;
}
 blockquote p::before {
     bottom: -1rem;
     left: 0;
     content: "\201C";
}
 blockquote p::after {
     top: -1rem;
     right: 0;
     content: "\201D";
}
 blockquote p strong {
     color: #099;
     font-weight: 500;
}
 blockquote footer {
     color: #666;
     font-weight: 300;
     text-align: right;
}
 body>footer {
     padding: .25rem .5rem;
     text-align: right;
     font-weight: 300;
}
 small {
     font-size: .8rem;
}
 a:link {
     color: #999;
}
 a:visited {
     color: #ccc;
}
 a:focus {
     color: #fff;
     background-color: #099;
}
 a:hover {
     color: #099;
     background-color: inherit;
}
 a:active {
     font-weight: 400;
     color: red;
}