@import url(https://fonts.googleapis.com/css?family=Montserrat:400,600&display=swap);
:root{--border-color: #144fc6;--fill-color: #6ab3f8}*{box-sizing:border-box}body{background-color:#3494e4;color:#fff;font-family:"Montserrat",sans-serif;display:flex;flex-direction:column;align-items:center;margin-bottom:40px}h1{margin:10px 0 0}h3{font-weight:400;margin:10px 0}.cup{background-color:#fff;border:4px solid var(--border-color);color:var(--border-color);border-radius:0 0 40px 40px;height:330px;width:150px;margin:30px 0;display:flex;flex-direction:column;overflow:hidden}.cup.cup-small{height:95px;width:50px;border-radius:0 0 15px 15px;background-color:hsla(0,0%,100%,.9);cursor:pointer;font-size:14px;align-items:center;justify-content:center;text-align:center;margin:5px;transition:.3s ease}.cup.cup-small.full{background-color:var(--fill-color);color:#fff}.cups{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;width:280px}.remained{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;flex:1;transition:.3s ease}.remained span{font-size:20px;font-weight:bold}.remained small{font-size:12px}.percentage{background-color:var(--fill-color);display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:30px;height:0;transition:.3s ease}.text{text-align:center;margin:0 0 5px}