:root{--card-width: clamp(200px, 90vw, 700px);--primary: #e1e1e1;--secondary: #555555;--accent: lightblue;--light-background: rgba(255, 255, 255, .1);--dark-background: rgba(255, 255, 255, .3);--shadow: rgba(0, 0, 0, .2)}.dark-theme{--primary: #162447;--secondary: #DBCBBD;--accent: #1414a4;--light-background: rgba(0, 0, 0, .1);--dark-background: rgba(0, 0, 0, .3);--shadow: rgba(255, 255, 255, .2)}*{margin:0;padding:0;box-sizing:border-box;transition:.5s ease-in-out}body{background:var(--primary);overflow:hidden}#Blink{height:100vh;box-sizing:border-box;background:#f1f4df}#Blink .eyes{width:100%;display:grid;grid-template-columns:1fr 1fr;justify-content:space-evenly;place-items:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.8)}#Blink .eye-container{height:25vw;width:25vw;position:relative}#Blink .lid-container{height:100%;width:100%;position:absolute;background:transparent;top:-15%;transform-origin:bottom;transform:rotateX(0);z-index:-1;animation:blink 4s forwards alternate-reverse infinite ease-in-out}#Blink .lid-container .lid{inset:0;transform:rotate(45deg)}#Blink .wrapper{height:100%;width:100%;position:absolute;transform:rotate(45deg)}#Blink .lid{height:100%;width:100%;border-top-left-radius:300px;border-bottom-right-radius:300px;position:absolute;inset:0}#Blink .lid1{top:-10%;left:-10%;background:#f1f4df;border-left:5px solid rgba(0,0,0,.5);border-top:5px solid rgba(0,0,0,.5)}#Blink .lid2{top:10%;left:10%;background:transparent;z-index:-1;border-right:5px solid rgba(0,0,0,.5);border-bottom:5px solid rgba(0,0,0,.5)}#Blink .eye{height:100%;width:100%;border-top-left-radius:300px;border-bottom-right-radius:300px;background:#f5f5f5;border:5px solid rgba(0,0,0,.5);position:absolute;inset:0}#Blink .iris{height:50%;width:50%;border-radius:50%;background:#010163;display:grid;place-items:center;position:relative;left:50%;top:50%;transform:translate(-50%,-50%);animation:look 8s forwards alternate-reverse infinite}#Blink .retina{height:40%;width:40%;border-radius:50%;background:#2f4f4f;transform:rotate(-45deg)}#Blink .retina:before{content:"";height:25%;width:25%;border-radius:50%;background:#ffffff4d;position:absolute;top:50%}@keyframes blink{0%{transform:rotateX(0);top:-15%;z-index:-1}75%{transform:rotateX(0);top:-15%;z-index:-1}to{transform:rotateX(-180deg);top:-100%;z-index:1}}@keyframes look{0%{left:50%;top:50%}10%{left:50%;top:50%}20%{left:50%;top:50%}25%{top:35%;left:60%}30%{top:35%;left:60%}40%{top:35%;left:60%}50%{top:60%;left:40%}60%{top:60%;left:40%}70%{top:60%;left:40%}75%{left:50%;top:50%}80%{left:50%;top:50%}90%{left:50%;top:50%}to{left:50%;top:50%}}#IconButton{border:none;outline:none;padding:clamp(.5rem,1vw,1rem);border-radius:50%;background:var(--accent);backdrop-filter:blur(5px);display:grid;place-items:center;box-shadow:var(--shadow) 0 0 .5rem .25rem;transition:.1s;cursor:pointer}#IconButton:active{transform:scale(.9);filter:brightness(90%)}#IconButton:disabled{cursor:inherit}#IconButton i{font-size:clamp(1.25rem,3vw,2rem);color:var(--secondary)}#ProjectHeader{position:absolute;inset:0;top:calc((clamp(2rem,10vw,5rem) + 2rem)*-1);height:calc(clamp(2rem,10vw,5rem) + 2rem);padding:0 1rem;width:100%;font-family:Tourney,cursive;background-color:var(--dark-background);backdrop-filter:blur(15px);box-shadow:0 0 1rem var(--shadow);color:var(--secondary);display:flex;align-items:center;border-radius:0 0 2rem 2rem;z-index:1000}#ProjectHeader:hover{top:0}#ProjectHeader header{flex-grow:1;text-align:center;font-size:clamp(2rem,10vw,4rem)}#ProjectHeader .pull-down{height:1.5rem;width:2rem;position:absolute;transform:translate(-50%);left:50%;bottom:-1.5rem;background-color:var(--dark-background);font-size:1.5rem;border-radius:0 0 .5rem .5rem;display:grid;place-items:center;color:var(--secondary)}#Switch{height:100vh}#Switch #incDec{height:0;width:0;display:grid;grid-template-columns:1fr 1fr;font-size:1rem;position:absolute;left:50%;top:50%;transform:translate(-7rem,-1rem)}#Switch #incDec:before{content:"Increment";padding:.5rem 1rem;border:1px solid blue;background-color:#00f;color:#fff}#Switch #incDec:after{content:"Decrement";padding:.5rem 1rem;border:1px solid blue;background-color:#fff;color:#00f}#Switch #incDec:checked:before{border:1px solid blue;background-color:#fff;color:#00f}#Switch #incDec:checked:after{border:1px solid blue;background-color:#00f;color:#fff}#Eye{height:100vh;background:#eecbbd no-repeat 100vh 100vw}#Eye div{box-sizing:content-box}#Eye .eyes{display:flex;justify-content:center;align-items:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}#Eye .spacer{height:10vh;width:10vw}@media screen and (max-width: 750px){#Eye .eyes{display:flex;flex-direction:column;margin-top:5rem}#Eye .left-eye-container{transform:rotateY(180deg) rotate(-90deg)}#Eye .right-eye-container{transform:rotate(90deg)}}@media screen and (min-width: 750px){#Eye .left-eye-container{transform:rotateY(180deg)}}#Eye .eye-container{width:350px;height:350px;position:relative}#Eye .eye-container *{position:absolute}#Eye .eyebrow{position:absolute;width:330px;height:200px;inset:0;background-color:#141313;clip-path:polygon(46% 28%,29% 33%,11% 41%,0 51%,0 65%,19% 50%,39% 41%,57% 36%,69% 38%,100% 48%,79% 33%,66% 26%)}#Eye .upper{position:absolute;top:30%;left:5%;width:220px;height:180px;clip-path:polygon(12% 34%,25% 19%,50% 11%,68% 12%,85% 18%,99% 36%,33% 54%,0 62%);background-image:linear-gradient(to right,#c00c0c,#f11f1f,#140000)}#Eye .shape{position:absolute;top:33%;left:5%;width:215px;height:158px;background-color:#fff;border-radius:50%;border-width:20px 2px 10px 10px;border-color:#e7a6a6;clip-path:polygon(0 53%,20% 32%,39% 27%,59% 28%,77% 28%,100% 34%,88% 49%,79% 53%,67% 60%,33% 63%,19% 59%,9% 53%);border-style:groove}#Eye .eyeball{position:absolute;top:45%;left:28%;width:60px;height:60px;background-image:linear-gradient(45deg,#6ea9f7,#502deb);border-radius:50%;border-width:3px 3px 3px 3px;border-color:#018333d2;border-style:solid}#Eye .eye-mid{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30%;height:30%;background-color:#101969;border-radius:50%;border-width:7px 7px 0 0;border-color:#001d5c;border-style:groove}#Eye .reflection{position:absolute;left:60%;top:40%;transform:translate(-50%,-50%);width:15%;height:15%;border-radius:50%;background-color:#ffffff8f}#Eye .triangle{position:absolute;transform:translate(-50%,-50%);inset:0;width:23px;height:23px;background-color:#008b3575;clip-path:polygon(48% 41%,24% 100%,77% 100%);transform-origin:center bottom}#Eye .triangle1{left:50%;top:82%}#Eye .triangle2{transform:rotate(-28deg);left:53%;top:56%}#Eye .triangle3{transform:rotate(-57deg);left:70.5%;top:41.5%}#Eye .triangle4{transform:rotate(-75deg);left:80%;top:20%}#Eye .triangle5{transform:rotate(-94deg);left:80%;top:-3%}#Eye .triangle6{transform:rotate(-104deg);left:68%;top:-25%}#Eye .triangle7{transform:rotate(28deg);left:8%;top:57%}#Eye .triangle8{transform:rotate(50deg);left:-10%;top:42%}#Eye .triangle9{transform:rotate(70deg);left:-20%;top:20%}#Eye .triangle10{transform:rotate(95deg);left:-20%;top:-3%}#Eye .triangle11{transform:rotate(115deg);left:-10%;top:-23%}#Eye .eyelid{position:absolute;top:35.3%;left:4%;width:259px;height:170px;clip-path:polygon(2% 61%,10% 42%,25% 28%,45% 20%,75% 24%,100% 19%,88% 34%,72% 35%,49% 29%,25% 36%,14% 44%);background-color:#141313;transform:rotate(5deg)}#Eye .eyebrow1{position:absolute;top:33.3%;left:5%;width:261px;height:170px;background-color:#d1caca;clip-path:polygon(41% 65%,30% 63%,19% 60%,0 56%,19% 63%,41% 70%,63% 68%,79% 59%,88% 45%,82% 43%,72% 55%,57% 64%);transform:rotate(-1deg)}#Eye .eyebrow2{position:absolute;top:34.5%;left:4.5%;width:261px;height:170px;background-color:#2e2424;clip-path:polygon(41% 65%,30% 63%,19% 60%,0 55%,19% 63%,41% 70%,63% 68%,79% 59%,99% 36%,85% 40%,72% 55%,57% 64%)}#Santa{background-color:#74ebd5;background-image:linear-gradient(-45deg,#74ebd5,#9face6);height:100vh;overflow:hidden;position:absolute;width:100%}#Santa div{position:relative}#Santa .container{height:500px;width:500px;top:50%;left:50%;transform:translate(-50%,-50%) scale(.5)}@media only screen and (min-width: 500px){#Santa .container{left:54%;transform:translate(-50%,-50%) scale(.7)}}@media only screen and (min-width: 700px){#Santa .container{left:53%;transform:translate(-50%,-50%)}}#Santa .belt{width:450px;height:50px;background:#2f4f4f;margin-top:-251px;left:25px;border-radius:0 0 10px 10px}#Santa .buckle{width:75px;height:50px;background:orange;margin:0 auto}#Santa .belly{height:500px;width:450px;left:25px;background:#b22222;border-radius:50%;margin-top:-20px;clip-path:polygon(0 0,100% 0,100% 50%,0 50%)}#Santa .left-hand{position:absolute;height:100px;width:100px;border-radius:50%;background:#fff;z-index:1;top:270px;right:55px;animation:move 4s linear infinite forwards alternate}#Santa .left-hand:before{content:"";position:absolute;height:100px;width:100px;border-radius:50%;background:#d2691e;inset:-10px 0 0 -10px}@keyframes move{0%{top:270px;right:55px}to{top:260px;right:50px}}#Santa .right-hand{width:270px;height:210px;position:absolute;inset:160px 0 0 -95px;transform-origin:100% 100%;transform:rotate(-3deg);animation:wave 2s linear forwards alternate infinite}@keyframes wave{0%{transform:rotate(-3deg)}to{transform:rotate(3deg)}}#Santa .upper-arm{height:150px;width:95px;background:#b22222;left:15px;transform-origin:0 100%;transform:rotate(-15deg);animation:wave-upper 2s ease-in-out forwards alternate infinite}@keyframes wave-upper{0%{transform:rotate(-15deg)}to{transform:rotate(15deg)}}#Santa .glove{height:70px;width:70px;background:#d2691e;border-radius:40px 40px 0 0;left:5px;top:-110px}#Santa .glove:after{content:"";position:absolute;height:45px;width:30px;background:#d2691e;right:-25px;bottom:-5px;transform:rotate(45deg);border-radius:40px 40px 0 0}#Santa .sleeve{height:40px;width:130px;background:#fff;border-radius:40px;top:-110px;left:-18px}#Santa .lower-arm{height:100px;width:250px;background:#b22222;left:15px;border-radius:200px 150px 0 200px;margin-top:-45px}#Santa .handle{height:70px;width:70px;clip-path:polygon(35% 0%,65% 0%,100% 100%,0% 100%);background:#d2691e;filter:brightness(.8);transform:rotate(45deg);top:40px;left:-30px}#Santa .ears{height:50px;width:240px;background:#f3c5cc;margin:0 auto;border-radius:50px}#Santa .face{height:200px;background-color:#fae5d7;clip-path:circle();padding-top:80px;margin-top:-125px}#Santa .ent{position:absolute;height:200px;inset:0;margin-top:145px;z-index:2}#Santa .eyes{height:16px}#Santa .eyes:before,#Santa .eyes:after{content:"";position:absolute;height:100%;aspect-ratio:1;background:#2f4f4f;top:0;clip-path:circle()}#Santa .eyes:before{left:200px}#Santa .eyes:after{right:200px}#Santa .nose{height:40px;width:50px;background:#f3c5cc;margin:0 auto;border-radius:50%;z-index:1}#Santa .mouth{height:40px;aspect-ratio:1;background:#2f4f4f;clip-path:circle(50% at 50% 0);margin:10px auto 0}#Santa .beard{position:absolute;height:150px;margin:40px auto;inset:0;display:flex;justify-content:center;filter:blur(3px)}#Santa .left,#Santa .right{background:#fff}#Santa .left{height:150px;width:150px;clip-path:circle(100% at 100% 0);margin-left:50px}#Santa .right{height:150px;width:150px;clip-path:circle(50% at 0 50%)}#Santa .band{width:250px;height:70px;background:#fff;margin:0 auto;border-radius:15px;z-index:1}#Santa .cap{width:200px;height:70px;background:#b22222;margin:0 auto;clip-path:ellipse(100% 70px at -10% 110%);z-index:1;transform-origin:0 100%}#Santa .wool{position:absolute;height:60px;width:60px;background:#fff;border-radius:50%;inset:-35px 0 0 95px;filter:blur(2px);animation:swing 1s ease-in-out infinite forwards alternate}@keyframes swing{0%{left:95px;top:-35px}to{left:90px;top:-30px}}#Santa .bag{position:absolute;height:320px;width:320px;border-radius:50%;background:#d2691e;right:-50px;top:190px;filter:blur(1px) brightness(.8)}#Bee{height:100vh;background:#3b064d}#Bee .bee{height:100px;width:100px;position:absolute;top:60%;left:50%;transform:translate(-50%,-50%) rotate(90deg) scale(2)}@media only screen and (min-width: 500px){#Bee .bee{transform:translate(-50%,-50%) rotate(90deg) scale(3.5)}}@media only screen and (min-width: 700px){#Bee .bee{transform:translate(-50%,-50%) rotate(90deg) scale(5)}}#Bee .bee .body{top:12%;left:10%;height:80%;width:80%;background:#9acd32;position:relative;clip-path:ellipse(33% 50% at 50% 50%)}#Bee .stripe{height:20%;width:100%;border-bottom:8px solid darkslategrey;border-radius:50%;position:absolute}#Bee .body .strip-1{top:15%}#Bee .body .strip-2{top:40%}#Bee .body .strip-3{top:65%}#Bee .bee .antenna-wrapper{position:absolute;height:30%;width:5%}#Bee .antenna-wrapper .tip{position:absolute;top:-2%;height:13%;width:70%;border-radius:50%;background:#2f4f4f}#Bee .bee .antenna{height:100%;width:100%;border-radius:50%;border-left:2px solid darkslategrey;clip-path:polygon(0 0,100% 0,100% 70%,0 70%)}#Bee .bee .antenna-wrapper-1{transform:rotate(-40deg);top:1%;left:35%}#Bee .bee .antenna-wrapper-2{transform:rotate(-50deg);top:3%;left:30%}#Bee .bee .eye{position:absolute;left:41%;height:2%;width:2%;border-radius:50%;background:#2f4f4f;top:17%}#Bee .bee .smile{height:10%;width:1%;border-radius:82% 18% 48% 52%/45% 33% 67% 55%;border-left:2px solid darkslategrey;position:absolute;top:14%;left:52%;transform:rotate(200deg)}#Bee .bee .wing{position:absolute;height:55%;width:55%;background-color:#d3d3d3;border-radius:50%;perspective-origin:right center;transform-style:preserve-3d;transform-origin:right center;perspective:1000px}#Bee .bee .wing-1{left:-18%;top:23%;animation:fly-1 .2s infinite forwards alternate-reverse 1s}#Bee .bee .wing-2{top:35%;left:-13%;animation:fly-2 .22s infinite forwards alternate-reverse 1s}#Bee .bee .sting{position:absolute;top:87%;left:42%;height:15%;width:15%;background-color:#2f4f4f;clip-path:polygon(50% 100%,0 0,100% 0)}@keyframes fly-1{0%{transform:rotateY(0);opacity:.35}to{transform:rotateY(-50deg);opacity:.2}}@keyframes fly-2{0%{transform:rotateY(0);opacity:.3}to{transform:rotateY(40deg);opacity:.5}}#BrushCursor{height:100vh}#BrushCursor .container{height:100%;width:100%;background:#2f4f4f}#BrushCursor .p{position:absolute;font-size:2rem;font-family:sans-serif;font-weight:700;top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap}@media only screen and (min-width: 500px){#BrushCursor .p{font-size:3rem}}@media only screen and (min-width: 700px){#BrushCursor .p{font-size:5rem}}#BrushCursor .p1{text-shadow:1px 1px 1px black,-1px -1px 1px black;color:#0ff}#BrushCursor .p2{color:red;clip-path:polygon(0 0,100% 0,100% 100%,0% 100%);animation:text-animation 3s ease-in-out forwards alternate infinite;text-shadow:1px 1px 1px black,-1px -1px 1px black}#BrushCursor .p3{height:20%;color:transparent}@keyframes text-animation{0%{clip-path:polygon(0 0,100% 0,100% 100%,0% 100%)}to{clip-path:polygon(0 0,0% 1%,0% 100%,0% 100%)}}#BrushCursor .cursor{position:absolute;top:50%;height:100%;width:100%;transform:translateY(-50%);border-right:2px solid red;animation:cursor-animation 3s ease-in-out forwards alternate infinite}@keyframes cursor-animation{0%{width:100%}to{width:0}}#Butterfly{height:100vh;overflow:hidden;background:#e3fcbf}#Butterfly .container{height:600px;width:600px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.6)}#Butterfly .container .butterfly{position:absolute;height:500px;width:500px;top:-11px;left:110px;transform-origin:center;transform:scale(.5) rotate(-20deg);z-index:3}#Butterfly .container .butterfly .tentacles{position:absolute;height:100px;width:100px;left:23%;top:23%;background-color:transparent;border-radius:50% 50% 0;border:3px solid;border-color:transparent black black transparent}#Butterfly .container .butterfly .head{position:absolute;height:30px;width:30px;left:40.5%;top:40.7%;background-color:#272525;border-radius:50%}#Butterfly .container .butterfly .body1{position:absolute;height:100px;width:20px;left:58.2%;top:50%;background-color:#1f1c1c;border-radius:100px;transform:rotate(-45deg)}#Butterfly .container .butterfly .body{position:absolute;height:60px;width:60px;transform:translate(-50%,-50%);left:50%;top:50%;background-color:#292727;border-radius:0 100px}#Butterfly .container .butterfly .wings{position:absolute;transform-origin:center;transform:rotate(-45deg) scale(1.7);top:27%;left:27%;height:200px;width:200px}#Butterfly .container .butterfly .wings .wing{position:absolute;height:100px;width:100px;background:#4169e1;perspective:1000px;transform-style:preserve-3d}#Butterfly .container .butterfly .wings .wing-top-left{top:15px;left:-5px;border-radius:25% 100% 0 50%;background:#565b75;background:linear-gradient(-90deg,#0028ee,#afb3c6 42%,#959eaa 68%,#031950 96%);transform-origin:bottom right;transform:rotate(-15deg);animation:wing-top-left-animation .5s forwards alternate infinite;box-shadow:-5px 5px 10px #0000004d}@keyframes wing-top-left-animation{0%{box-shadow:-5px 5px 10px #0000004d;transform:rotate(-15eg)}to{box-shadow:-5px 5px 10px #0000;transform:rotate(-15deg) rotateY(60deg)}}#Butterfly .container .butterfly .wings .wing-top-right{top:15px;left:105px;border-radius:100% 25% 50% 0;background:#565b75;background:linear-gradient(90deg,#0028ee,#afb3c6 42%,#959eaa 68%,#031950 96%);transform-origin:bottom left;transform:rotate(15deg);animation:wing-top-right-animation .5s forwards alternate infinite;box-shadow:5px 5px 10px #0000004d}@keyframes wing-top-right-animation{0%{box-shadow:5px 5px 10px #0000004d;transform:rotate(15deg)}to{box-shadow:5px 5px 10px #0000;transform:rotate(15deg) rotateY(60deg)}}#Butterfly .container .butterfly .wings .wing-bottom-left{top:115px;left:-6px;border-radius:90% 0 70% 50%;background:#565b75;background:linear-gradient(225deg,#1d3bcf,#afb3c6 42%,#959eaa 68%,#031950 96%);transform-origin:top right;transform:rotate(7deg);animation:wing-bottom-left-animation .5s forwards alternate infinite cubic-bezier(.25,.46,.45,.94);box-shadow:-5px 5px 10px #0000004d}@keyframes wing-bottom-left-animation{0%{box-shadow:-5px 5px 10px #0000004d;transform:rotate(7deg)}to{box-shadow:-5px 5px 10px #0000;transform:rotate(7deg) rotateY(55deg)}}#Butterfly .container .butterfly .wings .wing-bottom-right{top:115px;left:105px;border-radius:0 90% 50% 70%;background:#565b75;background:linear-gradient(135deg,#1d3bcf,#afb3c6 42%,#959eaa 68%,#031950 96%);transform-origin:top left;transform:rotate(-7deg);box-shadow:5px 5px 10px #0000004d;animation:wing-bottom-right-animation .5s forwards alternate infinite cubic-bezier(.25,.46,.45,.94)}@keyframes wing-bottom-right-animation{0%{box-shadow:5px 5px 10px #0000004d;transform:rotate(-7eg)}to{box-shadow:5px 5px 10px #0000;transform:rotate(-7deg) rotateY(55deg)}}#Butterfly .container .plant{position:absolute;left:100px;bottom:200px;height:300px;width:300px}#Butterfly .container .plant .flower{position:absolute;height:150px;width:150px;border-radius:50%;z-index:1}#Butterfly .container .plant .flower .core{height:32%;width:32%;border-radius:50%;position:absolute;transform:translate(-48%,-40%);top:50%;left:48%;background:#ff0;z-index:2}#Butterfly .container .plant .flower .petals{height:100%;width:100%}#Butterfly .container .plant .flower .petals .petal{position:absolute;left:50%;top:50%;height:45%;width:15%;background-color:#cd20ec;border-radius:50%/40% 40% 60% 60%;transform-origin:bottom center;transform:translate(-50%,-90%) rotate(-20deg)}#Butterfly .container .plant .flower .petals .p2{transform:translate(-50%,-100%) rotate(5deg)}#Butterfly .container .plant .flower .petals .p3{transform:translate(-50%,-90%) rotate(30deg)}#Butterfly .container .plant .flower .petals .p4{transform:translate(-65%,-90%) rotate(70deg)}#Butterfly .container .plant .flower .petals .p5{transform:translate(-50%,-100%) rotate(100deg)}#Butterfly .container .plant .flower .petals .p6{transform:translate(-75%,-89%) rotate(115deg)}#Butterfly .container .plant .flower .petals .p8{transform:translate(-65%,-100%) rotate(160deg)}#Butterfly .container .plant .flower .petals .p9{transform:translate(-70%,-95%) rotate(185deg)}#Butterfly .container .plant .flower .petals .p10{transform:translate(-60%,-104%) rotate(212deg)}#Butterfly .container .plant .flower .petals .p11{transform:translate(-50%,-97%) rotate(250deg)}#Butterfly .container .plant .flower .petals .p12{transform:translate(-60%,-102%) rotate(271deg)}#Butterfly .container .plant .flower .petals .p13{transform:translate(-40%,-105%) rotate(292deg)}#Butterfly .container .plant .flower1{top:57%;left:2%}#Butterfly .container .plant .flower2{top:15%;left:52%;transform:scale(.9)}#Butterfly .container .plant .flower2 .petal{background-color:#d905dd!important}#Butterfly .container .plant .stem1{position:absolute;height:50px;width:110px;left:35%;top:111%;background-color:transparent;border-radius:50% 50% 50% 90%;border:8px solid;border-color:transparent transparent rgb(3,95,24) transparent;transform:rotate(75deg)}#Butterfly .container .plant .stem2{position:absolute;height:240px;width:180px;left:25.5%;top:20%;background-color:transparent;border-radius:5% 90% 0 80%;border:6px solid;border-color:transparent rgb(5,113,10) rgb(2,104,26) transparent;transform:rotate(47deg)}#Butterfly .container .plant .leaf1{position:absolute;height:40px;width:44px;transform:translate(-50%,-50%) rotate(30deg);left:65%;top:74%;background-color:#01da51;border-radius:0 100px}#Butterfly .container .plant .leaf2{position:absolute;height:60px;width:70px;transform:translate(-50%,-50%) rotate(-8deg);left:34%;top:119%;background-color:#07a742;border-radius:0 100px}#Butterfly .container .plant .leaf3{position:absolute;height:60px;width:60px;transform:translate(-50%,-50%) rotate(130deg);left:67%;top:102%;background-color:#07a742;border-radius:0 100px}@media only screen and (min-width: 500px){#Butterfly .container{transform:translate(-50%,-50%) scale(.8)}}@media only screen and (min-width: 700px){#Butterfly .container{transform:translate(-50%,-50%) scale(1.2)}}#Clock{height:100vh;position:relative;overflow:hidden}#Clock .container{height:100%;width:100%;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;background-color:#74ebd5;background-image:linear-gradient(103deg,#74ebd5,#9face6)}#Clock .timer-container{width:min(720px,90%);height:90%;display:flex;flex-direction:column;justify-content:space-evenly;background:#240e3fcc;border-radius:1rem;position:relative}#Clock .timer{width:100%;height:40%;display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;place-items:center}#Clock .timer .time-field{color:#fff}#Clock .timer .time-field .label{font-family:Nunito,sans-serif;font-size:1rem;font-weight:700}#Clock .timer .time-field .value{font-family:Qahiri,sans-serif;font-size:2.5rem;color:#bedce5;letter-spacing:2px}#Clock .indicator{height:50%;width:100%;position:relative}#Clock .indicator:before{content:"";height:20%;width:15px;position:absolute;left:50%;transform:translate(-50%);background:tomato;border-radius:8px;bottom:30vh}#Clock .notification-center{position:absolute;top:60px;right:16px;width:200px;background:#ffffff4d;border-radius:1rem;backdrop-filter:blur(5px);padding:.5rem;transform-origin:top right;font-family:Nunito,sans-serif;transform:scale(0)}#Clock .empty-text{color:#fff;text-align:center}#Clock .notification{display:flex;align-items:center;padding:.5rem 1rem;color:#fff;background:#ffffff1a;border-radius:1rem}#Clock .notification i{font-size:1.2rem;padding-right:1rem}#Clock .notification p{font-weight:700}#Clock .clock{height:75vmax;width:75vmax;position:absolute;top:70vh;left:50%;transform:translate(-50%)}#Clock .clock .mark{position:absolute;height:20px;width:100%;top:50%;left:50%;transform-origin:center;display:flex;justify-content:space-between;align-items:center}#Clock .clock .mark:nth-child(1){transform:translate(-50%,-50%) rotate(-90deg)}#Clock .clock .mark:nth-child(2){transform:translate(-50%,-50%) rotate(-60deg)}#Clock .clock .mark:nth-child(3){transform:translate(-50%,-50%) rotate(-30deg)}#Clock .clock .mark:nth-child(4){transform:translate(-50%,-50%)}#Clock .clock .mark:nth-child(5){transform:translate(-50%,-50%) rotate(30deg)}#Clock .clock .mark:nth-child(6){transform:translate(-50%,-50%) rotate(60deg)}#Clock .clock .mark .index{height:10px;width:10%;background-color:#f5f5f5;border-radius:8px}#Eight{height:100vh;overflow:hidden;position:relative;background:#ba94d1}#Eight .container{height:500px;width:500px;position:absolute;transform:translate(-50%,-50%);top:50%;left:50%}#Eight .container *{position:absolute}#Eight .half-circle{height:200px;width:200px;border:30px solid #5F6F94;border-radius:50%;clip-path:polygon(0 50%,100% 50%,100% 100%,0% 100%);top:150px;left:150px}#Eight .c1{transform:rotate(180deg)}#Eight .b{border-color:#fef5ac}#Eight .b1{transform:rotate(-180deg)}#Eight .container:hover .c1{animation:animate-c1 3s forwards}#Eight .container:hover .c2{animation:animate-c2 3s forwards}#Eight .container:hover .b1{animation:animate-b1 3s forwards}#Eight .container:hover .b2{animation:animate-b2 3s forwards}@keyframes animate-c1{0%{top:150px;transform:rotate(180deg)}50%{top:100px;transform:rotate(180deg)}to{top:50px;transform:rotate(0)}}@keyframes animate-c2{0%{top:150px;transform:rotate(0)}50%{top:200px;transform:rotate(0)}to{top:250px;transform:rotate(-180deg)}}@keyframes animate-b1{0%{transform:rotate(-180deg);top:150px}50%{transform:rotate(-180deg);top:250px}to{transform:rotate(0);top:250px}}@keyframes animate-b2{0%{transform:rotate(0);top:150px}50%{transform:rotate(0);top:50px}to{transform:rotate(180deg);top:50px}}#Eight p{width:100%;position:absolute;bottom:5%;text-align:center;opacity:.3;font-size:x-large;font-family:monospace}#SlightlySmiling{height:100vh;display:grid;place-items:center;background:#ffcac8}#SlightlySmiling .container{height:200px;width:200px;background:#eee;border-radius:25px;border:4px dotted lightcyan;box-shadow:22px 32px 25px -4px #0000002e}#SlightlySmiling .container *{position:relative}#SlightlySmiling .face{top:25px;left:25px;height:150px;width:150px;background:#fcb045;background:linear-gradient(0deg,#fcb045,#71ee25 46%,#4efd1d 67%,#e3ffb3);border-radius:50%;animation:rotate 4s ease-in-out infinite alternate-reverse}#SlightlySmiling .eyes{top:30%;display:flex;justify-content:space-evenly}#SlightlySmiling .eye{height:10px;width:10px;background:#2f4f4f;clip-path:circle(50%);position:relative}#SlightlySmiling .smile{width:45px;height:45px;background:transparent;top:45%;margin:auto;border-radius:100% 0;transform:rotate(45deg);border-bottom:4px solid darkslategray;border-right:4px solid darkslategray}@keyframes rotate{0%{transform:rotate(180deg)}to{transform:rotate(0)}}#Pacman{height:100vh;display:grid;place-items:center;background-color:#000}#Pacman .container{height:100px;width:100px}#Pacman .head,#Pacman .mouth{height:50%;width:100%}#Pacman .head{background-color:#ff0;animation:rotate1 both infinite alternate .5s linear;transform-origin:bottom;border-top-left-radius:400px;border-top-right-radius:400px}#Pacman .mouth{background-color:#ff0;animation:rotate2 both infinite alternate .5s linear;transform-origin:top;border-bottom-left-radius:400px;border-bottom-right-radius:400px}@keyframes rotate1{0%{transform:rotate(0)}to{transform:rotate(-45deg)}}@keyframes rotate2{0%{transform:rotate(0)}to{transform:rotate(45deg)}}#Red{height:100vh;background:#f9d371}#Red div{box-sizing:content-box}#Red .red{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:500px;width:500px}#Red .red *{position:absolute}#Red .red .hair1{left:35%;top:7%;width:8%;height:26%;background-color:red;border-radius:90% 100% 100%;border-width:7px 7px 0 0;border-color:#000;border-style:groove;transform:rotate(-77deg)}#Red .red .hair2{left:44%;top:4%;width:8%;height:26%;background-color:red;border-radius:90% 100% 100%;border-width:7px 7px 0 0;border-color:#000;border-style:groove;transform:rotate(-50deg)}#Red .red .tail1{left:9%;top:40%;width:30%;height:15.6%;clip-path:polygon(0 65%,90% 80%,100% 100%,5% 110%);background-color:#141313;transform:rotate(5deg)}#Red .red .tail2{left:11.5%;top:45.8%;width:20%;height:10%;clip-path:polygon(4% 40%,13% 0,100% 57%,96% 83%);background-color:#141313;transform:rotate(13deg)}#Red .red .tail3{left:13%;top:51%;width:18%;height:4%;background-color:#141313;border-radius:50%/100px 100px 0 0;transform:rotate(-50deg)}#Red .red .body1{left:20%;top:20%;width:56%;height:52%;background-color:red;border-radius:43% 60% 50% 50%/50% 60% 40% 40%;border-width:7px;border-color:#000;border-style:inset}#Red .red .chin{width:48%;height:22.2%;left:26.4%;top:55.6%;background-color:#ffcaca;border-radius:100% 0;clip-path:ellipse(49% 35%);transform:rotate(7deg)}#Red .red .chinBorder{width:22.4%;height:6%;border-radius:45% 32% 60% 55%/25% 15% 39% 37%;left:37.4%;top:66%;border:groove 7px;border-color:transparent transparent black transparent;transform:rotate(-1deg)}#Red .red .eye1{left:46%;top:44%;width:13%;height:11%;-webkit-border-radius:100px/100px;border-radius:100px;border-width:.1rem;border-color:#000;border-style:inset;background-color:#fdf7f7}#Red .red .eye2{left:58%;top:44%;width:13%;height:11%;-webkit-border-radius:100px/100px;border-radius:100px;border-width:.1rem;border-color:#000;border-style:inset;background-color:#fdf7f7}#Red .red .eyeball1{left:51.6%;top:48%;width:4.4%;height:4.4%;border-radius:100%;background-color:#141313}#Red .red .eyedot1{left:54%;top:48.6%;width:1.6%;height:1.6%;border-radius:100%;background-color:#fff}#Red .red .eyeball2{left:61.2%;top:48%;width:4.5%;height:4.5%;border-radius:100%;background-color:#141313}#Red .red .eyedot11{left:53%;top:50.6%;width:.6%;height:.6%;border-radius:100%;background-color:#fff}#Red .red .eyedot2{left:63.6%;top:48.6%;width:1.6%;height:1.6%;border-radius:100%;background-color:#fcfcfc}#Red .red .eyedot21{left:62.6%;top:50.6%;width:.6%;height:.6%;border-radius:100%;background-color:#fff}#Red .red .beakBorder1{width:27.6%;height:30.6%;left:47.2%;top:44.4%;background:#000;clip-path:polygon(38% 18%,0 52%,100% 51%);transform:rotate(4deg)}#Red .red .beak1{width:26%;height:28%;left:48%;top:45.6%;background:#eeea1b;clip-path:polygon(38% 17%,0 52%,100% 51%);transform:rotate(4deg)}#Red .red .beakBorder2{height:38.2%;width:21.8%;background:#000;top:40.4%;left:47.6%;clip-path:polygon(49% 73%,0 52%,100% 51%);border-width:3px;transform:rotate(4deg)}#Red .red .beak2{height:36%;width:20%;background:#dfdb0f;top:41.8%;left:48.6%;clip-path:polygon(49% 73%,0 52%,100% 51%);border-width:3px;transform:rotate(4deg)}#Red .red .eyebrow1{height:16%;width:18%;background:#000;transform:rotate(10deg);top:31%;left:42%;clip-path:polygon(0 65%,100% 80%,100% 100%,5% 100%)}#Red .red .eyebrow2{height:16%;width:18%;background:#000;transform:rotate(-17deg);top:30.6%;left:56%;clip-path:polygon(0 80%,100% 65%,100% 100%,0% 100%)}#Ripple{height:100vh;background-color:#21d4fd;background-image:linear-gradient(19deg,#0a86a3,#62058e)}#Ripple .container{height:90%;width:90%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:2rem;background:#ff1493}#Ripple .container div{height:100%;width:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);transform-origin:center;background:#0000004d;opacity:1}#Ripple .d1{animation:ripple 3s forwards infinite linear}#Ripple .d2{animation:ripple 3s .5s forwards infinite linear}#Ripple .d3{animation:ripple 3s 1s forwards infinite linear}#Ripple .d4{animation:ripple 3s 1.5s forwards infinite linear}#Ripple .d5{animation:ripple 3s 2s forwards infinite linear}#Ripple .d6{animation:ripple 3s 2.5s forwards infinite linear}@keyframes ripple{0%{transform:translate(-50%,-50%) scale(0);opacity:1}to{transform:translate(-50%,-50%) scale(1);opacity:0}}#Rocket{height:100vh;overflow:hidden;background:#1cd6ce}#Rocket *{transition:none}#Rocket .rocket-container{height:100%;width:100%;inset:0;display:grid;place-items:center}#Rocket .rocket-placeholder{position:relative;height:80vh;width:300px;background:#293462;border-radius:1rem;display:grid}#Rocket .ignition-countdown-container{position:absolute;height:100px;width:100px;top:0;right:0;display:grid;place-items:center}#Rocket .ignition-countdown-container-animation{animation:ignition-countdown-container-animation 1s forwards ease-out}@keyframes ignition-countdown-container-animation{0%{top:0}to{top:100vh}}#Rocket .ignition-countdown{color:#9acd32;font-family:Qahiri,sans-serif;font-size:80px}#Rocket .rocket{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}#Rocket .rocket-animation-1{transform-origin:bottom;animation:rocket-animation-1 .5s forwards}@keyframes rocket-animation-1{0%{transform:rotate(0)}25%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}75%{transform:rotate(-5deg)}to{transform:rotate(0)}}#Rocket .rocket-animation-2{transform-origin:top;animation:rocket-animation-2 1s forwards ease-out}@keyframes rocket-animation-2{0%{transform:scale(1)}to{transform:scale(.7)}}#Rocket .rocket-animation-3{animation:rocket-animation-3 1s forwards}@keyframes rocket-animation-3{0%{transform:scale(.7) scaleX(1)}to{transform:scale(.7) scaleX(1.2)}}#Rocket .rocket div{position:relative}#Rocket .rocket .head{height:140px;width:140px;background:#000;clip-path:polygon(50% 22%,0% 100%,100% 100%);margin-bottom:-10px}#Rocket .rocket .head:before{content:"";position:absolute;left:15px;bottom:8px;height:110px;width:110px;background:#ac0000;clip-path:polygon(50% 22%,0% 100%,100% 100%)}#Rocket .rocket .head:after{content:"";position:absolute;background:#fff3;height:20px;width:100px;z-index:1;bottom:36px;left:39px;clip-path:polygon(12% 0%,91% 0%,100% 100%,0% 100%);transform:rotate(-123deg)}#Rocket .rocket .body{width:120px;height:200px;background:#000}#Rocket .rocket .body:before{content:"";position:absolute;background:#ffffffe6;height:190px;width:100px;left:10px;top:10px}#Rocket .rocket .body:after{content:"";position:absolute;background:#fff3;height:190px;width:30px;right:10px;top:10px}#Rocket .rocket .body .face{height:100%;width:100%;position:absolute}#Rocket .rocket .body .face .eyes{margin-top:35px;height:40px;width:100%;display:flex;justify-content:space-evenly;align-items:center}#Rocket .rocket .body .face .eyes .eye{margin-top:-15px;height:30px;width:30px;border-radius:50%;border-bottom:5px solid black}#Rocket .eye-i-2{height:10px;width:10px;background:#000;border-radius:50%}#Rocket .eye-2-i-1{height:20px;width:20px;background:#000;border-radius:50%}#Rocket .rocket .body .face .mouth-container{margin-top:23px;height:80px;width:100%}#Rocket .rocket .body .face .mouth-container .m{margin:0 auto;height:5px;width:40%;border-radius:1rem;background:#000}#Rocket .mouth-i-2{margin:0 auto;height:5px;width:5px;background:#000;border-radius:50%}#Rocket .mouth-i-1{height:50px;width:50px;border-radius:50%;border-top:20px solid black;transform:rotate(45deg);margin:-10px 25px}#Rocket .rocket .body .stripes{height:100%;width:100%;position:absolute;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center}#Rocket .rocket .body .stripes .stripe{height:20px;width:100px;background:#ac0000}#Rocket .rocket .tail{height:50px;width:170px;background:#000;clip-path:polygon(15% 0%,85% 0%,100% 100%,0% 100%);z-index:5}#Rocket .rocket .tail:before{content:"";position:absolute;height:30px;width:140px;right:15px;bottom:10px;background:#ac0000;clip-path:polygon(11% 0%,89% 0%,100% 100%,0% 100%)}#Rocket .ignition{width:100%}#Rocket .ignition *{margin:0 auto}#Rocket .fire{visibility:hidden}#Rocket .fire1{height:70px;width:70px;background:red;margin-top:-45px;border-radius:50%;z-index:3;animation:fire-animation 80ms forwards infinite alternate}#Rocket .fire2{height:90px;width:90px;background:#ffff65;margin-top:-70px;border-radius:50%;z-index:2;animation:fire-animation 50ms forwards infinite alternate;animation-delay:5ms}#Rocket .fire3{height:110px;width:110px;background:#fff;margin-top:-95px;border-radius:50%;z-index:1;animation:fire-animation 50ms forwards infinite alternate;animation-delay:10ms}@keyframes fire-animation{0%{transform:scale(1)}to{transform:scale(.7)}}#Rocket .boom{position:absolute;width:100%;height:100%;display:grid;place-items:center;z-index:10;font-family:Lemon,cursive;font-size:60px;color:#9acd32;text-shadow:5px 5px 0 black;transform-style:preserve-3d;perspective:2000px;transform:rotateX(-35deg) rotateY(20deg);opacity:0}#Rocket .boom-animation{animation:boom-animation .5s forwards}@keyframes boom-animation{0%{opacity:0}50%{opacity:1}to{opacity:0}}#Rocket .anniversary-container{position:absolute;height:100%;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:11}#Rocket .anniversary-container .wish{margin:1rem;font-size:xxx-large;color:#9acd32;font-family:Poller One,cursive;letter-spacing:-1px;text-shadow:2px 2px 5px black}#Rocket .happy-animation{animation:happy-animation .5s forwards alternate infinite}@keyframes happy-animation{0%{transform:scaleY(1)}to{transform:scaleY(.9)}}#Rocket .friendship-animation{animation:friendship-animation .5s forwards alternate infinite;animation-delay:.1s}@keyframes friendship-animation{0%{transform:scale(1)}to{transform:scale(.8)}}#Rocket .anniversary-animation{animation:anniversary-animation .5s forwards alternate infinite;animation-delay:.2s}@keyframes anniversary-animation{0%{transform:scaleX(1)}to{transform:scaleX(.8)}}#Rolex{height:100vh;background:#ccd6a6}#Rolex *{transition:none}#Rolex .watch-container{position:absolute;transform:translate(-50%,-50%) scale(.5);top:50%;left:50%;height:500px;width:500px}#Rolex .watch-container .crown{position:absolute;left:108%;height:20%;width:10%;transform:translateY(-50%);top:50%;display:flex}#Rolex .watch-container .crown .c{height:100%;width:30%;background:#555;clip-path:polygon(0 10%,100% 0,100% 100%,0 90%)}#Rolex .watch-container .crown .d{height:100%;width:50%;background:linear-gradient(90deg,#555,#d3d3d3)}#Rolex .watch-container .crown .d .step{width:100%;height:25%}#Rolex .watch-container .crown .d .step .s1{height:50%;width:100%;clip-path:polygon(20% 0,90% 0,100% 100%,0 100%);background:#555;box-shadow:0 -2px 5px 1px #ffffff4d inset}#Rolex .watch-container .crown .d .step .s2{height:50%;width:100%;clip-path:polygon(0 0,100% 0,81% 100%,15% 100%);background:#95d2d4;box-shadow:0 2px 5px 1px #0000004d inset}#Rolex .watch-container .crown .e{height:100%;width:20%;background:#d3d3d3;clip-path:polygon(0 0,100% 40%,100% 60%,0% 100%);box-shadow:-2px -2px 6px 3px #0000004d inset}#Rolex .watch-container .rim{position:absolute;transform:translate(-50%,-50%);top:50%;left:50%}#Rolex .watch-container .r1{height:105%;width:105%;border-radius:50%;background:#fff0f5;box-shadow:0 0 10px 8px #d3d3d3 inset}#Rolex .watch-container .r2{height:108%;width:108%;border-radius:50%;background:#555;box-shadow:0 0 10px 8px #d3d3d3 inset}#Rolex .watch-container .r3{height:120%;width:120%;border-radius:50%;background:#f1f1f1;box-shadow:0 0 25px 20px #0000001a inset}#Rolex .watch-container .dial{position:absolute;height:100%;width:100%;border-radius:50%;background:#95d2d4}#Rolex .watch-container .dial .indices{position:absolute;height:95%;width:95%;transform:translate(-50%,-50%);top:50%;left:50%}#Rolex .watch-container .dial .indices .index{position:absolute;transform:translate(-50%,-50%);top:50%;left:50%;height:100%;width:2px;display:flex;flex-direction:column;justify-content:space-between}#Rolex .watch-container .dial .indices .index .mark{height:3%;width:100%;background:#000;border-radius:2px}#Rolex .watch-container .dial .indices .index:nth-child(0){display:none}#Rolex .watch-container .dial .indices .index:nth-child(1){transform:translate(-50%,-50%) rotate(6deg)}#Rolex .watch-container .dial .indices .index:nth-child(2){transform:translate(-50%,-50%) rotate(12deg)}#Rolex .watch-container .dial .indices .index:nth-child(3){transform:translate(-50%,-50%) rotate(18deg)}#Rolex .watch-container .dial .indices .index:nth-child(4){transform:translate(-50%,-50%) rotate(24deg)}#Rolex .watch-container .dial .indices .index:nth-child(5){display:none}#Rolex .watch-container .dial .indices .index:nth-child(6){transform:translate(-50%,-50%) rotate(36deg)}#Rolex .watch-container .dial .indices .index:nth-child(7){transform:translate(-50%,-50%) rotate(42deg)}#Rolex .watch-container .dial .indices .index:nth-child(8){transform:translate(-50%,-50%) rotate(48deg)}#Rolex .watch-container .dial .indices .index:nth-child(9){transform:translate(-50%,-50%) rotate(54deg)}#Rolex .watch-container .dial .indices .index:nth-child(10){display:none}#Rolex .watch-container .dial .indices .index:nth-child(11){transform:translate(-50%,-50%) rotate(66deg)}#Rolex .watch-container .dial .indices .index:nth-child(12){transform:translate(-50%,-50%) rotate(72deg)}#Rolex .watch-container .dial .indices .index:nth-child(13){transform:translate(-50%,-50%) rotate(78deg)}#Rolex .watch-container .dial .indices .index:nth-child(14){transform:translate(-50%,-50%) rotate(84deg)}#Rolex .watch-container .dial .indices .index:nth-child(15){display:none}#Rolex .watch-container .dial .indices .index:nth-child(16){transform:translate(-50%,-50%) rotate(96deg)}#Rolex .watch-container .dial .indices .index:nth-child(17){transform:translate(-50%,-50%) rotate(102deg)}#Rolex .watch-container .dial .indices .index:nth-child(18){transform:translate(-50%,-50%) rotate(108deg)}#Rolex .watch-container .dial .indices .index:nth-child(19){transform:translate(-50%,-50%) rotate(114deg)}#Rolex .watch-container .dial .indices .index:nth-child(20){display:none}#Rolex .watch-container .dial .indices .index:nth-child(21){transform:translate(-50%,-50%) rotate(126deg)}#Rolex .watch-container .dial .indices .index:nth-child(22){transform:translate(-50%,-50%) rotate(132deg)}#Rolex .watch-container .dial .indices .index:nth-child(23){transform:translate(-50%,-50%) rotate(138deg)}#Rolex .watch-container .dial .indices .index:nth-child(24){transform:translate(-50%,-50%) rotate(144deg)}#Rolex .watch-container .dial .indices .index:nth-child(25){display:none}#Rolex .watch-container .dial .indices .index:nth-child(26){transform:translate(-50%,-50%) rotate(156deg)}#Rolex .watch-container .dial .indices .index:nth-child(27){transform:translate(-50%,-50%) rotate(162deg)}#Rolex .watch-container .dial .indices .index:nth-child(28){transform:translate(-50%,-50%) rotate(168deg)}#Rolex .watch-container .dial .indices .index:nth-child(29){transform:translate(-50%,-50%) rotate(174deg)}#Rolex .watch-container .dial .indices .index:nth-child(30){transform:translate(-50%,-50%) rotate(180deg)}#Rolex .watch-container .dial .indices .index:nth-child(31){transform:translate(-50%,-50%) rotate(186deg)}#Rolex .watch-container .dial .indices .index:nth-child(32){transform:translate(-50%,-50%) rotate(192deg)}#Rolex .watch-container .dial .indices .index:nth-child(33){transform:translate(-50%,-50%) rotate(198deg)}#Rolex .watch-container .dial .indices .index:nth-child(34){transform:translate(-50%,-50%) rotate(204deg)}#Rolex .watch-container .dial .indices .index:nth-child(35){transform:translate(-50%,-50%) rotate(210deg)}#Rolex .watch-container .dial .indices .index:nth-child(36){transform:translate(-50%,-50%) rotate(216deg)}#Rolex .watch-container .dial .indices .index:nth-child(37){transform:translate(-50%,-50%) rotate(222deg)}#Rolex .watch-container .dial .indices .index:nth-child(38){transform:translate(-50%,-50%) rotate(228deg)}#Rolex .watch-container .dial .indices .index:nth-child(39){transform:translate(-50%,-50%) rotate(234deg)}#Rolex .watch-container .dial .indices .index:nth-child(40){transform:translate(-50%,-50%) rotate(240deg)}#Rolex .watch-container .dial .indices .index:nth-child(41){transform:translate(-50%,-50%) rotate(246deg)}#Rolex .watch-container .dial .indices .index:nth-child(42){transform:translate(-50%,-50%) rotate(252deg)}#Rolex .watch-container .dial .indices .index:nth-child(43){transform:translate(-50%,-50%) rotate(258deg)}#Rolex .watch-container .dial .indices .index:nth-child(44){transform:translate(-50%,-50%) rotate(264deg)}#Rolex .watch-container .dial .indices .index:nth-child(45){transform:translate(-50%,-50%) rotate(270deg)}#Rolex .watch-container .dial .indices .index:nth-child(46){transform:translate(-50%,-50%) rotate(276deg)}#Rolex .watch-container .dial .indices .index:nth-child(47){transform:translate(-50%,-50%) rotate(282deg)}#Rolex .watch-container .dial .indices .index:nth-child(48){transform:translate(-50%,-50%) rotate(288deg)}#Rolex .watch-container .dial .indices .index:nth-child(49){transform:translate(-50%,-50%) rotate(294deg)}#Rolex .watch-container .dial .indices .index:nth-child(50){transform:translate(-50%,-50%) rotate(300deg)}#Rolex .watch-container .dial .indices .index:nth-child(51){transform:translate(-50%,-50%) rotate(306deg)}#Rolex .watch-container .dial .indices .index:nth-child(52){transform:translate(-50%,-50%) rotate(312deg)}#Rolex .watch-container .dial .indices .index:nth-child(53){transform:translate(-50%,-50%) rotate(318deg)}#Rolex .watch-container .dial .indices .index:nth-child(54){transform:translate(-50%,-50%) rotate(324deg)}#Rolex .watch-container .dial .indices .index:nth-child(55){transform:translate(-50%,-50%) rotate(330deg)}#Rolex .watch-container .dial .indices .index:nth-child(56){transform:translate(-50%,-50%) rotate(336deg)}#Rolex .watch-container .dial .indices .index:nth-child(57){transform:translate(-50%,-50%) rotate(342deg)}#Rolex .watch-container .dial .indices .index:nth-child(58){transform:translate(-50%,-50%) rotate(348deg)}#Rolex .watch-container .dial .indices .index:nth-child(59){transform:translate(-50%,-50%) rotate(354deg)}#Rolex .watch-container .dial .indicators{position:absolute;height:95%;width:95%;transform:translate(-50%,-50%);top:50%;left:50%}#Rolex .watch-container .dial .indicators .indicator{position:absolute;transform:translate(-50%,-50%);top:50%;left:50%;height:100%;width:6%;display:flex;flex-direction:column;justify-content:space-between}#Rolex .watch-container .dial .indicators .indicator .mark{width:100%;height:15%;display:flex;flex-direction:column;justify-content:space-between;align-items:center}#Rolex .watch-container .dial .indicators .indicator .mark .point{height:15px;width:15px;background:#2f4f4f;border-top:7px ridge darkslategray;border-right:7px ridge #273838;border-bottom:7px ridge #215757;border-left:7px ridge #426363}#Rolex .watch-container .dial .indicators .indicator .mark .legend{height:70%;width:100%;display:flex;justify-content:center}#Rolex .watch-container .dial .indicators .indicator .mark .legend .digit{height:100%;width:50%;background:#eee;border-top:5px ridge #eeeeee;border-left:5px ridge #888888;border-right:5px ridge #95D2D4;border-bottom:5px ridge #eeeeee}#Rolex .watch-container .dial .indicators .indicator .mark .rolex-logo{margin-top:.5rem;height:80%}#Rolex .watch-container .dial .indicators .indicator:nth-child(1){transform:translate(-50%,-50%) rotate(0)}#Rolex .watch-container .dial .indicators .indicator:nth-child(2){transform:translate(-50%,-50%) rotate(30deg)}#Rolex .watch-container .dial .indicators .indicator:nth-child(3){transform:translate(-50%,-50%) rotate(60deg)}#Rolex .watch-container .dial .indicators .indicator:nth-child(4){transform:translate(-50%,-50%) rotate(90deg)}#Rolex .watch-container .dial .indicators .indicator:nth-child(5){transform:translate(-50%,-50%) rotate(120deg)}#Rolex .watch-container .dial .indicators .indicator:nth-child(6){transform:translate(-50%,-50%) rotate(150deg)}#Rolex .watch-container .dial .indicators .indicator:nth-child(7){transform:translate(-50%,-50%) rotate(210deg)}#Rolex .watch-container .dial .indicators .indicator:nth-child(8){transform:translate(-50%,-50%) rotate(240deg)}#Rolex .watch-container .dial .rolex{position:absolute;height:100%;width:100%;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center}#Rolex .watch-container .dial .rolex .text{text-align:center}#Rolex .watch-container .dial .rolex .text1 .brand{font-family:EB Garamond,serif;font-size:1.5rem;font-weight:700;letter-spacing:2px;color:#333;margin-bottom:8px}#Rolex .watch-container .dial .rolex .text1 .t1{font-family:"Source Sans 3",sans-serif;letter-spacing:2px;font-weight:500}#Rolex .watch-container .dial .rolex .text2{font-family:Mallanna,sans-serif;font-weight:500;font-size:14px}#Rolex .watch-container .dial .rolex .text2 p{margin:-8px 0}#Rolex .watch-container .dial .date{height:8%;width:8%;position:absolute;transform:translate(-50%,-50%);top:50%;left:75%;display:grid;place-items:center;background:#f5f5f5;border-top:5px ridge #eeeeee;border-left:5px ridge #888888;border-right:5px ridge #95D2D4;border-bottom:5px ridge #7b9797;box-shadow:5px -5px 15px -8px #000000bf inset}#Rolex .watch-container .dial .date .date-value{text-align:center;font-size:x-large;font-family:"Source Code 3",sans-serif;font-weight:500;margin-top:-2px}#Rolex .watch-container .dial .clock{position:absolute;height:100%;width:100%}#Rolex .watch-container .dial .clock .hour,#Rolex .watch-container .dial .clock .minute,#Rolex .watch-container .dial .clock .circle,#Rolex .watch-container .dial .clock .second,#Rolex .watch-container .dial .clock .point,#Rolex .watch-container .dial .clock .c2{position:absolute;transform:translate(-50%,-50%);top:50%;left:50%}#Rolex .watch-container .dial .clock .hour{height:70%;width:4%;display:flex}#Rolex .watch-container .dial .clock .hour .container{height:100%;width:50%}#Rolex .watch-container .dial .clock .minute{height:80%;width:3%}#Rolex .watch-container .dial .clock .hour,#Rolex .watch-container .dial .clock .minute{display:flex}#Rolex .watch-container .dial .clock .hour .container,#Rolex .watch-container .dial .clock .minute .container{height:60%;width:50%}#Rolex .watch-container .dial .clock .hour .container:nth-child(1),#Rolex .watch-container .dial .clock .minute .container:nth-child(1){background:#eee;clip-path:polygon(30% 0%,100% 0,100% 100%,0% 100%);box-shadow:-2px -2px 4px #0000004d inset;border-bottom-left-radius:4px}#Rolex .watch-container .dial .clock .hour .container:nth-child(2),#Rolex .watch-container .dial .clock .minute .container:nth-child(2){background:#555;clip-path:polygon(0% 0%,70% 0,100% 100%,0% 100%);border-bottom-right-radius:4px}#Rolex .watch-container .dial .clock .hour .cover,#Rolex .watch-container .dial .clock .minute .cover{position:absolute;height:30%;width:50%;background:#fff;border:1px solid darkslategray;transform:translate(-50%,50%);left:50%;top:-10%;clip-path:polygon(20% 0%,80% 0,100% 100%,0% 100%);box-shadow:2px -2px 5px 1px #0000004d inset}#Rolex .watch-container .dial .clock .circle{height:7%;width:7%;border-radius:50%;background:#f6e7c6;box-shadow:0 0 5px 2px #0003 inset}#Rolex .watch-container .dial .clock .c2{height:6.5%;width:6.5%;border-radius:50%;background:#faebd7;box-shadow:0 0 5px 2px #0003 inset}#Rolex .watch-container .dial .clock .second{width:2%;height:90%}#Rolex .watch-container .dial .clock .second .container{height:65%;width:100%;background:#faebd7;clip-path:polygon(30% 0%,70% 0%,100% 100%,0% 100%);border-bottom:1px solid rgba(0,0,0,.5);border-left:1px solid rgba(0,0,0,.5);border-right:1px solid rgba(0,0,0,.5);box-shadow:2px -2px 5px 1px #0003 inset;border-bottom-left-radius:2px;border-bottom-right-radius:2px}#Rolex .watch-container .dial .clock .point{height:2%;width:2%;border-radius:50%;border:3px solid #888888;box-shadow:0 0 5px 2px #0003 inset}@media only screen and (min-width: 500px){#Rolex .watch-container{transform:translate(-50%,-50%) scale(.8)}}@media only screen and (min-width: 700px){#Rolex .watch-container{transform:translate(-50%,-50%) scale(1)}}#SmileInjection{height:100vh;background-color:#0093e9;background-image:linear-gradient(160deg,#0093e9,#80d0c7);background-repeat:no-repeat;background-size:100% 100%}#SmileInjection .container{position:relative;top:-100px;height:100%;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;transform:scale(.8)}#SmileInjection .smiley{height:150px;width:150px;background:#fed800;border-radius:50%;display:flex;flex-direction:column;align-items:center}#SmileInjection .eyes{display:flex;justify-content:space-evenly;width:100%;margin-top:50px;box-sizing:border-box;padding:0 5px}#SmileInjection .eyes .eye{width:20px;height:20px;background:#b57700;float:left;border-radius:100%;position:relative}#SmileInjection .eyes .eye:nth-of-type(2){float:right}#SmileInjection .eyes .eye:after{content:"";display:block;position:absolute;width:0;height:0;background:#fed800;transform:rotate(0);top:-15px;left:5px;transition:all .3s cubic-bezier(.645,.045,.355,1)}#SmileInjection .eyes .eye:first-of-type:after{transform:rotate(0);left:auto;right:5px}#SmileInjection .mouth-smile{margin-top:25px;width:50px;height:25px;background-color:#b57700;border-bottom-left-radius:110px;border-bottom-right-radius:110px;border:10px solid #B57700;border-bottom:0}#SmileInjection .mouth-impartial{margin-top:30px;width:65px;height:15px;background-color:#b57700;border-radius:8px}#SmileInjection .mouth-sad{margin-top:20px;width:50px;height:20px;background-color:#fed800;border-top-left-radius:110px;border-top-right-radius:110px;border:10px solid #B57700;border-bottom:0}#SmileInjection .injection{display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative}#SmileInjection .needle{height:100px;width:5px;background-color:#cfd4d9;clip-path:polygon(50% 0%,0% 100%,100% 100%)}#SmileInjection .syringe{height:250px;width:50px;background-color:#f4f4ff;border:2px solid #ececfd;border-bottom:transparent}#SmileInjection .head{height:5px;width:100px;background-color:#f4f4ff;border-radius:2px}#SmileInjection .pusher{top:102px;width:50px;display:flex;flex-direction:column;justify-content:center;align-items:center;position:absolute}#SmileInjection .liquid{height:200px;width:100%;background-color:#ffa07a;opacity:.5}#SmileInjection .liquid-animation{animation:liquid-animation 3s forwards ease-in-out}@keyframes liquid-animation{0%{height:200px}to{height:5px}}#SmileInjection .tip{position:relative;top:-10px;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}#SmileInjection .tip-head{background-color:#0009;height:10px;width:100%;clip-path:polygon(50% 0%,0% 100%,100% 100%)}#SmileInjection .strip{height:5px;width:100%;background-color:#0000004d}#SmileInjection .space{height:10px;width:100%;background-color:#0009}#SmileInjection .handle{position:relative;top:-10px;width:40px;height:225px;background-color:#0000001a}#SmileInjection .handle-end{position:relative;top:-10px;width:75px;height:5px;border-radius:5px;background-color:#0000001a}#SmileInjection .push{font-family:sans-serif;letter-spacing:2px;font-weight:700;color:tomato}#Home{height:100vh;display:flex;flex-direction:column;background-image:linear-gradient(135deg,#fad0c4,#ffd1ff)}.dark-theme #Home{background-image:linear-gradient(135deg,#3f3b6c,#2c74b3)}#Header{padding:clamp(1rem,5vw,2rem) 0;border-radius:0 0 clamp(2rem,5vw,4rem) clamp(2rem,5vw,4rem);position:relative;background-color:var(--dark-background);backdrop-filter:blur(10px);box-shadow:0 0 15px 5px var(--shadow);overflow:hidden}#Header header{padding:0 1rem;font-family:Tourney,cursive;font-size:clamp(3rem,10vw,5rem);color:var(--secondary);text-align:center}#ThemeSwitcher{position:absolute;height:clamp(4rem,10vw,8rem);aspect-ratio:1;right:clamp(-4rem,-5vw,-2rem);top:clamp(-4rem,-5vw,-2rem);border-radius:50%;transition:1s ease-in-out;background:var(--dark-background);box-shadow:var(--shadow);border:2px dashed var(--accent)}#ThemeSwitcher .theme{font-size:clamp(1.5rem,3vw,3rem);color:var(--secondary);position:absolute;display:grid;place-items:center}#ThemeSwitcher .theme.light{left:0;bottom:0}#ThemeSwitcher .theme.dark{right:0;top:0;transform:rotate(180deg)}#Projects{flex-grow:1;display:grid;place-items:center;position:relative}#Projects .container{width:100%;display:flex;overflow:hidden}#Projects .container .card{min-width:var(--card-width);transform-style:preserve-3d;transition:.4s ease-in-out;padding-bottom:2rem}#Projects .scroll{position:absolute;height:100%;padding:1rem;z-index:1000;display:grid;place-items:center}#Projects .scroll button{padding:2rem 1rem;background:var(--dark-background);backdrop-filter:blur(5px);border:none;border-radius:1rem;box-shadow:#2c3e5080 0 0 10px 5px;opacity:0;transition:.2s ease-out;animation:fade-out 3s linear}#Projects .scroll button:hover{opacity:1}@keyframes fade-out{0%{opacity:1}to{opacity:0}}#Projects .scroll button i{color:var(--secondary);font-size:clamp(3rem,10vw,5rem)}@media screen and (max-width: 700px){#Projects .scroll{display:none}}#Projects .left{left:0}#Projects .right{right:0}#Project{height:100%;background:var(--light-background);backdrop-filter:blur(5px);border-radius:1rem;box-shadow:var(--shadow) 0 10px 20px 0;padding-top:1rem;display:flex;flex-direction:column;border:2px solid var(--accent)}#Project .project-overview{width:calc(100% - 2rem);margin:0 auto;aspect-ratio:16/9;background-repeat:no-repeat;background-position:center;background-size:cover;border-radius:1rem 1rem 2rem 2rem}#Project .footer{width:100%;border-radius:2rem 2rem 1rem 1rem;display:flex;align-items:center;padding:clamp(1rem,3vw,2rem)}#Project .footer .title{flex-grow:1;font-size:clamp(1.5rem,5vw,2.5rem);font-family:Solway,serif;color:var(--secondary)}#Project .footer .nav{display:flex;justify-content:space-evenly;align-items:center;gap:clamp(1rem,2vw,2rem)}