@import"https://fonts.googleapis.com/css2?family=Lato&family=Montserrat&family=Mulish&family=Roboto&display=swap";*{box-sizing:border-box;margin:0;padding:0}#root{display:flex;align-items:center;justify-content:center;flex-direction:column;overflow:hidden;margin:20px;text-align:center}body{background:#3494e4;color:#fff;font-family:Montserrat,sans-serif;font-size:16px;display:flex;flex-direction:column;align-items:center;margin-top:2rem}h1{margin:10px 0;padding:20px 0;color:transparent;animation:blur-in 1s forwards}@keyframes blur-in{0%{color:transparent;text-shadow:0 0 40px white}to{color:#fff;text-shadow:none}}h2{font-weight:400;margin:10px 0}@keyframes typing{0%{width:0}to{width:100%}}h2.typing:after{content:"|";margin-left:5px;display:inline-block;animation:typing 3s steps(40,end),blink-caret .1s step-end infinite}@keyframes blink-caret{0%,to{border-color:transparent}50%{border-color:#000}}h3{font-weight:400;margin:10px 0}p{text-align:center;margin-bottom:10px}.cup{display:flex;align-items:center;justify-content:center;background:#fff;border:4px solid #144fc6;color:#144fc6;border-radius:0 0 40px 40px;height:330px;width:150px;margin:30px;flex-direction:column;overflow:hidden;text-align:center}.cup.cup-small{height:95px;width:50px;border-radius:0 0 15px 15px;background:rgba(255,255,255,.9);cursor:pointer;font-size:14px;text-align:center;margin:5px;transition:.3s ease-in-out}.cup.cup-small.full{background:#6ab3f8;color:#fff}.cups{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;width:280px}.remaining{display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;flex:1;transition:.3s ease}.remaining.span{font-size:1.5rem;font-weight:700}.remaining.small{font-size:1rem}.percentage{background-color:#6ab3f8;color:#fff;width:100%;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;height:0;transition:.3s ease}.water-level{display:flex;align-items:center;justify-content:center;flex-direction:column;justify-content:flex-end;height:100%;width:100%;transition:.3s ease}.initialValue{font-size:2rem}@media (max-width: 667px){h1{margin:0 auto;text-align:center}}