.attribution { font-size: 11px; text-align: center; } .attribution a { color: hsl(228, 45%, 44%); } /*CSS variables or global values --------------------------------- Global variables are defined using :root :root is a special selector that represents the element.*/ :root{ /* colors */ --clr-white: hsl(0, 0%, 100%); --clr-stone-100: hsl(30, 54%, 90%); --clr-stone-150: hsl(30, 18%, 87%); --clr-stone-600: hsl(30, 10%, 34%); --clr-stone-900: hsl(24, 5%, 18%); --clr-brown-800: hsl(14, 45%, 36%); --clr-rose-800: hsl(332, 51%, 32%); --clr-rose-50: hsl(330, 100%, 98%); /* typography */ --text-1-ys-regular: 40px/100% "Young Serif", serif; --text-2-ys-regular: 28px/100% "Young Serif", serif; --text-3-ot-semibold: 600 20px/100% "Outfit", sans-serif; --text-4-ot-regular: 400 16px/150% "Outfit", sans-serif; --text-4-ot-bold: 700 16px/150% "Outfit", sans-serif; /* letter-spacing */ --ls-0:0px; } /*Global Reset --------------- removes default browser spacing*/ *{ margin: 0; padding: 0; } /*Box sizing ------------- By default, browsers use content-box, which adds padding outside the width. border-box → width includes padding and borders*/ *, *::before, *::after { box-sizing: border-box; } .container{ max-width: 736px; width: 100%; display: flex; flex-direction: column; background-color: var(--clr-white); padding: 40px; border-radius: 24px; } body{ background-color: var(--clr-stone-100); display: flex; /* height: 100vh; */ min-height: 100vh; /* align-items: center; for vertical centering if content is smaller than vh */ justify-content: center; font-size: 16px; margin: 128px 48px 128px 48px; } .image{ display: block; /*removes inline spacing */ width: 100%; /* max-width: 656px; makes img small */ border-radius: 12px; margin-block-end: 40px; /*logical properties*/ } .h1-main{ padding-bottom: 24px; font: var(--text-1-ys-regular); letter-spacing: var(--ls-0); color: var(--clr-stone-900); } .p-main{ padding-bottom: 32px; } .prep-time{ background-color: var(--clr-rose-50); padding: 24px; } .prep-header{ color: var(--clr-rose-800); font: var(--text-3-ot-semibold); letter-spacing: var(--ls-0); padding-bottom: 16px; } .li-prep, .li-ing, .li-inst{ padding-left: 16px; /*using margin will move bullets as well*/ } .li-prep:not(:last-child), .li-ing:not(:last-child), .li-inst:not(:last-child){ padding-bottom: 8px; /*using margin creates inconsistent bullet alignment*/ } .ul-prep, .ul-ing, .ol-inst{ padding-left: 24px; /*can also use margin*/ } .li-prep::marker{ color: var(--clr-rose-800); font: var(--text-4-ot-bold); letter-spacing: var(--ls-0); } .h2-ing, .h2-inst, .h2-nutri{ margin-bottom: 24px; color: var(--clr-brown-800); font: var(--text-2-ys-regular); letter-spacing: var(--ls-0); } .li-ing::marker, table td, .li-inst::marker{ color: var(--clr-brown-800); font: var(--text-4-ot-bold); letter-spacing: var(--ls-0); } .ingredients, .instructions{ margin-bottom: 32px; padding-top: 32px; } .nutrition{ padding-top: 32px; } strong{ color: var(--clr-stone-600); font: var(--text-4-ot-bold); } .p-main, .li-prep, .li-ing, .li-inst, .ol-inst, .p-nutri, table th{ font: var(--text-4-ot-regular); color: var(--clr-stone-600); letter-spacing: var(--ls-0); } .p-nutri{ padding-bottom: 24px; } .th-nutri{ width: 288px; text-align: left; letter-spacing: var(--ls-0); padding-left: 32px; padding-right: 16px; } .td-nutri{ width: 288px; text-align: left; letter-spacing: var(--ls-0); padding-right: 32px; } .tr-nutri:not(:last-child){ border-bottom: 1px solid var(--clr-stone-150); } .tr-nutri:not(:last-child) td, .tr-nutri:not(:last-child) th{ padding-bottom: 12px; } .tr-nutri:not(:first-child) td, .tr-nutri:not(:first-child) th{ padding-top: 12px; } .t-nutri{ border-collapse: collapse; /*controls whether table cells share borders or stay separate*/ width: 100%; } .nutrition, .instructions{ border-top: 1px solid var(--clr-stone-150); } /* *{ outline: 1px solid red; } */ /*for tablets*/ @media(max-width:768px){ /*768px*/ .container{ max-width: 616px; /*616px*/ width: 100%; } .th-nutri, .td-nutri{ width: 228px; } } /* for mobiles*/ @media(max-width:375px){ .image{ border-radius: 0px; width: 100%; height: auto; } figure { margin: 0 -32px; /* cancels container padding */ } body{ margin: 0px; } .container{ max-width: 375px; width: 100%; border-radius: 0px; padding: 0px 32px 40px 32px; } }