body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}body{background-color:#efb54a;font-family:Yanone Kaffeesatz,sans-serif;height:100vh;margin:0;padding:0}.hidden{display:none}button{all:unset;text-decoration:underline}button:hover{cursor:pointer}select{font-family:Yanone Kaffeesatz,sans-serif;font-size:2vh}.ProblemSelect__form{display:flex;flex-direction:row;font-size:3vh;justify-content:center;padding-bottom:3vh;padding-top:0}.right-arrow{max-width:1.5vh}.ProblemSelect__button{all:revert;background-color:rgba(238,192,6,.926);border-radius:1vh;font-family:Yanone Kaffeesatz,sans-serif;font-size:3vh}.SelectMenu{align-self:center;padding:1vh;text-align:center}.SelectMenu__options{font-size:3vh}.Solution{margin-left:30%;margin-top:4vh;max-width:50%}.Solution li{text-align:left}.Solution__buttons{font-size:3vh;line-height:1.5}.Solution__container{align-items:flex-start;display:flex;flex-direction:column}@media only screen and (max-width:600px){.Solution{margin-left:0;max-width:100%}.Solution__container p{visibility:hidden}}.mug{animation:mug 4s linear infinite;background:url(/static/media/coffee-img-1.663bfd4610e6352035e5.svg),url(/static/media/coffee-img-2.a5deed5424d0a211f851.svg);background-position:0 0,0 0;background-repeat:repeat-x;border:10px solid #030303;border-radius:20px 20px 60px 60px;height:210px;left:50%;position:absolute;top:30%;transform:translate(-50%,-50%);width:220px}@keyframes mug{to{background-position:-100% 0,-100% 0}}.mug:before{border:10px solid #030303;border-left:none;border-radius:0 30px 80px 0;height:80px;right:-75px;top:30px;width:60px}.mug:after,.mug:before{content:"";position:absolute}.mug:after{background-color:#030303;border-radius:10px;bottom:-10px;height:10px;left:-45px;width:300px}.bubble{animation:bubbles infinite forwards;background-color:#eaddca;border-radius:50%;height:15px;opacity:.6;position:absolute;width:15px}@keyframes bubbles{to{opacity:0;transform:translateY(-150px)}}.bubble-1{animation-delay:.5s;animation-duration:3s;bottom:10px;left:30px}.bubble-2{animation-delay:1.2s;bottom:35px;left:80px}.bubble-2,.bubble-3{animation-duration:4s}.bubble-3{bottom:30px;left:140px}.tongue-tip{bottom:80%;left:10%;position:absolute;width:80%}.tongue-chart{background-color:#fff;border:2px solid #000;border-radius:5px;display:flex;flex-direction:column;left:30%;max-width:40%;position:fixed;z-index:999}.tongue-img{align-self:center;max-width:40%}.tongue-btn{align-self:flex-end;font-size:1.5rem}.CoffeeForm{display:flex;flex-direction:column;margin:auto;width:100%}.CoffeeForm__header{display:flex;flex-direction:row;font-size:5vh;justify-content:center}.CoffeeForm__header h4{align-self:center;padding:2vh 0 0 2vh}.CoffeeForm__body{display:flex;flex-direction:row;height:50vh;margin:0 10vh;padding-top:18vh;text-align:center}.CoffeeForm__left-panel{position:relative;width:33%}.CoffeeForm__centre-panel,.CoffeeForm__right-panel{width:33%}@media only screen and (max-width:600px){.CoffeeForm__body{display:flex;flex-direction:column;padding-top:0}.CoffeeForm__left-panel{visibility:hidden}.CoffeeForm__centre-panel,.CoffeeForm__right-panel{width:100%}}.LandingPage{align-items:center;display:flex;justify-content:center;padding-top:18vh;text-align:center}.instructions{left:0;margin:auto;position:absolute;right:0;top:75%}.text-animation-container{display:flex;position:relative}.text-animation-container span{animation:drop .4s linear forwards;color:#000;font-size:6em;font-weight:700}.text-animation-container span:nth-child(2){animation-delay:.2s}.text-animation-container span:nth-child(3){animation-delay:.4s}.text-animation-container span:nth-child(4){animation-delay:.6s}.text-animation-container span:nth-child(5){animation-delay:.8s}.text-animation-container span:nth-child(6){animation-delay:1s}.text-animation-container span:nth-child(7){animation-delay:1.2s}.text-animation-container span:nth-child(8){animation-delay:1.4s}.text-animation-container span:nth-child(9){animation-delay:1.6s}.text-animation-container span:nth-child(10){animation-delay:1.8s}.coffee-animation-container{left:50%;margin:0;max-height:20vh;padding:0;position:absolute;top:40%;transform:translate(-50%,-50%);width:350px}.upper{border-left:10px solid #0000;border-right:10px solid #0000;border-top:70px solid #735123;box-sizing:border-box;height:0;margin:55px auto;position:relative;width:180px}.upper:after{background-color:#3b240e;height:5px;left:-12.5px;top:-70px;width:185px}.timer,.upper:after{content:"";position:absolute}.timer{background-color:#e06526;display:grid;height:65px;left:0;margin:auto;place-items:center;right:0;top:-65px;width:60px}.timer:before{background-color:#fff;border-radius:50%;height:32px;width:32px}.timer:after,.timer:before{content:"";position:absolute}.timer:after{background-color:#e06526;border-radius:4px;height:12px;top:20px;width:4px}.upper-btn{background-color:#fff;border-radius:50%;bottom:40px;height:8px;left:18px;position:absolute;width:8px}.upper-btn:before{background-color:#e06526;height:12px;left:-2px;top:20px;width:12px}.upper-btn:after,.upper-btn:before{border-radius:50%;content:"";position:absolute}.upper-btn:after{background-color:#fff;height:6px;left:1px;top:23px;width:6px}.filter{background:linear-gradient(90deg,#ede9d7 70%,#dad1b7 0);bottom:57px;cursor:pointer;height:16px;margin:auto;z-index:5}.filter,.filter-base{position:relative;width:45px}.filter-base{background-color:#fff;border-radius:0 0 5px 5px;height:13px;top:15px}.filter-base:before{background-color:#fff;content:"";height:6px;left:16px;position:absolute;top:12px;width:12px}.handle{border-bottom:8px solid #0000;border-right:70px solid #e06526;border-top:8px solid #0000;bottom:16px;height:7px;left:39px;position:relative}.filter:hover .handle{animation:spin 6s}@keyframes spin{50%{transform:translateX(-102px) rotateY(-180deg)}}.handle:after{background-color:#c9561d;border-radius:50%;content:"";height:22.5px;left:58px;position:absolute;top:-7.5px;transform:rotateY(70deg);width:22.5px}.coffee{background-color:#e06526;border-radius:0 0 15px 15px;bottom:3px;height:30px;margin:auto;position:relative;visibility:hidden;width:8px}.filter:hover .coffee{animation:pour 6s 4s}@keyframes pour{0%{visibility:visible}to{transform:translateY(30px)}}.steam{background-color:#ccc3;border-radius:50%;height:10px;margin:auto;position:relative;top:50px;width:10px}.filter:hover .steam{animation:rise-steam 4s 5s}@keyframes rise-steam{to{transform:translateY(-75px)}}.steam:before{background-color:#e6e6e64d;border-radius:50%;bottom:5px;content:"";height:6px;position:absolute;width:6px}.coffee-drop{background-color:#e06526;border-radius:50%;bottom:43px;height:10px;left:18px;position:relative;visibility:hidden;width:10px}.filter:hover .coffee-drop{animation:drop 3s 6.1s}@keyframes drop{to{transform:translateY(25px);visibility:visible}}.back{background-color:#3b240e;bottom:72px;height:140px;margin:auto;position:relative;width:145px}.back:before{background-color:#e06526;bottom:0;content:"";height:12px;left:-5px;position:absolute;width:155px}.tray{background-image:radial-gradient(#3b240e 5px,#0000 6px);background-position:-2.8px 0;background-size:15px 15px;bottom:3px;height:15px;margin:auto;position:absolute;width:100%}.cup{border-left:10px solid #0000;border-top:70px solid #ede9d7;margin:auto;position:relative;top:58px;width:30px;z-index:5}.cup,.cup:before{border-right:10px solid #0000;height:0}.cup:before{border-left:0 solid #0000;border-top:70px solid #dad1b7;bottom:0;left:24px;width:6px}.cup:after,.cup:before{content:"";position:absolute}.cup:after{background-color:#fff;border-radius:5px;bottom:68px;height:4px;left:-12.5px;width:55px}.lower{background-color:#735123;border-radius:5px 5px 0 0;bottom:75px;height:30px;margin:auto;position:relative;width:160px}.lower:before{background-color:#3b240e;bottom:-5px;content:"";height:8px;left:-5px;position:absolute;width:170px}.lower-btn{background-color:#3b240e;height:15px;left:13px;position:relative;top:8px;width:9px}.lower-btn:before{background-color:#e06526;border-radius:50%;bottom:3px;content:"";height:8px;left:18px;position:absolute;width:8px}
/*# sourceMappingURL=main.699df856.css.map*/