/* Have to actually install the fonts to use them
better to use the google api way 
wait is this actually true? i dont remember*/

/* @font-face {
    font-family: "Young Serif";
    src: url(../young-serif/YoungSerif-Regular.ttf);
}

@font-face {
    font-family: "Outfit";
    src: url(../outfit/Outfit-VariableFont_wght.ttf); 
} */

/* HSL = Hue, saturation, lightness */
body{
    background-color: hsl(30, 54%, 90%);
}

.recipe-title{
    font-family: "Young Serif", serif;
    color: hsl(24, 5%, 18%);
    font-size: 40px;
}

.white_card{
    background-color: hsl(0, 0%, 100%);
    border-radius: 20px;
    padding: 30px;
    margin: auto;
    width: 50%;
    overflow: hidden;
}

.omelette img{
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 20px;
}

.text{
    color: hsl(30, 10%, 34%);
    font-family: "Outfit", serif;
}

.preptime-box{
    background-color: hsl(330, 100%, 98%);
    border-radius: 10px;
    padding: 10px 20px;
}

.preptime-header{
    font-family: "Outfit", serif;
    color: hsl(332, 51%, 32%);
}

/* li isn't really necessary*/
.preptime-bullets li::marker{
    /* Unicode for a bullet */
    /* content: "\2022"; */
    color:hsl(332, 51%, 32%);
    /* font-size: 25px;
    font-family: "Outfit"; */
}

/*gives all unordered lists (bullets) space*/
ul li{
    margin-bottom: 10px;
}

/*gives all ordered lists (numbers) space*/
ol li{
    margin-bottom: 10px;
}

.bullet_text{
    color: hsl(30, 10%, 34%);
    font-family: "Outfit", serif;
    font-size: 18px;
    padding-left: 20px;
}

.section-title{
    font-family: "Young Serif", serif;
    color: hsl(14, 45%, 36%);
    font-size: 30px;
}

.ingredients-bullets ::marker{
    color:hsl(14, 45%, 36%);
}

.instructions-bullets ::marker{
    font-weight: bold;
    color:hsl(14, 45%, 36%);
}

.nutrition-name{
    color: hsl(30, 10%, 34%);
    font-family: "Outfit", serif;
    font-size: 18px;
    padding-left: 20px;
}

.nutrition-numbers{
    font-family: "Outfit", serif;
    font-weight: bold;
    color:hsl(14, 45%, 36%);
    font-size: 16px;
    padding-block: 15px;
}

table {
    justify-content: space-between;
    width: 100%;
    /* border: 1px solid black; */
}

table td {
    text-indent: 2rem;
    border-bottom: 2px solid lightgray;
    padding: 1rem 0 1rem 0; /* top, right, bottom, left */
}

tr:last-child td{
    border-bottom: 0;
}

.measurements {
    font-family: "Outfit", serif;
    font-weight: bold;
    font-size: 16px;
    color: hsl(14, 45%, 36%);
}