* {
    box-sizing: border-box;
    margin-top: 0;
}

body {
    background: hsl(30, 54%, 90%);
    margin: 0;

    font-family: "Outfit", serif;
    font-weight: 400;
    line-height: 1.5em;
    color: hsl(30, 10%, 34%);
}

/* Typography */

h1,
h2 {
    font-family: "Young Serif", serif;
    font-weight: 400;
}

h2,
.macro-value {
    color:hsl(14, 45%, 36%);
}

h1 {
    font-size: 2rem;
    line-height: 1em;
    color: hsl(24, 5%, 18%);

    margin-bottom: 0.75em;
}

h2 {
    font-size: 1.5rem;
}

strong {
    font-weight: 600;   
}

.prep-time h2 {
    font-family: inherit;
    font-size: 1.125rem;
    font-weight: 700;
    color: hsl(332, 51%, 32%);
}

/* List styling */

ul,
ol {
    padding-left: 1.5em;
    padding-bottom: 2em;
    margin-bottom: 2em;
    border-bottom: 2px solid hsl(30, 18%, 87%);
}

ol li {
    padding-left: 1em;
    margin-bottom: 0.75em;
}

ol li::marker {
    color: hsl(14, 45%, 36%);
}

ul {
    list-style: none;
    padding-left: 0;
}

ul li {
  position: relative;
  padding-left: 2.5em;
}

ul li::before {
  content: "•"; 
  position: absolute; 
  left: 0.25em; 
  top: 50%; 
  transform: translateY(-50%); 
  font-size: 1.25rem;
  color: hsl(14, 45%, 36%);
}

.prep-time ul {
    padding-bottom: 0;
    margin-bottom: 0;
    border: 0;
}

li:last-child {
    margin-bottom: 0;
}

/* Layout */

.recipe-page {
    max-width: 720px;

    background: white;
    margin: 0 auto;
    
    display: flex;
    flex-direction: column;
}

.recipe-content {
    padding: 0 2em 1.5em;
}

.img-box {
    order: -1;
    width: 100%;
    margin: 0;
}

img {
    width: 100%;
    margin-bottom: 2.625em;
}

.prep-time {
    background: hsl(330, 100%, 98%);
    padding: 1.5em;
    border-radius: 10px;
    margin: 1em 0 2em;
}


.prep-time ul li::before {
    color:hsl(332, 51%, 32%);
}

.macro-entry {
    padding: 0.75em 6em 0em 2em;
    border-bottom: 2px solid hsl(30, 18%, 87%);

    display: flex;
    justify-content: space-between;
}

.macro-entry p {
    width: 60px;
}

.macro-entry:last-child {
    border-bottom: 0;
}

.macro-value {
    font-weight: 600;
}

@media (min-width: 620px) {

    .recipe-page {
        border-radius: 18px; 
    }

    .recipe-content {
        padding: 0 2.25em 1.25em;
    }

    .recipe-page {
        margin: 8em auto;
    }

    .img-box {
        padding: 2.25em 2.25em 0;
    }

    img {
        border-radius: 10px; 
        margin-bottom: 2em;
    }

    .macro-value {
        padding-right: 35%;
    }
} 

.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }