@import url(https://fonts.googleapis.com/css2?family=Gaegu&display=swap);.stick-parent{position:relative;width:320px;margin:10px auto}.stick-parent .stick{transition:all 1s}.stick-parent.shuffle .stick{-webkit-animation:shuffle 4s 1.1s;animation:shuffle 4s 1.1s;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;position:absolute}.stick-parent.shuffle .stick.chosen{opacity:1!important;-webkit-animation:setChoice 4s 1.1s;animation:setChoice 4s 1.1s;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.stick-parent.reset .stick{position:absolute;top:0;transition:all 1s;opacity:1;z-index:1}.stick-parent.reset .stick.chosen{z-index:5;opacity:1!important}.cup{opacity:0;z-index:10;display:none}.cup.active{-webkit-animation:cup 4s 1.1s;animation:cup 4s 1.1s;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;opacity:0;display:block;position:relative;padding-bottom:100px}.cup.active:after{position:absolute;bottom:0;left:0;width:100%;height:400px;border-radius:80px;background:#fff;display:block;content:" ";z-index:1}.cup img{width:100%;display:block;position:relative;z-index:2;transform:scaleX(-1)}@-webkit-keyframes setChoice{20%{transform:rotate(90deg)}30%{transform:rotate(90deg) translateX(50%)}50%{transform:rotate(90deg) translateX(50%)}90%{z-index:5;opacity:1}to{transform:rotate(0deg) translateX(0)}}@keyframes setChoice{20%{transform:rotate(90deg)}30%{transform:rotate(90deg) translateX(50%)}50%{transform:rotate(90deg) translateX(50%)}90%{z-index:5;opacity:1}to{transform:rotate(0deg) translateX(0)}}@-webkit-keyframes shuffle{20%{transform:rotate(90deg)}30%{transform:rotate(90deg) translateX(50%)}50%{transform:rotate(90deg) translateX(50%)}79%{opacity:1}90%{opacity:0}to{transform:rotate(0deg) translateX(0);opacity:0}}@keyframes shuffle{20%{transform:rotate(90deg)}30%{transform:rotate(90deg) translateX(50%)}50%{transform:rotate(90deg) translateX(50%)}79%{opacity:1}90%{opacity:0}to{transform:rotate(0deg) translateX(0);opacity:0}}@-webkit-keyframes cup{0%{transform:translateY(300px);opacity:0}10%{opacity:1}30%{transform:translateY(0)}35%{transform:rotate(20deg)}36%{transform:rotate(20deg)}37%{transform:rotate(-20deg)}38%{transform:rotate(20deg)}39%{transform:rotate(-20deg)}40%{transform:rotate(20deg)}41%{transform:rotate(-20deg)}42%{transform:rotate(20deg)}43%{transform:rotate(-20deg)}44%{transform:rotate(20deg)}45%{transform:rotate(-20deg)}50%{transform:rotate(0deg);opacity:1}75%{transform:translateY(300px)}90%{opacity:1}to{transform:translateY(300px);opacity:0}}@keyframes cup{0%{transform:translateY(300px);opacity:0}10%{opacity:1}30%{transform:translateY(0)}35%{transform:rotate(20deg)}36%{transform:rotate(20deg)}37%{transform:rotate(-20deg)}38%{transform:rotate(20deg)}39%{transform:rotate(-20deg)}40%{transform:rotate(20deg)}41%{transform:rotate(-20deg)}42%{transform:rotate(20deg)}43%{transform:rotate(-20deg)}44%{transform:rotate(20deg)}45%{transform:rotate(-20deg)}50%{transform:rotate(0deg);opacity:1}75%{transform:translateY(300px)}90%{opacity:1}to{transform:translateY(300px);opacity:0}}.cup-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:1em}.cup-grid .cup-btn{width:100%;border:2px solid transparent;background:none;box-shadow:none;transition:all .25s}.cup-grid .cup-btn.current{background:#42b983}.cup-grid .cup-btn:hover{border-color:#000}.cup-grid .cup-btn img{max-width:100%}.cup-grid .cancel{grid-column:span 2}.overlay{display:flex;position:fixed;top:0;left:0;width:100%;height:100%;justify-content:space-around;align-items:center;background:rgba(0,0,0,.7)}.obox{display:block;max-height:calc(100vh - 210px);overflow-y:auto;background:#fff;padding:10px;width:100%;max-width:320px;box-shadow:0 2px 4px -2px rgba(0,0,0,.6);border-radius:10px}.obox h3{margin:10px}.fade-modal-enter-active,.fade-modal-leave-active{transition:all .5s}.fade-modal-enter-active .obox,.fade-modal-leave-active,.fade-modal-leave-active .obox{transition:all .5s .25s}.fade-modal-leave-active .obox{transition:all .5s}.fade-modal-enter{opacity:0}.fade-modal-enter .obox{opacity:0;transform:translateY(40px)}.fade-modal-leave-to{opacity:0}.fade-modal-leave-to .obox{transform:translateY(40px)}h1{font:normal 28px Gaegu,cursive,sans-serif;text-decoration:underline;transition:opacity .5s}h1.hide{opacity:0}h3{margin:40px 0 0}ul{list-style-type:none;padding:0}ul li{display:inline-block;margin:0 10px}a{color:#42b983}.buttons{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"add add" "opt clear" "pick pick";max-width:320px;margin:0 auto;grid-gap:1em}.buttons button{width:100%;margin:0}.buttons .addstick{grid-area:add;height:44px;margin:0 auto;padding:2px 30px 2px 10px;background:linear-gradient(hsla(0,0%,100%,.5),hsla(0,0%,100%,.5)),transparent url(../img/stick1.94d0fdff.jpg) no-repeat 50%;background-size:contain;border-radius:20px;display:flex;align-items:center;border:none;font-size:24px;font-weight:700;transition:all .25s}.buttons .addstick:hover{transform:scale(1.1)}.buttons .options-btn{grid-area:opt}.buttons .reset{grid-area:clear}.buttons .pick-btn{grid-area:pick;margin:0;width:100%;border-radius:8px;padding:10px;background:#cfc;font-weight:700}button{margin:10px auto;padding:1px 10px;background:#ffc;border:1px solid #000;border-radius:16px;color:#333;width:260px;text-align:center;display:block;cursor:pointer;font:normal 18px/20px Gaegu,cursive,sans-serif;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:all .25s}button.bigger{width:200px;margin-top:30px;border-radius:8px;padding:10px;background:#cfc;font-weight:700}button.bigger:hover{transform:scale(1.1)}button.help{text-decoration:underline;box-shadow:none;border:none;background:transparent;color:#008}button.cancel{background:#ddd}button.reset{background:#fcc}.stick{width:320px;height:44px;margin:10px auto;padding:2px 30px 2px 10px;background:transparent url(../img/stick1.94d0fdff.jpg) no-repeat 50%;background-size:contain;border-radius:20px;display:flex;align-items:center}.stick:nth-of-type(3n+1){background-image:url(../img/stick2.f357f536.jpg)}.stick:nth-of-type(3n+2){background-image:url(../img/stick3.e13ada3e.jpg)}.stick input{border:none;background:transparent;color:rgba(0,0,0,.9);width:100%;line-height:40px;height:40px;font:700 24px/40px Gaegu,cursive,sans-serif;outline:none}.stick .remove{display:block;font:normal 20px/16px Arial,sans-serif;width:20px;height:20px;border-radius:10px;color:rgba(0,0,0,.6);border:2px solid rgba(0,0,0,.6);cursor:pointer;flex:0 0 20px}.stick .remove:hover{color:rgba(255,0,0,.9);border-color:rgba(255,0,0,.9)}.stick.picked{-webkit-filter:grayscale(90%);filter:grayscale(90%)}.stick.picked input{pointer-events:none}::-webkit-input-placeholder{color:rgba(0,0,0,.5)}:-moz-placeholder,:-ms-input-placeholder,::-moz-placeholder,::-webkit-input-placeholder,::placeholder{color:rgba(0,0,0,.5)}.helpbox{padding:10px;max-width:360px;text-align:left;margin:0 auto}.addmultiplebox textarea{width:100%;height:100px;margin:10px 0}.new-temp-name{width:260px;border-radius:45px;padding:5px 10px;font-size:1.5rem;font-family:Gaegu,cursive,sans-serif;text-align:center;border:2px solid #000}.fade-enter-active,.fade-leave-active{transition:all .5s}.fade-enter,.fade-leave-to{opacity:0;transform:translateY(30px)}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}#app{font-family:Gaegu,cursive,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;margin-top:60px}