.attribution {
  font-size: 0.6875rem;
  text-align: center;
}

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

/* 1. layout of everything */

html,
body {
  font-family: "Outfit";
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--stone-100);
  color: var(--stone-600);
}

.container {
  max-width: 1440px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.recipe {
  max-width: 700px;
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5% 5%;
  gap: 24px;
  border-radius: 12px;
}

p {
  font-size: 16px;
}

/* 2. Design stuff */

.meal-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
}


.meal-header {
  font-family: "Young Serif";
  color: var(--stone-900);
}

.meal-title {
  font-family: "Young Serif";
  color: var(--brown-800);
}


.meal-img {
  width: 100%;
  border-radius: 12px;
}

.meal-prep {
  background-color: var(--rose-50);
  padding: 5%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

ul , ol {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 1rem;
}

li::marker {
  color: var(--rose-800);
}

.prep-info {
  font-weight: 700;
}

.prep-title {
  color: var(--rose-800);
  font-weight: 700;
}

.section-sep {
  color: hsl(0, 0%, 91%);
}

.ingd-list .ingd-elem::marker {
  color: var(--brown-800);
  font-weight: 700;
}

.nutr-table {
  border-collapse: collapse;
  width: 100%;
}

.nutr-table tbody tr td {
  padding: 0.75rem;
}

.nutr-table tbody tr {
  border-bottom: 1px solid var(--stone-600);
}

.nutr-table tbody tr:last-child {
  border-bottom: none;
}

.table-stat {
    color: var(--brown-800);
    font-weight: 700;
}

@media screen and (max-width : 600px ){
    .recipe {
        width: 100%;
        height: 100%;
    }
}