* {
    box-sizing: border-box;
    margin: 0 !important;
    font-weight: bold;    
}

body {
    font-family: 'Roboto', sans-serif;
    font-size: 8px;
    color: rgba(31,31,31,.9);
    background: url(../media/images/Background/wood.jpg) 50% 50%;
}

p {
    flex-basis: 60%;
    font-size: 8px;
}


.card {
    display: flex;
    min-height: 1vh;
    align-items: stretch;
    justify-content: center;
}

.side {
    flex-grow: 0;     /* do not grow   - initial value: 0 */
    flex-shrink: 0;   /* do not shrink - initial value: 1 */
    flex-basis: 40%; /* width/height  - initial value: auto */
    background-color: #FFFFFF;
    box-shadow: 0 20px 6px -6px #212121;
}

.front {
    display: flex;
    flex-direction: column;
    background-color: #d3d3d3;
}




@media (min-width: 320px) and (max-width: 767px) {
    h1 { color: #3d3434; font-family: 'Trocchi', serif; font-size: 12px; font-weight: normal; line-height: 14px; margin: auto; border-bottom: 1px solid rgba(31,31,31,.9);}
    h2 { color: #3d3434; font-family: 'Trocchi', serif; font-size: 10px; font-weight: normal; line-height: 12px; margin: auto; border-bottom: 1px solid rgba(31,31,31,.9);background-color:#FF7F7F;}
    h3 { color: #3d3434; font-family: 'Trocchi', serif; font-size: 8px; font-weight: normal; line-height: 10px; margin: auto; border-top: 1px solid rgba(31,31,31,.9); border-bottom: 1px solid rgba(31,31,31,.9);}    
    h4 { color: #3d3434; font-family: 'Source Sans Pro', sans-serif; font-size: 5px; font-weight: 400; line-height: 7px; margin: auto;}
    h5 { color: #3d3434; font-family: 'Trocchi', serif; font-size: 8px; font-weight: normal; line-height: 10px; margin: auto;}    
    .subheader { font-size: 26px; font-weight: 300; color: #FFFFFF; margin: auto; }
  }
@media (min-width: 768px) and (max-width: 1280px) {
    h1 { color: #3d3434; font-family: 'Trocchi', serif; font-size: 18px; font-weight: normal; line-height: 21px; margin: auto; border-bottom: 1px solid rgba(31,31,31,.9);}
    h2 { color: #3d3434; font-family: 'Trocchi', serif; font-size: 14px; font-weight: normal; line-height: 17px; margin: auto; border-bottom: 1px solid rgba(31,31,31,.9);background-color:#FF7F7F;}
    h3 { color: #3d3434; font-family: 'Trocchi', serif; font-size: 11px; font-weight: normal; line-height: 14px; margin: auto; border-top: 1px solid rgba(31,31,31,.9); border-bottom: 1px solid rgba(31,31,31,.9);}    
    h4 { color: #3d3434; font-family: 'Source Sans Pro', sans-serif; font-size: 7px; font-weight: 400; line-height: 10px; margin: auto;}
    h5 { color: #3d3434; font-family: 'Trocchi', serif; font-size: 11px; font-weight: normal; line-height: 14px; margin: auto;}    
    .subheader { font-size: 26px; font-weight: 300; color: #FFFFFF; margin: auto; }
  }
@media screen and (min-width: 1281px) {
    h1 { color: #3d3434; font-family: 'Trocchi', serif; font-size: 36px; font-weight: normal; line-height: 44px; margin: auto; border-bottom: 1px solid rgba(31,31,31,.9);}
    h2 { color: #3d3434; font-family: 'Trocchi', serif; font-size: 28px; font-weight: normal; line-height: 36px; margin: auto; border-bottom: 1px solid rgba(31,31,31,.9);background-color:#FF7F7F;}
    h3 { color: #3d3434; font-family: 'Trocchi', serif; font-size: 22px; font-weight: normal; line-height: 26px; margin: auto; border-top: 1px solid rgba(31,31,31,.9); border-bottom: 1px solid rgba(31,31,31,.9);}    
    h4 { color: #3d3434; font-family: 'Source Sans Pro', sans-serif; font-size: 14px; font-weight: 400; line-height: 18px; margin: auto;}
    h5 { color: #3d3434; font-family: 'Trocchi', serif; font-size: 22px; font-weight: normal; line-height: 26px; margin: auto;}        
    .subheader { font-size: 26px; font-weight: 300; color: #FFFFFF; margin: auto; }

}

.overview {
    flex: 1 1 50%;
    display: relative;
    justify-content: space-between;
    padding: 10px;
    text-align: center;
    text-transform: uppercase;
}
@media (min-width: 320px) and (max-width: 767px) {
    .overview > i { font-size: 8px; padding-inline: 2px;}
  }
@media (min-width: 768px) and (max-width: 1280px) {
    .overview > i { font-size: 11px; padding-inline: 3px;}
}
@media screen and (min-width: 1281px) {
    .overview > i { font-size: 22px; padding-inline: 5px;}
}


img { 
    display: block;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 320px) and (max-width: 767px) {
    img {max-width: 125px; max-height: 125px; border: 5px; border-style: solid; border-color: lavenderblush;}
  }
@media (min-width: 768px) and (max-width: 1280px) {
    img {max-width: 250px; max-height: 250px; border: 7px; border-style: solid; border-color: lavenderblush;}
  }
@media screen and (min-width: 1281px) {
    img {max-width: 500px; max-height: 500px; border: 10px; border-style: solid; border-color: lavenderblush;}
}

header {
    flex: 1 1 25%;
    display: relative;
    justify-content: space-between;
    padding: 10px;
    text-align: center;
    text-transform: uppercase;
    background-color: #d3d3d3;
}

span {
    display: inline;
    font-size: 15px;
    font-weight: normal;
    letter-spacing: 2px;
    font-size: 15px;
    padding: 1px;
    text-indent: 15px;
}

nav {
    padding: 0;
    flex-basis: 48%;
    display:flex;  
    list-style:none;
}

nav > h2 {
    flex-basis: 100px;
    font-size: 20px;
    text-indent: 10%;
}

ul {
    margin: 0;
    text-indent: 20px;
    padding: 0;
    list-style-type: none;
}

.steps {
    clear: both;
    list-style: none;
    padding-left: 2%;
    
  }
  .steps li {
    margin: 2em 0;
    padding-top: 1em;
    display: block;
    position: relative;
    counter-increment: inst;
    padding-left: 10px;
    text-align: left;
    
  }
  .steps li::before {

    content: counter(inst);
    
    background: rgba(255, 150, 0, 0.35);
    color: #fff;
    
    font-size: 1em;
    font-weight: 700;
    font-style: italic;
    text-shadow: 1px 1px rgba(255, 150, 0, 0.5);
    
    border-radius: 0 0.675em 0.675em 0;
    font-size: 1.5em;
    text-align: center;
    
    padding-top: 0;
    padding-left: 2.25%;
    left: -5%;
    top: -0.65em;
    height: 1.35em;
    width: 1.35em;
    position: absolute;
    
    transition: all 0.2s ease-in-out;
    
    z-index: -1;
  }
  @media (min-width: 33em) {
    .steps li:before {
      border-radius: 50%;
      font-size: 1.5em;
      height: 1.35em;
      margin-left: 2.5%;
      padding-left: 0;
      padding-top: 0;
      top: -0.15em;
      width: 1.35em;
      z-index: -1;
    }
  }    

.ingredients > ul > li {
    list-style-type: none;
    text-indent: 20px;
}