:root{--max-width:1100px;--border-radius:12px;--font-mono:ui-monospace,Menlo,Monaco,"Cascadia Mono","Segoe UI Mono","Roboto Mono","Oxygen Mono","Ubuntu Monospace","Source Code Pro","Fira Mono","Droid Sans Mono","Courier New",monospace;--foreground-rgb:0,0,0;--background-start-rgb:214,219,220;--background-end-rgb:255,255,255;--primary-glow:conic-gradient(from 180deg at 50% 50%,#16abff33 0deg,#0885ff33 55deg,#54d6ff33 120deg,#0071ff33 160deg,transparent 360deg);--secondary-glow:radial-gradient(#fff,hsla(0,0%,100%,0));--tile-start-rgb:239,245,249;--tile-end-rgb:228,232,233;--tile-border:conic-gradient(#00000080,#00000040,#00000030,#00000020,#00000010,#00000010,#00000080);--callout-rgb:238,240,241;--callout-border-rgb:172,175,176;--card-rgb:180,185,188;--card-border-rgb:131,134,135}@media (prefers-color-scheme:dark){:root{--foreground-rgb:255,255,255;--background-start-rgb:0,0,0;--background-end-rgb:0,0,0;--primary-glow:radial-gradient(rgba(1,65,255,.4),rgba(1,65,255,0));--secondary-glow:linear-gradient(to bottom right,rgba(1,65,255,0),rgba(1,65,255,0),rgba(1,65,255,.3));--tile-start-rgb:2,13,46;--tile-end-rgb:2,5,19;--tile-border:conic-gradient(#ffffff80,#ffffff40,#ffffff30,#ffffff20,#ffffff10,#ffffff10,#ffffff80);--callout-rgb:20,20,20;--callout-border-rgb:108,108,108;--card-rgb:100,100,100;--card-border-rgb:200,200,200}}*{box-sizing:border-box;padding:0;margin:0}body,html{display:flex;max-width:100vw;overflow-x:hidden}a{color:inherit;text-decoration:none}@media (prefers-color-scheme:dark){html{color-scheme:dark}}.frame{width:90%;margin:40px auto;text-align:center}.custom-btn{width:130px;height:40px;color:#fff;border-radius:5px;padding:10px 25px;font-family:Lato,sans-serif;font-weight:500;background:transparent;cursor:pointer;transition:all .3s ease;position:relative;display:inline-block;box-shadow:inset 2px 2px 2px 0 hsla(0,0%,100%,.5),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);outline:none;margin:20px}.btn-1{background:#060e83;background:linear-gradient(0deg,#060e83,#0c19b4);border:none}.btn-1:hover{background:#0003ff;background:linear-gradient(0deg,#0003ff,#027efb)}.btn-2{background:#6009f0;background:linear-gradient(0deg,#6009f0,#8105f0);border:none}.btn-2:before{height:0%;width:2px}.btn-2:hover{box-shadow:4px 4px 6px 0 hsla(0,0%,100%,.5),-4px -4px 6px 0 hsla(213,8%,49%,.5),inset -4px -4px 6px 0 hsla(0,0%,100%,.2),inset 4px 4px 6px 0 rgba(0,0,0,.4)}.btn-3{background:#00acee;background:linear-gradient(0deg,#00acee,#027efb);width:130px;height:40px;line-height:42px;padding:0;border:none}.btn-3 span{position:relative;display:block;width:100%;height:100%}.btn-3:after,.btn-3:before{position:absolute;content:"";right:0;top:0;background:#027efb;transition:all .3s ease}.btn-3:before{height:0%;width:2px}.btn-3:after{width:0;height:2px}.btn-3:hover{background:transparent;box-shadow:none}.btn-3:hover:before{height:100%}.btn-3:hover:after{width:100%}.btn-3 span:hover{color:#027efb}.btn-3 span:after,.btn-3 span:before{position:absolute;content:"";left:0;bottom:0;background:#027efb;transition:all .3s ease}.btn-3 span:before{width:2px;height:0%}.btn-3 span:after{width:0;height:2px}.btn-3 span:hover:before{height:100%}.btn-3 span:hover:after{width:100%}.btn-4{background-color:#4dccc6;background-image:linear-gradient(315deg,#4dccc6,#96e4df 74%);line-height:42px;padding:0;border:none}.btn-4:hover{background-color:#89d8d3;background-image:linear-gradient(315deg,#89d8d3,#03c8a8 74%)}.btn-4 span{position:relative;display:block;width:100%;height:100%}.btn-4:after,.btn-4:before{position:absolute;content:"";right:0;top:0;box-shadow:4px 4px 6px 0 hsla(0,0%,100%,.9),-4px -4px 6px 0 hsla(213,8%,49%,.2),inset -4px -4px 6px 0 hsla(0,0%,100%,.9),inset 4px 4px 6px 0 hsla(213,8%,49%,.3);transition:all .3s ease}.btn-4:before{height:0%;width:.1px}.btn-4:after{width:0;height:.1px}.btn-4:hover:before{height:100%}.btn-4:hover:after{width:100%}.btn-4 span:after,.btn-4 span:before{position:absolute;content:"";left:0;bottom:0;box-shadow:4px 4px 6px 0 hsla(0,0%,100%,.9),-4px -4px 6px 0 hsla(213,8%,49%,.2),inset -4px -4px 6px 0 hsla(0,0%,100%,.9),inset 4px 4px 6px 0 hsla(213,8%,49%,.3);transition:all .3s ease}.btn-4 span:before{width:.1px;height:0%}.btn-4 span:after{width:0;height:.1px}.btn-4 span:hover:before{height:100%}.btn-4 span:hover:after{width:100%}.btn-5{width:130px;height:40px;line-height:42px;padding:0;border:none;background:#ff1b00;background:linear-gradient(0deg,#ff1b00,#fb4b02)}.btn-5:hover{color:#f0094a;background:transparent;box-shadow:none}.btn-5:after,.btn-5:before{content:"";position:absolute;top:0;right:0;height:2px;width:0;background:#f0094a;box-shadow:-1px -1px 5px 0 #fff,7px 7px 20px 0 #0003,4px 4px 5px 0 #0002;transition:all .4s ease}.btn-5:after{right:inherit;top:inherit;left:0;bottom:0}.btn-5:hover:after,.btn-5:hover:before{width:100%;transition:all .8s ease}.btn-6{background:#f796c0;background:radial-gradient(circle,#f796c0 0,#76aef1 100%);line-height:42px;padding:0;border:none}.btn-6 span{position:relative;display:block;width:100%;height:100%}.btn-6:after,.btn-6:before{position:absolute;content:"";height:0%;width:1px;box-shadow:-1px -1px 20px 0 #fff,-4px -4px 5px 0 #fff,7px 7px 20px 0 rgba(0,0,0,.4),4px 4px 5px 0 rgba(0,0,0,.3)}.btn-6:before{right:0;top:0;transition:all .5s ease}.btn-6:after{left:0;bottom:0;transition:all .5s ease}.btn-6:hover{background:transparent;color:#76aef1;box-shadow:none}.btn-6:hover:after,.btn-6:hover:before{transition:all .5s ease;height:100%}.btn-6 span:after,.btn-6 span:before{position:absolute;content:"";box-shadow:-1px -1px 20px 0 #fff,-4px -4px 5px 0 #fff,7px 7px 20px 0 rgba(0,0,0,.4),4px 4px 5px 0 rgba(0,0,0,.3)}.btn-6 span:before{left:0;top:0}.btn-6 span:after,.btn-6 span:before{width:0;height:.5px;transition:all .5s ease}.btn-6 span:after{right:0;bottom:0}.btn-6 span:hover:after,.btn-6 span:hover:before{width:100%}.btn-7{background:linear-gradient(0deg,#ff9700,#fb4b02);line-height:42px;padding:0;border:none}.btn-7 span{position:relative;display:block;width:100%;height:100%}.btn-7:after,.btn-7:before{position:absolute;content:"";right:0;bottom:0;background:#fb4b02;box-shadow:-7px -7px 20px 0 hsla(0,0%,100%,.9),-4px -4px 5px 0 hsla(0,0%,100%,.9),7px 7px 20px 0 rgba(0,0,0,.2),4px 4px 5px 0 rgba(0,0,0,.3);transition:all .3s ease}.btn-7:before{height:0%;width:2px}.btn-7:after{width:0;height:2px}.btn-7:hover{color:#fb4b02;background:transparent}.btn-7:hover:before{height:100%}.btn-7:hover:after{width:100%}.btn-7 span:after,.btn-7 span:before{position:absolute;content:"";left:0;top:0;background:#fb4b02;box-shadow:-7px -7px 20px 0 hsla(0,0%,100%,.9),-4px -4px 5px 0 hsla(0,0%,100%,.9),7px 7px 20px 0 rgba(0,0,0,.2),4px 4px 5px 0 rgba(0,0,0,.3);transition:all .3s ease}.btn-7 span:before{width:2px;height:0%}.btn-7 span:after{height:2px;width:0}.btn-7 span:hover:before{height:100%}.btn-7 span:hover:after{width:100%}.btn-8{background-color:#f0ecfc;background-image:linear-gradient(315deg,#f0ecfc,#c797eb 74%);line-height:42px;padding:0;border:none}.btn-8 span{position:relative;display:block;width:100%;height:100%}.btn-8:after,.btn-8:before{position:absolute;content:"";right:0;bottom:0;background:#c797eb;transition:all .3s ease}.btn-8:before{height:0%;width:2px}.btn-8:after{width:0;height:2px}.btn-8:hover:before{height:100%}.btn-8:hover:after{width:100%}.btn-8:hover{background:transparent}.btn-8 span:hover{color:#c797eb}.btn-8 span:after,.btn-8 span:before{position:absolute;content:"";left:0;top:0;background:#c797eb;transition:all .3s ease}.btn-8 span:before{width:2px;height:0%}.btn-8 span:after{height:2px;width:0}.btn-8 span:hover:before{height:100%}.btn-8 span:hover:after{width:100%}.btn-9{border:none;overflow:hidden}.btn-9,.btn-9:after{transition:all .3s ease}.btn-9:after{position:absolute;content:" ";z-index:-1;top:0;left:0;width:100%;height:100%;background-color:#1fd1f9;background-image:linear-gradient(315deg,#1fd1f9,#b621fe 74%)}.btn-9:hover{background:transparent;color:#fff}.btn-9:hover,.btn-9:hover:after{box-shadow:4px 4px 6px 0 hsla(0,0%,100%,.5),-4px -4px 6px 0 hsla(213,8%,49%,.2),inset -4px -4px 6px 0 hsla(0,0%,100%,.5),inset 4px 4px 6px 0 hsla(213,8%,49%,.3)}.btn-9:hover:after{transform:scale(2) rotate(180deg)}.btn-10{background:#1609f0;background:linear-gradient(0deg,#1609f0,#316ef4);color:#fff;border:none;overflow:hidden}.btn-10,.btn-10:after{transition:all .3s ease}.btn-10:after{position:absolute;content:" ";top:0;left:0;z-index:-1;width:100%;height:100%;transform:scale(.1)}.btn-10:hover{color:#fff;border:none;background:transparent}.btn-10:hover:after{background:#0003ff;background:linear-gradient(0deg,#027efb,#0003ff 100%);transform:scale(1)}.btn-11{border:none;background:#fb2175;background:linear-gradient(0deg,#fb2175,#ea4c89);color:#fff;overflow:hidden}.btn-11:hover{text-decoration:none;color:#fff}.btn-11:before{position:absolute;content:"";display:inline-block;top:-180px;left:0;width:30px;height:100%;background-color:#fff;animation:shiny-btn1 3s ease-in-out infinite}.btn-11:hover{opacity:.7}.btn-11:active{box-shadow:4px 4px 6px 0 hsla(0,0%,100%,.3),-4px -4px 6px 0 hsla(213,8%,49%,.2),inset -4px -4px 6px 0 hsla(0,0%,100%,.2),inset 4px 4px 6px 0 rgba(0,0,0,.2)}.btn-12{position:relative;right:20px;bottom:20px;border:none;box-shadow:none;line-height:42px;perspective:230px}.btn-12,.btn-12 span{width:130px;height:40px}.btn-12 span{background:#00acee;background:linear-gradient(0deg,#00acee,#027efb);display:block;position:absolute;box-shadow:inset 2px 2px 2px 0 hsla(0,0%,100%,.5),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);border-radius:5px;margin:0;text-align:center;box-sizing:border-box;transition:all .3s}.btn-12 span:first-child{box-shadow:-7px -7px 20px 0 #fff9,-4px -4px 5px 0 #fff9,7px 7px 20px 0 #0002,4px 4px 5px 0 #0001;transform:rotateX(90deg);transform-origin:50% 50% -20px}.btn-12 span:nth-child(2){transform:rotateX(0deg);transform-origin:50% 50% -20px}.btn-12:hover span:first-child{transform:rotateX(0deg)}.btn-12:hover span:first-child,.btn-12:hover span:nth-child(2){box-shadow:inset 2px 2px 2px 0 hsla(0,0%,100%,.5),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1)}.btn-12:hover span:nth-child(2){color:transparent;transform:rotateX(-90deg)}.btn-13{background-color:#89d8d3;background-image:linear-gradient(315deg,#89d8d3,#03c8a8 74%);border:none;z-index:1}.btn-13:after{position:absolute;content:"";width:100%;height:0;bottom:0;left:0;z-index:-1;border-radius:5px;background-color:#4dccc6;background-image:linear-gradient(315deg,#4dccc6,#96e4df 74%);box-shadow:-7px -7px 20px 0 #fff9,-4px -4px 5px 0 #fff9,7px 7px 20px 0 #0002,4px 4px 5px 0 #0001;transition:all .3s ease}.btn-13:hover{color:#fff}.btn-13:hover:after{top:0;height:100%}.btn-13:active{top:2px}.btn-14{background:#ff9700;border:none;z-index:1}.btn-14:after{position:absolute;content:"";width:100%;height:0;top:0;left:0;z-index:-1;border-radius:5px;background-color:#eaf818;background-image:linear-gradient(315deg,#eaf818,#f6fc9c 74%);box-shadow:inset 2px 2px 2px 0 hsla(0,0%,100%,.5),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);transition:all .3s ease}.btn-14:hover{color:#000}.btn-14:hover:after{top:auto;bottom:0;height:100%}.btn-14:active{top:2px}.btn-15{background:#b621fe;border:none;z-index:1}.btn-15:after{position:absolute;content:"";width:0;height:100%;top:0;right:0;z-index:-1;background-color:#663dff;border-radius:5px;box-shadow:inset 2px 2px 2px 0 hsla(0,0%,100%,.5),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);transition:all .3s ease}.btn-15:hover{color:#fff}.btn-15:hover:after{left:0;width:100%}.btn-15:active{top:2px}.btn-16{border:none;color:#000}.btn-16:after{position:absolute;content:"";width:0;height:100%;top:0;left:0;direction:rtl;z-index:-1;box-shadow:-7px -7px 20px 0 #fff9,-4px -4px 5px 0 #fff9,7px 7px 20px 0 #0002,4px 4px 5px 0 #0001;transition:all .3s ease}.btn-16:hover{color:#000}.btn-16:hover:after{left:auto;right:0;width:100%}.btn-16:active{top:2px}#nav-icon1,#nav-icon2,#nav-icon3,#nav-icon4{width:60px;height:45px;position:relative;margin:50px auto;transform:rotate(0deg);transition:.5s ease-in-out;cursor:pointer;overflow:"hidden"}#nav-icon1 span,#nav-icon3 span,#nav-icon4 span{display:block;position:absolute;height:9px;width:100%;background:#d3531a;border-radius:9px;opacity:1;left:0;transform:rotate(0deg);transition:.25s ease-in-out}#nav-icon1 span:first-child{top:0}#nav-icon1 span:nth-child(2){top:18px}#nav-icon1 span:nth-child(3){top:36px}#nav-icon1.open span:first-child{top:18px;transform:rotate(135deg)}#nav-icon1.open span:nth-child(2){opacity:0;left:-60px}#nav-icon1.open span:nth-child(3){top:18px;transform:rotate(-135deg)}#nav-icon2 span{display:block;position:absolute;height:9px;width:50%;background:#d3531a;opacity:1;transform:rotate(0deg);transition:.25s ease-in-out}#nav-icon2 span:nth-child(2n){left:50%;border-radius:0 9px 9px 0}#nav-icon2 span:nth-child(odd){left:0;border-radius:9px 0 0 9px}#nav-icon2 span:first-child,#nav-icon2 span:nth-child(2){top:0}#nav-icon2 span:nth-child(3),#nav-icon2 span:nth-child(4){top:18px}#nav-icon2 span:nth-child(5),#nav-icon2 span:nth-child(6){top:36px}#nav-icon2.open span:first-child,#nav-icon2.open span:nth-child(6){transform:rotate(45deg)}#nav-icon2.open span:nth-child(2),#nav-icon2.open span:nth-child(5){transform:rotate(-45deg)}#nav-icon2.open span:first-child{left:5px;top:7px}#nav-icon2.open span:nth-child(2){left:calc(50% - 5px);top:7px}#nav-icon2.open span:nth-child(3){left:-50%;opacity:0}#nav-icon2.open span:nth-child(4){left:100%;opacity:0}#nav-icon2.open span:nth-child(5){left:5px;top:29px}#nav-icon2.open span:nth-child(6){left:calc(50% - 5px);top:29px}#nav-icon3 span:first-child{top:0}#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3){top:18px}#nav-icon3 span:nth-child(4){top:36px}#nav-icon3.open span:first-child{top:18px;width:0;left:50%}#nav-icon3.open span:nth-child(2){transform:rotate(45deg)}#nav-icon3.open span:nth-child(3){transform:rotate(-45deg)}#nav-icon3.open span:nth-child(4){top:18px;width:0;left:50%}#nav-icon4 span:first-child{top:0;transform-origin:left center}#nav-icon4 span:nth-child(2){top:18px;transform-origin:left center}#nav-icon4 span:nth-child(3){top:36px;transform-origin:left center}#nav-icon4.open span:first-child{transform:rotate(45deg);top:-3px;left:8px}#nav-icon4.open span:nth-child(2){width:0;opacity:0}#nav-icon4.open span:nth-child(3){transform:rotate(-45deg);top:39px;left:8px}