html{
    font-family: "polymath", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size:18px;
}
body{
    margin:0;
}
header{
    text-align:center;
    background-image:url(../images/silpancho_dish.jpg);
    margin: 0;
    padding:0;
    background-position: center;
    background-size: cover;
    background-repeat:no-repeat;
    padding-top:166px ;
    padding-bottom: 188px;
    color:white;
}
.highlight{
    background-color:green;
    padding-left:10px;
    padding-right:10px;
}
h1{
    margin:0;
    font-size:80px;
    line-height: 1;
}
h2{
    margin:0;
    font-size:30px;
    margin-top: 16px;
    line-height: 1;
}

@media (max-width:1000px){
    h1{
        font-size:50px;
    }
    h2{
        font-size:25px;
    }
}
@media (max-width:650px){
    h1{
        font-size:35px;
    }
    h2{
        font-size:18px;
        line-height:0.3;
    }
}
.intro{
    margin-left:30px;
    margin-right:30px;
    padding-top:30px;
    padding-bottom:30px;
}
.ingredients h3{
    text-align:center;
    background-position: center;
    margin:0.5em;
    font-size:30px;
}
  .column-one,
  .column-two {
    flex: 1;
    padding: 16px;
    font-size:14px;
    margin-inline-start: 30px;
    margin-inline-end: 30px;
  }
.ingredients{
    position: sticky;
    top: 0;
    background-color: green;
    color: white;
    padding: 20px;
    z-index: 100;
}
.fixed{
    display:flex;
}
.directions{
    margin-left:30px;
    margin-right:30px;
    padding-top:30px;
    padding-bottom:30px;
}
.directions h3{
    text-align:center;
    font-size:30px;
}
.directions p{
    margin-bottom:2em;
    display:inline-block;
    width:100%;
}
img{
    float:right;
    text-align:right;
    width:35%;
    height:200px;
    border-radius: 30px;
    margin:1em;
    margin-top:0;
    object-fit: cover;
}
@media (min-width:1000px){
    img{
        width:32%;
        height:300px;
        margin-left:20px;
    }
}
@media (min-width:1350px){
    img{
        width:30%;
        height:350px;
        margin-left:20px;
    }
}
@media (min-width:1000px){
    .intro, .directions p{
        font-size:20px;
    }
     .column-one,
    .column-two {
        font-size:16px;
    }
}
@media (min-width:1350px){
    .intro, .directions p{
        font-size:25px;
    }
         .column-one,
    .column-two {
        font-size:18px;
    }
}
footer{
    text-align:center;
    font-size:10px;
    padding-bottom:20px;
}