.theme-car { --bg: orange; }
.theme-fat { --bg: yellow; }
.theme-pro { --bg: pink; }
.theme-min { --bg: silver; }
.theme-vit { --bg: yellowgreen; }
.theme-wat { --bg: cornflowerblue; }
.theme-oth { --bg: rebeccapurple; }
.theme-ene { --bg: darkred; }

main { background-color: white; }
article { height: 100%; padding: var(--m); overflow: auto; }

@media screen and (max-width: 970px) {
   article h1 { margin-top: calc(2 * var(--m)); }
}

.nutrient-selection { margin: 0.5em 0; padding: 0.5em; background-color: color-mix(in lab, var(--bg), white 80%); border-radius: var(--m); text-align: center; }

.nutrient-selection ul { margin: 0.5em; list-style: none; display: flex; justify-content: center; gap: 0.5em; flex-wrap: wrap; padding: 0; }
.nutrient-selection li { height: 5ch; width: 20ch; background-color: color-mix(in lab, var(--bg), white 90%); border-radius: var(--m); display: flex; justify-content: center; align-items: center; transition: background 0.3s ease-in-out; cursor: pointer; }
.nutrient-selection li:hover { background-color: color-mix(in lab, var(--bg), white 60%); }
.nutrient-selection li svg { display: none; height: 1em; width: 1em; }

article.nutrient-detail { position: relative; }
article.nutrient-detail h2 { text-align: center; }
article.nutrient-detail .close-detail { position: absolute; top: var(--m); right: var(--m); }
article.nutrient-detail { background-color: color-mix(in lab, var(--bg), white 90%); }

.food-source-item { display: grid; grid-template-columns: 1fr 2fr; align-items: center; gap: 0.5em; }

::view-transition-group(nutrient-item) {
  animation-duration: .1s;
  border-radius: var(--m);
  width: 100%;
}