diff --git a/stylesheet/style.css b/stylesheet/style.css index 3075761..896acb3 100644 --- a/stylesheet/style.css +++ b/stylesheet/style.css @@ -1,18 +1,18 @@ -@media (min-width: 768px) { - .recipe-box img { - width: 80%; - } -} - -@media (max-width: 767px) { +@media (max-width: 600px) { .recipe-box img { width: 100%; } + .recipe-box { + min-width: 100vw; + min-height: 100vh; + } + body { + margin: 0; + } } body { background-color: hsl(30, 54%, 90%); - min-height: 100vh; display: flex; flex-direction: column; justify-content: center; @@ -21,9 +21,9 @@ body { .recipe-box { background-color: hsl(0, 0%, 100%); width: 50%; - text-align: left; padding: 2em; margin: 6em; + border-radius: 10px; } .recipe-box img { width: 100%; @@ -46,11 +46,7 @@ body { padding: 1.25em; line-height: 2em; } -.preparation-box li { - padding-left: 1em; - margin-left: -0.5em; - font-size: 1.1em; -} + .preparation-box span { color: hsl(332, 51%, 32%); font-size: 1.3em; @@ -58,33 +54,23 @@ body { margin-left: -2em; } -.ingredients span { - color: hsl(14, 45%, 36%); - font-weight: 700; - font-size: 1.8em; - margin-left: -1.5em; -} -.ingredients li { - margin-left: -1em; - padding-left: 1em; - font-size: 1.1em; - color: hsl(30, 10%, 34%); - line-height: 1.5em; -} - +.ingredients span, .instructions span { color: hsl(14, 45%, 36%); font-weight: 700; font-size: 1.8em; - margin-left: -1.5em; + margin-left: -1.45em; } -.instructions li { +.ingredients li, +.instructions li, +.preparation-box li { margin-left: -1em; padding-left: 1em; font-size: 1.1em; color: hsl(30, 10%, 34%); line-height: 1.5em; } + .instructions li::marker { color: hsl(14, 45%, 36%); font-weight: 700;