body{--focus-border-color:#38a4eb;background-color:#dee3e7;font-family:sans-serif;padding:0;margin:0;font-size:1.5em}p{padding:0;margin:.5em}.food{font-family:sans-serif;border:1px solid #000;padding:1em;margin:.2em;background-color:lightgreen}.food:hover{background-color:limegreen}button{font-size:.8em;background-color:#fff;border:.05em solid #000;padding:.5em;cursor:pointer}.bad{background-color:salmon}.good{background-color:limegreen}button:hover{filter:brightness(180%);transition:all .3s ease}ol{padding:0;margin:0}header{display:flex;flex-direction:row;background-color:#000;color:#fff;padding:.4em;align-items:center;box-shadow:0 8px 16px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19)}h1{font-size:1em;margin:0;margin-right:1em;padding:.2em;flex-grow:2}content{margin:0}food-item div{background-color:#fff;font-family:sans-serif;margin-bottom:.5em;display:flex;align-items:center;box-shadow:0 8px 16px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19)}food-item div input,food-item div span,food-item div button{margin:.2em}input{font-size:1em;font-family:sans-serif;border:0;border-bottom:.1em dashed #a8c7d4}input:hover{background-color:beige}input:focus{outline:0;border-bottom:.1em solid var(--focus-border-color)}button:focus{outline:.1em solid var(--focus-border-color)}input[type=number]{text-align:center}span{color:gray}.prefix{color:#000;font-weight:700}food-item p{margin:0;padding:0}footer{margin-top:2em;padding .5em;text-align:center;font-size:.5em}