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

: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%);

  --Blue: hsl(228, 45%, 44%);
}

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body {
  background-color: var(--Eggshell);
  border-radius: 8px;
  min-height: 100vh;
  font-family: "Young Serif", serif;
  font-weight: 400;
  font-size: 16px;
}

.main-card {
  height: 95%;
  max-width: 700px;
  background-color: var(--White);
  padding: 30px;
  margin: 50px auto;
  border-radius: 15px;
}

img {
  max-width: 100%;
  border-radius: 8px;
}

h1 {
  font-weight: 500;
  margin: 20px 0px 20px 0px;
  font-size: 37px;
}

.omellete-intro {
  line-height: 20px;
  font-family: "outfit", sans-serif;
}
ul li {
  padding-left: 12px;
}
.preparation-time {
  line-height: 30px;
  background-color: hsla(31, 53%, 90%, 0.322);
  margin: 20px 0px 20px 0px;
  border-radius: 8px;
}
h4 {
  padding: 20px 0px 0px 50px;
  margin-left: -20px;
  color: var(--Dark-Raspberry);
}
.preparation-list {
  padding: 0px 0px 20px 70px;
  font-family: "outfit", sans-serif;
  margin-left: -20px;
}
.ingredients {
  line-height: 30px;
  border-bottom: 1px solid var(--Light-Grey);
  margin-bottom: 20px;
}
span {
  font-weight: 700;
}

h2 {
  margin-bottom: 20px;
  font-weight: 500;
  color: var(--Nutmeg);
}
.ingredients-list {
  padding-left: 25px;
  font-family: "outfit", sans-serif;
  font-size: 16px;
  padding-bottom: 20px;
}
.instructions {
  line-height: 20px;
  border-bottom: 1px solid var(--Light-Grey);
  margin-bottom: 20px;
}
.instructions h2 {
  margin-top: 30px;
}
.instructions-list {
  padding-left: 25px;
  font-family: "outfit", sans-serif;
  padding-bottom: 20px;
  font-size: 16px;
}
ol li {
  padding-left: 14px;
  padding-top: 14px;
}
ol li::marker {
  font-weight: 700;
  color: var(--Nutmeg);
}
ol li span {
  color: var(--Nutmeg);
}

.nutrition-desc {
  font-family: "outfit", sans-serif;
  font-size: 16px;
}

table {
  width: 100%;
  font-family: "outfit", sans-serif;
  font-size: 16px;
  border-collapse: collapse;
}
td {
  padding: 20px 0px 20px;
  border-bottom: 1px solid var(--Light-Grey);
  padding-left: 40px;
}
.third-table {
  border-bottom: none;
}
.last-table-row {
  border: none;
}
.cal {
  color: var(--Nutmeg);
}

.attribution {
  font-size: 16px;
  text-align: center;
  font-family: "outfit", sans-serif;
}
.attribution a {
  color: var(--Blue);
}

/*Mobile Version*/

@media (max-width: 1000px) {
  .main-card {
    background-color: white;
    max-width: 100%;
    padding: 0px;
    margin: 0px 0px 30px 0px;
  }
  .mobile-card {
    padding: 0px 30px;
  }
}