:root {
--white: hsl(0, 0%, 100%);
--stone-100: hsl(30, 54%, 90%);
--stone-150: hsl(30, 18%, 97%);
--stone-600: hsl(30, 10%, 34%);
--stone-900: hsl(24, 5%, 18%);
--brown-800: hsl(14, 45%, 36%);
--rose-800: hsl(332, 51%, 32%);
--rose-50: hsl(330, 100%, 98%);
}

* {
    box-sizing: border-box;
}

@font-face {
    font-family: "Outfit";
    src: url("./assets/fonts/outfit/Outfit-VariableFont_wght.ttf") format("truetype");
    font-weight: normal;
}

@font-face {
    font-family: "YoungSerif";
    src: url("./assets/fonts/young-serif/YoungSerif-Regular.ttf");
    font-style: normal;
}

body {
    font-family: "Outfit", sans-serif;
    padding: 1em;
    line-height: 1.5em;
    font-size: 1rem;
    background-color: var(--stone-100);
    color: var(--stone-900);
}

main {
     max-width: 40rem;
     margin: 0 auto;
     background-color: var(--white);
     padding:2.5em;
     border-radius: 1em;
}

img {
    width: 100%;
    border-radius: 1em;
}

.recipe {
    font-family: "YoungSerif", serif;
    color: var(--stone-900);
    line-height: 1.2em;
    margin-top: 2rem;
}

h2 {
    font-family: "YoungSerif", serif;
    color: var(--brown-800);
    font-weight: 500;
    
}

.preparation {
    background-color: var(--stone-150);
    padding: 0.2em 1.2em;
    margin-top: 2.5em;
    border-radius: 0.5rem;
    line-height: 2em;
}

.prep-heading {
    font-size: 1.2em;
    color: var(--stone-600);
    font-variation-settings: "wght" 600;
}

.prior {
    color: var(--rose-800);
    font-variation-settings: "wght" 800;
}

.ingredients {
    line-height: 2em;
}

.instructions {
    line-height: 1.5em;
}

ol li {
    padding: 0.5em;
}

ol li::marker {
        font-weight: 900;
        color: var(--brown-800);
    }

.first-set {
   display: inline-block;
   width: 50%;
}

.second-set {
    display: inline-block;
    font-weight: 800;
    color: var(--brown-800);
 }

.divider {
    width: 100%;
    height: 1px;
    background-color: lightgrey;
}

    .attribution { 
        font-size: 11px; 
        text-align: center; 
    }

    .attribution a { 
        color: hsl(228, 45%, 44%); 
    }


@media (max-width: 500px) {


body {
    margin: 0;
    padding: 0;
    background-color: white;
    height: 0vh;
    background: url('./assets/images/image-omelette.jpeg') no-repeat center center/cover;
    position: relative;
    z-index: 1; /* Stack order below the nav */
}

    img {
        margin: 0;
        display: none;
    }

    main {
       margin: 0;
       border-radius: 0;
       margin-top: 15rem;
    }
   
}