img{
    width:100%;
    height:auto;
}

html{
    font-size: 18px;
    font-family: 'Open Sans', sans-serif;
    max-width:1000px;
    padding-top:3em;
    margin-left:auto; 
    margin-right: auto; 
    background-color: rgb(255, 248, 242);
}
body{
    margin:0;
    padding:0;
    margin-right: 3em;
    margin-left: 3em;
}
#hero-img{
    float:right;
    width: 60%;
    margin:0;
    margin-bottom:30px;
    padding-left:60px
    }
    @media (min-width:100px) {
        #hero-img{ width:100% }
    @media (min-width:1000px) {
        #hero-img { width:60% }
header{
    padding-bottom:5rem;
}

#intro{
    padding-bottom: 20em;
}
.ingredients{
    width:50%;
    float:left;
}
.equipment{
    width:50%;
    float:right;
}
/* .details{
    width:20%;
    float:left; 
}
.row:after {
    content: "";
    display: table;
    clear: both;
  }
  #three-column{
      float:right
  } */
  .uo{
      list-style: none; 
      width:20%;
      float:left; 
      border-style: dotted;
      margin-left: 30px;
      margin-right: 30px;
      padding:20px;
      background-color: rgb(241, 232, 219);

  }
  #details{
      padding-bottom: 16em;
      width:100%
  }


  
  @media (min-width:500px) {
    .uo { width:80% }
    @media (min-width:1000px) {
        .uo { width:20% }