style.css

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap");.main{display:-webkit-box;display:-ms-flexbox;display:flex;font-family:Roboto}.main #ingredients{width:25%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.main #ingredients .roll{visibility:hidden}.main #ingredients.showRoll .roll{visibility:visible}.main #shaker{width:25%}.main #shaker .roll{visibility:hidden}.main #shaker.showRoll .roll{visibility:visible}.main #rules{width:25%}.main #rules .multiplier{visibility:hidden;display:inline;float:right;margin-right:10px}.main #rules .rule{background:#83c2da;margin:5px;padding:5px;padding-left:10px;border-radius:15px;border-style:solid;border-color:#a6d7ea;border-width:4px;color:#fff}.main #rules .rule.true{background:#97d697}.main #rules .rule.true .multiplier{visibility:visible}.main #rules .bonus{background:#d6c25f;margin:5px;padding:5px;padding-left:10px;border-radius:15px;border-style:solid;border-color:#caab3e;border-width:4px;color:#fff}.main #rules .bonus.true{background:#ffce1b;border-color:#ffb65b}.main #rules .bonus.true .multiplier{visibility:visible}.main #rules .input{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.main #rules .input #range{margin:10px}.main #rules .input #rangeValue{font-size:35px;font-weight:bold}.main #rules .input #rangeValue.false{color:#f00}.main #drink{width:25%;display:-webkit-box;display:-ms-flexbox;display:flex}.main #drink #result{text-align:center;margin-top:50px}.main #drink #result #drinkName{font-size:50px}.main #drink #result #score{font-size:40px}.main .ingredient{background:#699acc;border-radius:5px;width:250px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;display:-webkit-box;display:-ms-flexbox;display:flex;margin:5px}.main .ingredient:hover{cursor:pointer}.main .ingredient .left{margin-left:10px}.main .ingredient .name{font-size:35px;color:#fff}.main .ingredient .dice{font-size:20px}.main .ingredient .roll{font-weight:bold;font-size:60px;margin-right:15px;color:#000}