body{font-family:Arial,Helvetica,sans-serif;margin:0;background-color:#222}.button-box,.header,.hover-tooltip,.result-box,.type{text-align:center}#pot-input,.result-box{font-size:110%;background:#111}.button-box,.rec,.type{cursor:pointer}#alchemy-calculator{overflow:hidden;font-family:Arial,Helvetica,sans-serif;background:#222;padding:20px}.hidden{display:none}.center,.result-head{display:flex;justify-content:center}.center{align-items:center}.header{color:#a9a9a9;margin:0}.result-head{align-items:center;gap:15px;margin-bottom:10px}.divider{width:30%;border:none;height:1px;color:#ff0;margin-top:20px;background-color:#ff0}.hover-tooltip-area{position:relative;border:2px solid #a9a9a9;border-radius:50%;width:10px;height:10px;padding:5px;display:inline-flex}.hover-tooltip{font-weight:900;color:#a9a9a9}.hover-tooltip-box {width:100vw;bottom:0;left:0; visibility:hidden;background-color:rgba(16,16,16,.9);color:#eee;padding:3px 15px; position:fixed;z-index:1}.hover-tooltip-area:active .hover-tooltip-box,.hover-tooltip-area:hover .hover-tooltip-box{visibility:visible}.choose-type{margin:0 0 15px;display:flex;justify-content:center;background:inherit}.type{flex:0 1 200px;color:gray;padding:5px 0;background:#1d1d1d}.button,.type:hover{color:#fff}.type:first-child{border-radius:3px 0 0 3px}.type:last-child{border-radius:0 3px 3px 0}.type.selected{background-color:#1a1a1a;border:1px solid #1a1a1a;border-bottom:1px solid #ff0}.choice-box{display:flex;flex-direction:column;align-items:center;gap:10px}.button-box{display:flex;width:80%;justify-content:center;gap:1px}.choices{flex-wrap:wrap;justify-content:center}.button{padding:5px;border:1px solid #000;border-radius:2px}.ingredient{flex:0 1 150px;background:#1a299a}.ingredient.selected{background-color:#171765;border-color:#ff0}.ingredient:hover{background-color:#3240a7}.choice{flex:0 0 150px;background:#9a1d1d}.choice.selected{background-color:#681c1c;border-color:#ff0}.choice:hover{background-color:#984242}.choice.pot{flex:0 0 200px}.result-box{color:#a9a9a9;width:350px;border-radius:10px;margin:0 auto;padding:10px}.result-box ul{list-style-type:none;margin:0;padding:0}.result-box ul li:not(:last-child){margin-bottom:3px}.rec{background:#adff2f;color:#000;padding:0 4px;border-radius:2px}.rec-colour{color:#adff2f}.dropdown-content{width:400px}#pot-input{--padding:15px;border:0;padding:var(--padding);width:calc(100% - 2 * var(--padding));color:#a9a9a9}.pot-list{display:none;color:#a9a9a9;max-height:200px;overflow-y:scroll;position:absolute}.pot-list div{background:#111;padding:5px;border:1px solid #111}.pot-list div:hover{cursor:pointer;background:#222;border:1px solid #ff0}#pot-input:focus~.pot-list,#pot-input:hover~.pot-list,.pot-list div:focus,.pot-list div:hover,.pot-list:focus,.pot-list:hover{display:block}footer{color:#fff;text-align:center}footer a{color:#fff}