:root{--box-shadow:0 4px 8px #0000001a;--border:1px solid darkgrey;--border-radius:10px;--button-color:midnightblue;--button-hover-color:darkgoldenrod;--button-text-color:whitesmoke;--pill-ingredient-bg:lightgreen;--pill-ingredient-text:darkslategrey;--pill-allergen-bg:lightcoral;--pill-allergen-text:darkslategrey}*{box-sizing:border-box;margin:0;padding:0}header{justify-content:space-between;align-items:center;margin-bottom:20px;font-family:Henny Penny,system-ui;font-style:normal;font-weight:400;display:flex}header img{height:150px}body{margin:50px;font-family:Lucida Sans,Lucida Sans Regular,Lucida Grande,Lucida Sans Unicode,Geneva,Verdana,sans-serif}h1,h2{margin-bottom:10px;line-height:2rem}main li{border-radius:var(--border-radius);height:25px;margin:5px;padding:5px;list-style:none;display:inline-flex}button{background-color:var(--button-color);border:var(--border);border-radius:var(--border-radius);color:var(--button-text-color);margin:2px;padding:6px;font-weight:700}button:hover{background-color:var(--button-hover-color);color:#000;transition:background-color .2s ease-in-out}button.call-to-action{justify-content:center;align-items:center;margin:0 auto 10px;padding:10px;font-size:1rem;display:flex}button.call-to-action:before{content:"👨‍🍳";margin-right:8px}.authentication{width:500px;box-shadow:var(--box-shadow);border:1px solid #000;border-radius:10px;flex-direction:column;justify-content:space-around;align-items:center;margin:0 auto;padding:30px;display:flex}.authentication img{width:450px;height:auto;margin-bottom:20px}.authentication button{border:none;border-radius:5px;margin:0 auto;padding:10px 20px}.authentication button:hover{color:#000;cursor:pointer;background-color:#b8860b}.authentication input{margin-bottom:20px}.user-panel{border:var(--border);width:200px;box-shadow:var(--box-shadow);border-radius:var(--border-radius);background-color:#f5f5f5;flex-direction:column;align-items:center;padding:1rem;font-family:Arial,Helvetica,sans-serif;font-size:.9rem;font-weight:400;display:flex}main{flex-direction:row;justify-content:space-between;align-items:stretch;gap:10px;display:flex}.ingredients,.allergenics{border:var(--border);border-radius:var(--border-radius);width:50%;box-shadow:var(--box-shadow);background-color:#f5f5f5;flex-direction:column;margin-bottom:10px;padding:20px;display:flex}.pill{flex-flow:wrap;align-items:center;gap:10px;display:flex}.pill-btn{cursor:pointer;border:none;border-radius:999px;padding:10px 20px;font-size:14px;transition:transform .2s,box-shadow .2s;display:inline-block;position:relative}.pill-btn.ingredient{background-color:var(--pill-ingredient-bg);color:var(--pill-ingredient-text)}.pill-btn.allergen{background-color:var(--pill-allergen-bg);color:var(--pill-allergen-text)}.pill-btn:hover{transform:scale(1.05);box-shadow:0 6px 16px #0003}.pill-btn .icon{color:#e53935;opacity:0;background:#d3d3d3;border-radius:50%;flex-direction:row;justify-content:center;align-items:center;width:20px;height:20px;font-size:12px;transition:opacity .2s,transform .2s;display:flex;position:absolute;top:-6px;right:-6px;transform:scale(.8)}.pill-btn:hover .icon{opacity:1;transform:scale(1)}form{flex-direction:column;display:flex}form label{margin-bottom:5px}form input{border:var(--border);border-radius:var(--border-radius);margin-bottom:10px;padding:8px;font-size:1rem}form button{align-items:left;width:30%;min-width:150px;margin-bottom:20px}.recipe{border:var(--border);box-shadow:var(--box-shadow);border-radius:var(--border-radius);background-color:#f5f5f5;padding:20px;line-height:1.5rem;display:flex}.recipe li{margin-left:2rem}.recipe th,td{background-color:#d3d3d3}.recipe h1,h2,h3,h4,h5,h6{margin-top:5px;margin-bottom:15px}.parameters{border:var(--border);border-radius:var(--border-radius);box-shadow:var(--box-shadow);background-color:#f5f5f5;flex-direction:row;justify-content:space-between;margin-bottom:10px;padding:20px;display:flex}.parameters>div{align-items:left;flex-direction:column;justify-content:space-evenly;display:flex}.parameters label{margin-bottom:5px}.parameters input{border:var(--border);border-radius:var(--border-radius);margin-bottom:10px;padding:8px;font-size:1rem}
