@import"https://fonts.cdnfonts.com/css/hopalope-bubble-trial";:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{padding:0;margin:0;box-sizing:border-box}body{display:flex;flex-direction:column;min-width:320px;height:100vh}.flex{display:flex;flex-direction:column;align-items:center}.question{padding:10vh 10%;background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3Crect stroke='%23ffffff' stroke-width='0.5' width='1' height='1' id='s'/%3E%3Cpattern id='a' width='3' height='3' patternUnits='userSpaceOnUse' patternTransform='scale(10.5) translate(-904.76 -678.57)'%3E%3Cuse fill='%23fcfcfc' href='%23s' y='2'/%3E%3Cuse fill='%23fcfcfc' href='%23s' x='1' y='2'/%3E%3Cuse fill='%23fafafa' href='%23s' x='2' y='2'/%3E%3Cuse fill='%23fafafa' href='%23s'/%3E%3Cuse fill='%23f7f7f7' href='%23s' x='2'/%3E%3Cuse fill='%23f7f7f7' href='%23s' x='1' y='1'/%3E%3C/pattern%3E%3Cpattern id='b' width='7' height='11' patternUnits='userSpaceOnUse' patternTransform='scale(10.5) translate(-904.76 -678.57)'%3E%3Cg fill='%23f5f5f5'%3E%3Cuse href='%23s'/%3E%3Cuse href='%23s' y='5' /%3E%3Cuse href='%23s' x='1' y='10'/%3E%3Cuse href='%23s' x='2' y='1'/%3E%3Cuse href='%23s' x='2' y='4'/%3E%3Cuse href='%23s' x='3' y='8'/%3E%3Cuse href='%23s' x='4' y='3'/%3E%3Cuse href='%23s' x='4' y='7'/%3E%3Cuse href='%23s' x='5' y='2'/%3E%3Cuse href='%23s' x='5' y='6'/%3E%3Cuse href='%23s' x='6' y='9'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='h' width='5' height='13' patternUnits='userSpaceOnUse' patternTransform='scale(10.5) translate(-904.76 -678.57)'%3E%3Cg fill='%23f5f5f5'%3E%3Cuse href='%23s' y='5'/%3E%3Cuse href='%23s' y='8'/%3E%3Cuse href='%23s' x='1' y='1'/%3E%3Cuse href='%23s' x='1' y='9'/%3E%3Cuse href='%23s' x='1' y='12'/%3E%3Cuse href='%23s' x='2'/%3E%3Cuse href='%23s' x='2' y='4'/%3E%3Cuse href='%23s' x='3' y='2'/%3E%3Cuse href='%23s' x='3' y='6'/%3E%3Cuse href='%23s' x='3' y='11'/%3E%3Cuse href='%23s' x='4' y='3'/%3E%3Cuse href='%23s' x='4' y='7'/%3E%3Cuse href='%23s' x='4' y='10'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='c' width='17' height='13' patternUnits='userSpaceOnUse' patternTransform='scale(10.5) translate(-904.76 -678.57)'%3E%3Cg fill='%23f2f2f2'%3E%3Cuse href='%23s' y='11'/%3E%3Cuse href='%23s' x='2' y='9'/%3E%3Cuse href='%23s' x='5' y='12'/%3E%3Cuse href='%23s' x='9' y='4'/%3E%3Cuse href='%23s' x='12' y='1'/%3E%3Cuse href='%23s' x='16' y='6'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='d' width='19' height='17' patternUnits='userSpaceOnUse' patternTransform='scale(10.5) translate(-904.76 -678.57)'%3E%3Cg fill='%23ffffff'%3E%3Cuse href='%23s' y='9'/%3E%3Cuse href='%23s' x='16' y='5'/%3E%3Cuse href='%23s' x='14' y='2'/%3E%3Cuse href='%23s' x='11' y='11'/%3E%3Cuse href='%23s' x='6' y='14'/%3E%3C/g%3E%3Cg fill='%23efefef'%3E%3Cuse href='%23s' x='3' y='13'/%3E%3Cuse href='%23s' x='9' y='7'/%3E%3Cuse href='%23s' x='13' y='10'/%3E%3Cuse href='%23s' x='15' y='4'/%3E%3Cuse href='%23s' x='18' y='1'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='e' width='47' height='53' patternUnits='userSpaceOnUse' patternTransform='scale(10.5) translate(-904.76 -678.57)'%3E%3Cg fill='%23b03'%3E%3Cuse href='%23s' x='2' y='5'/%3E%3Cuse href='%23s' x='16' y='38'/%3E%3Cuse href='%23s' x='46' y='42'/%3E%3Cuse href='%23s' x='29' y='20'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='f' width='59' height='71' patternUnits='userSpaceOnUse' patternTransform='scale(10.5) translate(-904.76 -678.57)'%3E%3Cg fill='%23d35'%3E%3Cuse href='%23s' x='33' y='13'/%3E%3Cuse href='%23s' x='27' y='54'/%3E%3Cuse href='%23s' x='55' y='55'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='g' width='139' height='97' patternUnits='userSpaceOnUse' patternTransform='scale(10.5) translate(-904.76 -678.57)'%3E%3Cg fill='%23d35'%3E%3Cuse href='%23s' x='11' y='8'/%3E%3Cuse href='%23s' x='51' y='13'/%3E%3Cuse href='%23s' x='17' y='73'/%3E%3Cuse href='%23s' x='99' y='57'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23b)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23h)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23c)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23d)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23e)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23f)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23g)' width='100%25' height='100%25'/%3E%3C/svg%3E");background-attachment:fixed;background-size:cover;height:100vh;text-align:center;display:flex;justify-content:space-between}.scala-wrapper{border:solid .2px #d35;background:#fff;width:150px;display:flex;transition:all .3s;border-radius:20px 20px 0 0;filter:drop-shadow(0 0 5px black)}.scala-inner{transition:all .8s;align-self:flex-end;width:100%;position:relative}.scala-inner h2{position:absolute;bottom:0;color:#fff;text-shadow:1px 1px 1px black;left:50%;transform:translate(-50%);font-size:50px;z-index:10}.desc{text-shadow:1px 1px 1px black;font-family:HOPALOPE BUBBLE TRIAL,sans-serif;font-size:60px;letter-spacing:2px;color:#b03}.answerList{width:150px;display:flex;flex-direction:column;justify-content:center;gap:100px}.answer{font-family:HOPALOPE BUBBLE TRIAL,sans-serif;text-shadow:1px 1px 1px black;cursor:pointer;border:none;border-radius:20px;color:#fff;font-size:25px;word-wrap:normal;padding:20px 10px;letter-spacing:2px;line-height:1;background-color:#d35;transition:background-color .3s ease;filter:drop-shadow(0 0 2px black)}.answer.clicked,.answer:hover{background-color:#b03}.answer:disabled{cursor:not-allowed}.bubble-container{position:relative;height:50vh;aspect-ratio:1;overflow:hidden;border-radius:50%;filter:drop-shadow(0 0 5px black)}.bubble-image{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0;z-index:1}.bubble-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;background:radial-gradient(circle,rgba(255,255,255,.3) 20%,transparent 60%);animation:bubble-rise 3s infinite ease-in-out;pointer-events:none;opacity:.8}@keyframes bubble-rise{0%{transform:translateY(100%) scale(.8);opacity:0}50%{opacity:1;transform:translateY(50%) scale(1.1)}to{transform:translateY(-100%) scale(.8);opacity:0}}.bubble-overlay:before,.bubble-overlay:after{content:"";position:absolute;top:100%;left:50%;width:150%;height:150%;background:radial-gradient(circle,rgba(255,255,255,.5) 20%,transparent 80%);border-radius:50%;animation:bubble-rise 4s infinite ease-in-out}.bubble-overlay:after{animation-duration:4s;animation-delay:1.2s;transform:scale(1.2)}.start{position:relative;width:100%;height:100vh;overflow:hidden}.background-video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:-1}.content{position:relative;z-index:1;color:#fff;text-align:center;top:50%;transform:translateY(-50%)}.content p{font-family:HOPALOPE BUBBLE TRIAL,sans-serif;text-shadow:1px 1px 1px black;font-size:50px;letter-spacing:2px;margin-bottom:30px}.lose{background-image:url(https://res.cloudinary.com/arikxl/image/upload/v1737802662/Ella2023/rpurtjdd2h33phii59tj.gif);height:100vh;width:100%;background-size:cover;object-fit:cover;text-align:center;display:flex;align-items:center;justify-content:center}.lose p{color:#fff;font-family:HOPALOPE BUBBLE TRIAL,sans-serif;text-shadow:1px 1px 1px black;font-size:150px;color:#b03}.winP{font-size:200px}.credits{color:#fff;position:absolute;bottom:0;text-align:center;left:50%;transform:translate(-50%)}.credits a{color:#fff;text-decoration:none}.credits a:hover{text-decoration:underline}.button{--h-button: 48px;--w-button: 102px;--round: .75rem;position:relative;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;transition:all .25s ease;background:radial-gradient(100% 65.28% at 50% 100%,#df71ffcc,#df71ff00),linear-gradient(0deg,#b03,#b03);border:none;outline:none;padding:12px 18px;height:100%;width:100%}.button:before,.button:after{content:"";position:absolute;inset:var(--space);transition:all .5s ease-in-out;border-radius:calc(var(--round) - var(--space));z-index:0}.button:before{--space: 1px;background:linear-gradient(177.95deg,#ffffff30,#fff0)}.button:after{--space: 2px;background:radial-gradient(100% 65.28% at 50% 100%,#df71ffcc,#df71ff00),linear-gradient(0deg,#b03,#b03)}.points_wrapper{overflow:hidden;width:100%;height:100%;pointer-events:none;position:absolute;z-index:1}.points_wrapper .point{bottom:-10px;position:absolute;animation:floating-points infinite ease-in-out;pointer-events:none;width:2px;height:2px;background-color:#fff;border-radius:9999px}@keyframes floating-points{0%{transform:translateY(0)}85%{opacity:0}to{transform:translateY(-205px);opacity:0}}.points_wrapper .point:nth-child(1){left:10%;opacity:1;animation-duration:2.35s;animation-delay:.2s}.points_wrapper .point:nth-child(2){left:30%;opacity:.7;animation-duration:2.5s;animation-delay:.5s}.points_wrapper .point:nth-child(3){left:25%;opacity:.8;animation-duration:2.2s;animation-delay:.1s}.points_wrapper .point:nth-child(4){left:44%;opacity:.6;animation-duration:2.05s}.points_wrapper .point:nth-child(5){left:50%;opacity:1;animation-duration:1.9s}.points_wrapper .point:nth-child(6){left:75%;opacity:.5;animation-duration:1.5s;animation-delay:1.5s}.points_wrapper .point:nth-child(7){left:88%;opacity:.9;animation-duration:2.2s;animation-delay:.2s}.points_wrapper .point:nth-child(8){left:58%;opacity:.8;animation-duration:2.25s;animation-delay:.2s}.points_wrapper .point:nth-child(9){left:98%;opacity:.6;animation-duration:2.6s;animation-delay:.1s}.points_wrapper .point:nth-child(10){left:65%;opacity:1;animation-duration:2.5s;animation-delay:.2s}.points_wrapper .point:nth-child(11){left:5%;opacity:1;animation-duration:2s;animation-delay:.2s}.points_wrapper .point:nth-child(12){left:95%;opacity:1;animation-duration:.5s;animation-delay:.2s}.points_wrapper .point:nth-child(13){left:33%;opacity:1;animation-duration:3.5s;animation-delay:.2s}.inner{z-index:2;transition:color .2s ease-in-out}