@import url(components/nutrients-ingredient-view/nutrients-ingredient-view.css);
@import url(components/nutrients-sum-view/nutrients-sum-view.css);

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

html, body {
   margin: 0;
}

:root {
   --colourBg: rgb(250, 251, 254);
   --colourAccent: lightcoral;
   --colourAccentLight: hsl(0, 79%, 86%);
   --colourButton: hsl(225, 67%, 80%);
   --colourButtonHighlight: hsl(225, 67%, 70%);
   --colourButtonText: black;
   --fontMain: ui-rounded, "SF Pro Rounded", system-ui, san-serif;
}
 
body {
   font-family: var(--fontMain);
   background-color: var(--colourBg);
   -webkit-tap-highlight-color: transparent;
   user-select: none;
}

h1, h2, h3, h4, h5, h6 {
   font-weight: 600;
   line-height: 1em;
}
h1 {
   font-size: 1.6rem;
   font-weight: 800;
   margin-bottom: 1rem;
}
h2 {
   font-size: 1.4rem;
   margin-bottom: 0.75rem;
}
h3 {
   font-size: 1.2rem;
   margin-bottom: 0.5rem;
}
h4 {
   font-size: 1.1rem;
   margin-bottom: 0.5rem;
}
p {
   font-size: 1rem;
   line-height: 1em;
}
p:not(:last-child) {
   margin-bottom: 0.5rem;
}

textarea, input, button {
   font-size: 1em;
   font-family: var(--fontMain);
}
 
button {
   padding: 0.25em 0.5em;
   font-family: var(--fontMain);
   border: 2px solid transparent;
   border-radius: 0.3em;
   background-color: var(--colourButton);
   color: var(--colourButtonText);
   transition: background-color 0.3s ease;
   cursor: pointer;
   user-select: none;
}
button:hover {
   background-color: var(--colourButtonHighlight);
}

.nutrients-view {
   display: flex;
   flex-direction: column;
   height: 100vh;
}

.recipes-link {
   position: fixed;
   width: 2em;
   height: 2em;
   bottom: 1rem;
   right: 1rem;
   font-size: 2rem;
   background-color: hsl(0, 79%, 90%);
   border: 4px solid hsl(0, 79%, 72%);
   border-radius: 50%;
   box-shadow: 2px 2px 6px rgba(0,0,0,0.15);
   text-decoration: none;
   display: flex;
   justify-content: center;
   align-items: center;
}