recipe-page/public/styles/main.css

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Young+Serif&display=swap');

/* Style Guide */

/* ## Layout */

/* The designs were created to the following widths: */

/* - Mobile: 375px */
/* - Desktop: 1440px */

/* ## Colors */

/* ### Primary */

/* - Nutmeg: hsl(14, 45%, 36%) */
/* - Dark Raspberry: hsl(332, 51%, 32%) */

/* ### Neutral */

/* - White: hsl(0, 0%, 100%) */
/* - Rose White: hsl(330, 100%, 98%) */
/* - Eggshell: hsl(30, 54%, 90%) */
/* - Light Grey: hsl(30, 18%, 87%) */
/* - Wenge Brown: hsl(30, 10%, 34%) */
/* - Dark Charcoal: hsl(24, 5%, 18%) */

/* ## Typography */

/* ### Body Copy */

/* - Font size (paragraph): 16px */

/* ### Fonts */

/* - Family: [Young Serif](https://fonts.google.com/specimen/Young+Serif) */
/* - Weights: 400 */

/* - Family: [Outfit](https://fonts.google.com/specimen/Outfit) */
/* - Weights: 400, 600, 700 */

:root {
  --nutmeg: hsl(14, 45%, 36%);
  --dark_raspberry: hsl(332, 51%, 32%);

  --white: hsl(0, 0%, 100%);
  --rose_white: hsl(330, 100%, 98%);
  --eggshell: hsl(30, 54%, 90%);
  --light_grey: hsl(30, 18%, 87%);
  --wenge_brown: hsl(30, 10%, 34%);
  --dark_charcoal: hsl(24, 5%, 18%);
}

/* @font-face { */
/*   src: url('https://fonts.googleapis.com/css2?family=Young+Serif&display=swap'); */
/*   font-family: YoungSerif; */
/* } */

/* @font-face { */
/*   src: url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Young+Serif&display=swap'); */
/*   font-family: Outfit; */
/* } */


/* makes sizing simpler */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* remove default spacing */
/* force styling of type through styling, rather than elements */
* {
  margin: 0;
  padding: 0;
  font: inherit;
  border: 0;
  list-style: none;
  text-decoration: none;
  border: none;
}

/* min body height */
body {
  min-height: 100vh;
  font-size: 16px;
  margin: auto;
}

/* responsive images/videos */
img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

.header {
  width: 100%;
}

.main {
  margin: 1.5rem;
  font-family: Outfit;
  color: var(--wenge_brown);
}

.main-hdg-1 {
  font-size: 2rem;
  font-family: "Young Serif";
  line-height: 2rem;
}

.main-hdg-2 {
  color: var(--dark_raspberry);
  font-size: 1.8rem;
  font-family: "Young Serif";
}

.main-hdg-3 {
  color: var(--dark_raspberry);
  font-size: 1.2rem;
  font-weight: 700;
}

.main-intro p {
  margin: 2rem auto;
}

.main-prep {
  background-color: var(--rose_white);
  padding: 2rem;
  border-radius: 12px;
  line-height: 2rem;
  margin: 0.6rem;
}

h4 {
  display: inline;
  font-weight: 700;
}

.main-prep li {
  list-style: disc inside;
}

.main-ingredients {
  margin-top: 1.8rem;
}

.main-ingredients ul {
  padding-left: 1.6rem;
  border-bottom: 1px solid var(--light_grey);
}
.main-ingredients li {
  list-style: disc outside;
  margin: 1rem auto;
}

.main-instructions {
  margin-top: 2rem;
  border-bottom: 1px solid var(--light_grey);
}

.main-instructions ol {
  padding-left: 1.6rem;
}

.main-instructions li {
  list-style: decimal outside;
  margin: 1.2rem auto;
}

.main-nutrition {
  margin-top: 1.8rem;
}

.main-nutrition p {
  margin: 1.2rem auto;
}

.main-nutrition-table {
  margin: 1.4rem 2rem;
}

.main-nutrition-trow {
  width: 80vw;
  line-height: 2rem;
  border-bottom: 8px solid var(--light_grey);
}

.item,
.value {
  width: 30vw;
}

.value {
  font-weight: 700;
  color: var(--dark_raspberry);
}


.attribution { 
  margin-top: 1.2rem;
  font-size: 11px; 
  text-align: center; 
  padding-bottom: 1rem;
}

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

@media only screen and (min-width: 980px) {
  html {
    /* max-width: 1440px; */
    background-color: var(--eggshell);
  }
  body {
    width: 50vw;
    margin: 1rem auto;
    background-color: var(--white);
    padding: 1.4rem;
    border-radius: 12px;
  }
  .header {
    width: 100%;
  }
  .header-img {
    border-radius: 12px;
  }
}