body {
    margin: 0.5em;
    padding: 1.25em;
    background-color: #fc9;
    font: 100% /162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
    color: #420;
    box-shadow: inset 0 0 1.25em rgba( 0, 0, 0, 0.8 );
 }

#ingredients {
    float: left;
    max-width: 27.5em;
    margin-right: 1.25em;
 }

 section {
    float: left;
    max-width: 33.75em; 
    margin-top: 1.25em;
    border: 0.2em double #000;
    box-shadow: 0.6em 0.6em 0.6em rgba( 0, 0, 0, 0.5 );
    background-color: #fff;
 }
 section h2 {
    margin: 0.5em 0;
    font-weight: normal;
    text-align: center;
 }

 section video {
    display: block;
    width: 100%;
 }

#method {
    clear: both;
 }

ul,ol {
    font-size: 1em;
 }

a {
    color: #000080;
 }

@media screen and ( max-width: 67.5em ) {
h1 {
    text-align: center;
 }

 section {
    float: none;
    clear: both;
    width: 80%;
    margin: 1.25em auto;
  }
 }

@media screen and (max-width: 39em) {
#ingredients {
    float: none;
    width: auto;
    margin-right: 0;
  }
 }

@media screen and (max-width:26.9em) {
body {
    margin: 0.25em;
    padding: 0.5em;
    font-size: 1em;
    box-shadow: inset 0 0 0.5em rgba( 0, 0, 0, 0.8);
  }
 }