*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{color:#fff;background:#000;width:100%;height:100%;font-family:Lato,sans-serif;overflow-x:hidden}body{background-color:#0000;background-image:linear-gradient(#000a28b3,#000514e6),url(https://images.unsplash.com/photo-1472712739516-7ad2b786e1f7?ixlib=rb-4.1.0&auto=format&fit=crop&q=80&w=1169);background-position:0 0,50%;background-repeat:repeat,no-repeat;background-size:cover;background-attachment:scroll,fixed;background-origin:padding-box,padding-box;background-clip:border-box,border-box}#stars2,#stars3{pointer-events:none;background:0 0;position:absolute;top:0;left:0}#stars2{opacity:.8;width:2px;height:2px;animation:100s linear infinite animStar}#stars3{opacity:.6;width:3px;height:3px;animation:150s linear infinite animStar}@keyframes animStar{0%{transform:translateY(0)}to{transform:translateY(-2000px)}}.shooting-star{opacity:0;filter:drop-shadow(0 0 6px #00c8ffcc);pointer-events:none;z-index:2;background:linear-gradient(90deg,#00c8ff,#00c8ff00);border-radius:50%;width:150px;height:2px;position:absolute;transform:rotate(45deg)}main.ocean-main{perspective:2000px;z-index:1;pointer-events:none;position:absolute;inset:0}.ocean{width:4000px;height:4000px;transition:transform .2s linear;position:absolute;top:75%;left:50%;transform:translate(-50%,-50%)rotateX(80deg)}.chunks{filter:brightness(.9)contrast(1.2)saturate(1.3);opacity:.98;background:linear-gradient(#001e5099,#000a28e6),url(https://assets.codepen.io/416221/water.gif) 0 0/300px 300px;width:100%;height:100%;animation:6s linear infinite travel}@keyframes travel{0%{transform:translateY(0)}to{transform:translateY(400px)}}.container{z-index:4;text-align:center;max-width:900px;margin:auto auto 120px;padding:20px;position:relative}.neon{justify-content:center;align-items:center;font-family:monospace;display:flex}.title{position:relative}.title h1{text-transform:uppercase;letter-spacing:3px;color:#0000;text-shadow:0 0 30px #00bcd4;-webkit-text-stroke:2px #00bcd4;font-size:90px;font-weight:bolder}.title h1:nth-child(2){color:#00bcd4;animation:3s ease-in-out infinite neon-title;position:absolute;top:0;left:0}@keyframes neon-title{0%,to{clip-path:polygon(0% 51%,13% 48%,26% 50%,37% 53%,50% 55%,61% 58%,76% 60%,91% 59%,100% 51%,100% 100%,0 100%)}50%{clip-path:polygon(0 51%,9% 57%,21% 62%,36% 63%,49% 57%,60% 50%,75% 46%,91% 44%,100% 42%,100% 100%,0 100%)}}.mbti-container{z-index:10;flex-direction:column;justify-content:center;align-items:center;gap:40px;width:fit-content;max-width:90vw;margin-top:-30px;margin-left:auto;margin-right:auto;display:flex;position:relative}.matrix-text{font-family:var(--font-orbitron),"Courier New",Courier,monospace;color:#e0f7ff;text-transform:uppercase;letter-spacing:6px;text-align:center;text-shadow:0 0 10px #0ffc,0 0 20px #0ff9,0 0 40px #0ff6,0 0 80px #0ff3;background:0 0;-webkit-background-clip:unset;background-clip:unset;font-size:4.5rem;font-weight:900;animation:4s cubic-bezier(.25,.46,.45,.94) infinite both glitch-skew;position:relative}.matrix-text:before,.matrix-text:after{content:"DO YOU KNOW YOUR MBTI TYPE?";opacity:.8;background:#000;width:100%;height:100%;position:absolute;top:0;left:0}.matrix-text:before{color:#ff00c1;z-index:-1;text-shadow:2px 0 #00fff9;animation:4s linear infinite alternate-reverse glitch-anim-1}.matrix-text:after{color:#00fff9;z-index:-2;text-shadow:-2px 0 #ff00c1;animation:4s linear infinite alternate-reverse glitch-anim-2}@keyframes glitch-skew{0%{transform:skew(0deg)}20%{transform:skew(0deg)}22%{transform:skew(10deg)}24%{transform:skew(-10deg)}26%{transform:skew(0deg)}80%{transform:skew(0deg)}82%{transform:skew(-5deg)}84%{transform:skew(5deg)}86%{transform:skew(0deg)}to{transform:skew(0deg)}}@keyframes glitch-anim-1{0%{clip-path:inset(20% 0 80%);transform:translate(-2px)}20%{clip-path:inset(60% 0 10%);transform:translate(2px)}40%{clip-path:inset(40% 0 50%);transform:translate(-2px)}60%{clip-path:inset(80% 0 5%);transform:translate(2px)}80%{clip-path:inset(10% 0 70%);transform:translate(-2px)}to{clip-path:inset(30% 0 20%);transform:translate(2px)}}@keyframes glitch-anim-2{0%{clip-path:inset(10% 0 60%);transform:translate(2px)}20%{clip-path:inset(30% 0 20%);transform:translate(-2px)}40%{clip-path:inset(70% 0 10%);transform:translate(2px)}60%{clip-path:inset(20% 0 50%);transform:translate(-2px)}80%{clip-path:inset(60% 0 20%);transform:translate(2px)}to{clip-path:inset(40% 0 30%);transform:translate(-2px)}}.button-group{justify-content:flex-end;align-self:flex-end;gap:30px;width:100%;max-width:90vw;margin-top:20px;display:flex}.neon-btn{color:#ff003c;font-family:var(--font-orbitron),"Lato",sans-serif;text-transform:uppercase;letter-spacing:4px;cursor:pointer;background:0 0;border:4px solid #ff003c;border-radius:2px;padding:15px 40px;font-size:1.5rem;font-weight:900;text-decoration:none;transition:all .2s;animation:4s linear infinite alternate-reverse border-glitch;position:relative;overflow:hidden;box-shadow:0 0 10px #ff003c4d,inset 0 0 10px #ff003c1a}.neon-btn:before,.neon-btn:after{content:attr(data-text);opacity:.8;background:#000;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}.neon-btn:before{color:#00fff9;z-index:-1;text-shadow:2px 0 #ff00c1;animation:3s linear infinite alternate-reverse glitch-anim-btn-1}.neon-btn:after{color:#ff00c1;z-index:-2;text-shadow:-2px 0 #00fff9;animation:2.5s linear infinite alternate-reverse glitch-anim-btn-2}.neon-btn:hover{color:#fff;text-shadow:0 0 5px #fff;background:#ff003c;animation:none;transform:scale(1.05);box-shadow:0 0 20px #ff003c,0 0 40px #ff003c}.neon-btn:hover:before,.neon-btn:hover:after{display:none}@keyframes glitch-anim-btn-1{0%{clip-path:inset(10% 0 80%);transform:translate(-3px)}20%{clip-path:inset(80% 0 5%);transform:translate(3px)}40%{clip-path:inset(30% 0 50%);transform:translate(-3px)}60%{clip-path:inset(70% 0 20%);transform:translate(3px)}80%{clip-path:inset(10% 0 60%);transform:translate(-3px)}to{clip-path:inset(50% 0 30%);transform:translate(3px)}}@keyframes glitch-anim-btn-2{0%{clip-path:inset(60% 0 10%);transform:translate(3px)}20%{clip-path:inset(20% 0 70%);transform:translate(-3px)}40%{clip-path:inset(50% 0 30%);transform:translate(3px)}60%{clip-path:inset(10% 0 80%);transform:translate(-3px)}80%{clip-path:inset(40% 0);transform:translate(3px)}to{clip-path:inset(80% 0 10%);transform:translate(-3px)}}.flower-container main{z-index:3;flex-direction:column;justify-content:flex-end;align-items:center;display:flex;position:absolute;bottom:2%;left:50%;transform:translate(-50%)scale(.6)}.corolla{justify-content:center;width:max-content;min-height:100px;margin-bottom:40px;display:flex;position:relative;transform:rotate(-45deg)}.segmR,.segmL{background:linear-gradient(135deg,#b45fb480 0%,#fad7ff 50%,#b45fb480 100%);border-radius:100% 0%;width:100px;height:100px;position:absolute}.segmR:before,.segmL:before{content:"";border-radius:inherit;background-image:radial-gradient(circle,#fff0 20%,#e646d7cc 100%);width:100px;height:100px;position:absolute;box-shadow:inset 0 0 20px #8a327833}.rings{justify-content:center;width:max-content;min-height:100px;display:flex;position:relative}.ring{background:linear-gradient(#38e5f500 0%,#41c3ff80 100%);border-radius:80% 90%;position:absolute;box-shadow:inset 0 0 15px #fffc,0 3px #e5f6f7cc}.subtitle-text{color:#00bcd4;text-align:center;text-transform:uppercase;letter-spacing:2px;text-shadow:0 0 10px #00bcd4cc;width:100%;margin:10px 0 0;font-size:24px;font-weight:300}.lotus-trigger-container{z-index:100;position:fixed;bottom:20px;right:20px}.lotus-trigger-link{color:#ffffffb3;cursor:pointer;text-transform:uppercase;letter-spacing:2px;text-shadow:0 0 5px #ffffff80;background:0 0;border:none;padding:10px;font-family:Orbitron,sans-serif;font-size:14px;text-decoration:none;transition:color .3s}.lotus-trigger-link:hover{color:#fff}@media (max-width:768px){.title h1{font-size:45px}.subtitle-text{letter-spacing:1px;font-size:16px}.matrix-text{font-size:2.5rem}.neon-btn{padding:10px 25px;font-size:1rem}.ocean{width:2500px;height:2500px}.flower-container main{transform:translate(-50%)scale(.5)}}@media (max-width:480px){.title h1{font-size:32px}.matrix-text{letter-spacing:2px;font-size:1.8rem}.button-group{flex-direction:row;justify-content:center;align-self:center;gap:15px}.ocean{width:1800px;height:1800px;top:70%}.flower-container main{bottom:5%;transform:translate(-50%)scale(.45)}.lotus-trigger-container{width:max-content;bottom:10px;right:50%;transform:translate(50%)}}