html{font-size:5vh}@media screen and (min-height:400px){html{font-size:19px}}body{align-items:center;background-color:#28c9b3;display:flex;height:100vh;justify-content:center}@keyframes swimming{0%,to{transform:translateX(0)}22.5%{transform:translateX(2.5rem) skewY(-5deg)}45%{transform:translateX(6rem) translateY(-1rem) skewY(5deg)}55%{transform:translateX(5rem) translateY(-.5rem) scaleX(-1)}95%{transform:translateX(0) scaleX(-1) skewY(10deg)}}@keyframes dead{0%,to{transform:translateX(2.5rem)}22.5%{transform:translateX(2.5rem) translateY(-1rem) skewY(-5deg)}45%{transform:translateX(2.5rem) skewY(5deg)}55%{transform:translateX(2.5rem) translateY(-1rem) skewY(-5deg)}95%{transform:translateX(2.5rem) skewY(5deg)}}.fishbowl{height:15rem;position:relative;width:15rem}.fishbowl__background{background:linear-gradient(#0000 10%,#fff 150%);border-bottom:1px solid #fff;border-radius:50% 50% 40% 40%;height:100%;position:relative;width:100%}.fishbowl:before{border-radius:50%;bottom:9.5rem;box-shadow:-4rem 10rem 1rem 0 #0000384d;content:"";height:30%;left:2rem;position:absolute;transform:rotate(5deg);width:100%}.fishbowl:after{background:linear-gradient(135deg,#0000 50%,#fff 150%);border-radius:40%;content:"";height:85%;left:2.5%;position:absolute;top:12.5%;width:95%}.fishbowl__bottom{background:linear-gradient(#f5fccd,#ff7d66 200%);border-radius:50%;bottom:5%;height:20%;left:17.5%;position:absolute;width:65%}.fishbowl__decoration{height:75%;left:5%;position:absolute;top:20%;width:90%}.fishbowl__seaweed{border-bottom:5rem solid #80c0a1;border-left:.5rem solid #0000;border-right:.5rem solid #0000;height:0;position:absolute;width:0}.fishbowl__seaweed--1{border-bottom:5rem solid #80c0a1;bottom:15%;right:20%}.fishbowl__seaweed--2{border-bottom:8rem solid #80c0a1;bottom:10%;right:30%}.fishbowl__seaweed--3{border-bottom:6rem solid #80c0a1;bottom:15%;right:40%}.fishbowl__water{border-radius:40% 40% 4.8rem 4.8rem;bottom:5%;height:80%;left:5%;overflow:hidden;position:absolute;transition:height .3s ease;width:90%}.fishbowl__water-color{background:linear-gradient(#0000 -50%,#419197 250%);border-radius:20% 20% 4rem 4rem;bottom:0;height:90%;height:calc(1%*var(--filling, 90));left:0;position:absolute;transition:height .5s linear;width:100%}.fishbowl__water-color:after{background:linear-gradient(#0000,#419197 250%);border-radius:50%;box-shadow:inset 0 -1px 0 0 #ffffff80;content:"";height:3rem;left:5%;position:absolute;top:0;width:90%}.fishbowl__top{box-shadow:0 2px 2px 3px #ffffff4d;height:20%;left:15%;top:5%;width:70%}.fishbowl__fish,.fishbowl__top{border-radius:50%;position:absolute}.fishbowl__fish{animation:swimming;animation-duration:5s;animation-fill-mode:forwards;animation-iteration-count:infinite;background:linear-gradient(#fff -200%,orange);bottom:25%;box-shadow:0 2rem 4px -2px #0000384d;height:1rem;left:18%;transition-duration:1s;transition-property:bottom,transform,box-shadow;transition-timing-function:ease;width:2rem}.fishbowl__fish:after{background:radial-gradient(circle at 0 0,#fff -100%,#12486b);border-radius:50%;content:"";height:.25rem;position:absolute;right:15%;top:15%;transition:height .5s ease;width:.25rem}.fishbowl__fish--dying{bottom:10%}.fishbowl__fish--dying,.fishbowl__fish--dying .fishbowl__fish-tail{box-shadow:0 1rem 4px -2px #0000384d}.fishbowl__fish--dead{animation:dead;animation-duration:2s;animation-fill-mode:forwards;animation-iteration-count:2;box-shadow:none}.fishbowl__fish--dead .fishbowl__fish-tail{box-shadow:none}.fishbowl__fish--dead:after{height:.125rem}.fishbowl__fish--floating{animation:none;bottom:max(-15%,10%);bottom:max(calc(var(--filling, 0)*1% - 15%),10%);box-shadow:none;transform:translateX(2.5rem)}.fishbowl__fish--floating:after{height:2px}.fishbowl__fish--floating .fishbowl__fish-tail{box-shadow:none}.fishbowl__fish-tail{border-bottom:.5rem solid #0000;border-left:.94rem solid orange;border-top:.5rem solid #0000;box-shadow:0 2rem 4px -2px #0000384d;height:0;left:-.75rem;position:absolute;top:0;transition:box-shadow 1s ease;width:0}.fishbowl__pool{background:linear-gradient(#fff -100%,#419197);bottom:-5%;height:15%;right:0}.fishbowl__pool,.fishbowl__pool:after{border-radius:50%;opacity:.5;position:absolute;width:50%}.fishbowl__pool:after{animation:wave;animation-duration:3s;animation-iteration-count:infinite;border-right:2px solid #fff;content:"";height:50%;left:25%;top:25%}@keyframes wave{0%{height:50%;left:25%;top:25%;width:50%}to{height:80%;left:10%;top:10%;width:80%}}.fishbowl__tap{bottom:0;cursor:pointer;height:15.9rem;left:-3rem;position:absolute;width:12rem}.fishbowl__tap--active .fishbowl__tap-stream{animation:stream;animation-duration:.5s}@keyframes stream{0%{height:0}50%{height:calc(14rem - var(--filling)*.1rem);top:2rem}to{height:0;top:calc(16rem - var(--filling)*.1rem)}}.fishbowl__tap--active .fishbowl__tap-handle{animation:handle;animation-duration:.5s}@keyframes handle{0%{transform:rotate(45deg)}to{transform:rotate(405deg)}}.fishbowl__tap-base{background:linear-gradient(#919ea3,#66777f 150%);border-radius:0 0 1.2rem 1.2rem;bottom:0;box-shadow:inset -1px -1px 0 0 #ffffff80;height:14rem;left:0;position:absolute;width:2rem}.fishbowl__tap-base:before{border-radius:1rem 1rem 0 0;bottom:4rem;box-shadow:-4rem 10rem 1rem 0 #0000384d;content:"";height:100%;position:absolute;right:15rem;transform:rotate(-70deg);width:100%;z-index:-1}.fishbowl__tap-base:after{background:linear-gradient(90deg,#0000,#fff6 60%,#0000 200%);border-radius:0 0 1.2rem 1.2rem;bottom:0;content:"";height:100%;left:0;position:absolute;width:100%}.fishbowl__tap-handle{background:radial-gradient(circle at 0 0,#fff -100%,#919ea3);border-radius:.2rem;border-right:1px solid #ffffff80;border-top:1px solid #fff;bottom:6rem;height:2rem;left:-1rem;position:absolute;transform:rotate(45deg);width:2rem}.fishbowl__tap-handle:after{background:radial-gradient(circle at 0 0,#fff -200%,#419197);border-radius:50%;content:"";height:1rem;left:.5rem;position:absolute;top:.5rem;width:1rem}.fishbowl__tap-stream{background:linear-gradient(#fff -100%,#419197);border-radius:1rem;height:0;left:6.25rem;opacity:.3;position:absolute;top:2rem;width:1.5rem}.fishbowl__tap-head{border-left:2rem solid #919ea3;border-radius:50% 50% 0 0;border-right:2rem solid #919ea3;border-top:2rem solid #919ea3;box-shadow:1px -1px 0 0 #fff;height:0;left:0;position:absolute;top:0;width:4rem}.fishbowl__tap-head:before{bottom:3rem;box-shadow:-4rem 10rem 1rem 1rem #0000384d;content:"";height:200%;position:absolute;right:23rem;transform:rotate(2deg) skewX(60deg);width:150%;z-index:-1}.fishbowl__tap-head:after{background:linear-gradient(#0000,#fff6 60%,#0000 200%);border-radius:50% 50% 0 50%;content:"";height:2rem;left:-2rem;position:absolute;top:-2rem;width:8rem}.fishbowl__tap-end{background:linear-gradient(#fff -70%,#919ea3);border-radius:50%;height:1rem;left:6rem;position:absolute;top:1.5rem;width:2rem}.fishbowl__tap-text{color:#fff;font-family:Arial,sans-serif;font-size:.875rem;left:-6rem;position:absolute;top:4rem}.fishbowl__tap-text:after{background-color:#fff;bottom:-1rem;content:"";height:1px;position:absolute;right:-1rem;transform:rotate(45deg);width:2rem}@media screen and (max-width:420px){.fishbowl{left:13%}.fishbowl__tap-text{left:-3.5rem;top:1rem;width:2rem}}
/*# sourceMappingURL=main.9f7a7162.css.map*/