@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap");body{margin:0;padding:0;height:100vh;color:#ddd;font-family:Montserrat,sans-serif;background:#000;text-shadow:.5em .5em 10px #0008;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cpolygon fill='%23c34cf8' points='957 450 539 900 1396 900'/%3E%3Cpolygon fill='%23b49abc' points='957 450 872.9 900 1396 900'/%3E%3Cpolygon fill='%23bea4d9' points='-60 900 398 662 816 900'/%3E%3Cpolygon fill='%23b187c4' points='337 900 398 662 816 900'/%3E%3Cpolygon fill='%23d177e8' points='1203 546 1552 900 876 900'/%3E%3Cpolygon fill='%23a53ef2' points='1203 546 1552 900 1162 900'/%3E%3Cpolygon fill='%23b4a1cb' points='641 695 886 900 367 900'/%3E%3Cpolygon fill='%239e84b2' points='587 900 641 695 886 900'/%3E%3Cpolygon fill='%23bb87d5' points='1710 900 1401 632 1096 900'/%3E%3Cpolygon fill='%239485a2' points='1710 900 1401 632 1365 900'/%3E%3Cpolygon fill='%23a05de9' points='1210 900 971 687 725 900'/%3E%3Cpolygon fill='%23bd41e9' points='943 900 1210 900 971 687'/%3E%3C/svg%3E");background-attachment:fixed;background-size:100%;background-position:bottom;background-repeat:no-repeat}::-webkit-scrollbar{display:none}@keyframes AnimateBG{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}a{color:inherit;text-decoration:none;transition:.3s}a:hover{color:#fff}.background{background-size:300% 300%;animation:AnimateBG 20s ease infinite;background-image:radial-gradient(#0000,#0005),linear-gradient(-45deg,rgba(22,87,104,.7),rgba(43,55,107,.7) 50%,rgba(80,34,98,.7));-webkit-animation:AnimateBG 20s ease infinite;background-color:#000d}#canvasbg,.background{height:100vh;width:100vw;z-index:0;position:fixed}#canvasbg{top:0;left:0}.landing-container{width:100%;height:100vh;overflow:hidden;transition:.3s;display:flex;flex-direction:column}.landing-container .page-container{width:300vw;transition:.6s;display:flex;overflow:hidden;box-sizing:border-box;padding:10px 0;transform:translate(-100vw)}.landing-container .page-container section{width:100vw;min-height:100vh;height:-moz-fit-content;height:fit-content}.landing-container .page-container .landing{display:flex;justify-content:Center;align-items:center;width:100vw;padding-bottom:50px}.landing-container .page-container .landing .home{display:grid;max-width:800px;grid-template-columns:1fr 1fr;width:100%}.landing-container .page-container .landing .header{display:flex;flex-direction:column;padding:10px;box-sizing:border-box;justify-content:center;grid-column-start:1;grid-column-end:1;grid-row-start:1;grid-row-end:1}.landing-container .page-container .landing .header b{letter-spacing:1px;font-size:18px;margin:4px}.landing-container .page-container .landing .intro{display:flex;flex-direction:column;padding:10px;box-sizing:border-box;grid-column-start:1;grid-column-end:1;grid-row-start:2;grid-row-end:2}.landing-container .page-container .landing .intro b{letter-spacing:1px;font-size:18px;margin:4px}.landing-container .page-container .landing .intro .links{display:flex;flex-direction:column;padding:10px 0}.landing-container .page-container .landing .intro .links a{display:flex;padding:4px;border-radius:4px;align-items:Center;transition:.3s;transform:translateY(-30px);opacity:0}.landing-container .page-container .landing .intro .links .show{transform:translateY(0);opacity:1}.landing-container .page-container .landing .intro .links a img{width:40px;height:40px}.landing-container .page-container .landing .intro .links a div{display:flex;flex-direction:column;padding-left:4px}.landing-container .page-container .landing .intro .links a div span{font-size:10px}.landing-container .page-container .landing .intro .links a div b{font-size:12px;margin:4px 0}.landing-container .page-container .landing .intro .links a:hover{background:#4448}.landing-container .page-container .landing .intro .links .special{background:linear-gradient(45deg,#1977d2aa,transparent)}.landing-container .page-container .landing .intro .links .special:hover{background:linear-gradient(45deg,#1977d2,transparent);color:#fff}.landing-container .page-container .landing .interactive{max-height:100vh;display:flex;flex-direction:column;justify-content:Center;box-sizing:border-box;padding:10px;grid-column-start:2;grid-column-end:2;grid-row-start:1;grid-row-end:3}.landing-container .page-container .landing .interactive .app-feature{opacity:0;transform:translateX(30px);max-width:300px}.landing-container .page-container .landing .interactive .app-feature .head{max-height:200px}.landing-container .page-container .landing .interactive .show{opacity:1;transform:translateX(0);box-shadow:10px 10px 10px #0004}.app-feature{border-radius:9px;background:#4448;width:100%;max-width:400px;margin:10px 0;overflow:hidden;transition:.3s;cursor:pointer}.app-feature .head{width:100%;height:auto;max-height:340px;overflow:hidden;display:flex;justify-content:Center;align-items:baseline}.app-feature .head img{width:100%;transition:.3s}.app-feature .head img:hover{transform:scale(1.02)}.app-feature .head span{transition:.3s}.app-feature .info{width:100%;flex:1 1;display:flex;box-sizing:border-box;padding:4px 10px 10px}.app-feature .info .icon{width:40px;height:40px;transition:.3s;position:absolute;transform:translateY(calc(-50% - 5px))}.app-feature .info .text{width:100%;box-sizing:border-box}.app-feature .info .text b{font-size:12px;margin-left:50px}.app-feature .info .text .links{font-size:12px;display:flex;flex-wrap:wrap;padding-top:10px;box-sizing:border-box}.app-feature .info .text .links a{flex:1 1}.app-feature .info .text .links a div{display:flex;justify-content:Center;align-items:Center;min-width:130px;height:40px;transition:.3s}.app-feature .info .text .links a div:hover{transform:scale(1.02);color:#fff}.app-feature .info .text .links .url div{box-sizing:border-box;padding:4px 10px;background:#1977d2;border-radius:3px;margin:4px}.app-feature .info .text .links .github div{box-sizing:border-box;padding:4px 10px;background:#444;border-radius:3px;margin:4px}.app-feature .info .text .links .github div span{transform:none}.landing-container .page-container .work{display:flex;flex-direction:column;align-items:Center;justify-content:center}.landing-container .page-container .work .header{display:flex;flex-direction:column;padding:10px;min-height:140px;width:100%;justify-content:Center;align-items:Center}.landing-container .page-container .work .header .h{letter-spacing:1px;font-size:18px;margin:4px;padding:10px}.landing-container .page-container .work .grid{display:flex;justify-content:Center;width:100%;max-width:1280px;padding:8px 0 80px}.landing-container .page-container .work .grid .center{display:Grid;grid-template-columns:1fr 1fr 1fr 1fr;max-width:1100}.landing-container .page-container .work .grid .item{width:100%;max-width:320px;box-sizing:border-box;padding:8px;transition:.3s;opacity:0;transform:translateX(-30px)}.landing-container .page-container .work .grid .show{opacity:1;transform:translateX(0)}.landing-container .page-container .work .grid .item .app-feature{margin:0;height:auto;box-shadow:10px 10px 10px #0004}.landing-container .page-container .work .grid .item .app-feature::nth-child(2){transform:translateY(30px)}.landing-container .page-container .about{display:flex;justify-content:Center;align-items:center;padding-bottom:50px}.landing-container .page-container .about .center{width:100%;max-width:680px;min-height:500px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto}.landing-container .page-container .about .center div b{letter-spacing:1px;font-size:18px;margin:4px}.landing-container .page-container .about .center .left{grid-column-start:1;grid-column-end:1;display:flex;flex-direction:column;padding:0 10px;justify-content:center;opacity:0;transform:translateY(30px);transition:all .5s ease .5s}.landing-container .p2 .about .center .left{opacity:1;transform:none}.landing-container .p2 .about .center .right{grid-column-start:2;grid-column-end:2;display:flex;flex-direction:column;padding:0 10px;justify-content:center}.landing-container .page-container .about .center .right .skill{padding:10px 0;font-size:14px}.landing-container .page-container .about .center .right .skill div{padding:10px;display:flex;flex-direction:Column}.landing-container .page-container .about .center .right .skill div:after{content:"";width:0;height:3px;background:#f669;border-radius:3px;margin:4px 0;transition:all 1s ease-out .5s;box-shadow:1px 1px 5px #0005}.landing-container .p2 .about .center .right .skill .design:after,.landing-container .p2 .about .center .right .skill .react:after{width:80%}.landing-container .p2 .about .center .right .skill .node:after{width:70%}.landing-container .p2 .about .center .right .skill .firebase:after,.landing-container .p2 .about .center .right .skill .three:after{width:60%}.landing-container .p2 .about .center .right .skill .mongo:after{width:70%}.landing-container .p2 .about .center .right .skill .pwa:after{width:60%}.landing-container .p2 .about .center .right .skill .data:after{width:80%}.landing-container .p2 .about .center .bottom{grid-column-start:1;grid-column-end:3;display:flex;flex-wrap:wrap;justify-content:space-between;font-size:12px;padding:10px 10px 20px}.landing-container .p2 .about .center .bottom *{max-width:360px;padding:10px 0}footer{position:fixed;bottom:0;height:60px;align-self:center;border-radius:9px 9px 0 0;overflow:hidden;-webkit-backdrop-filter:blur(35px);backdrop-filter:blur(35px);text-shadow:none}footer,footer .link{display:flex;justify-content:center}footer .link{align-items:center;color:#ddd;cursor:pointer;transition:.3s;background:#2228;flex-direction:column;width:100px}footer .link:before{content:"";height:2px;width:0;background:#ddd8;transition:.3s}footer .link:hover:before,footer .selected:before{width:100%}footer .link span{padding:10px;box-sizing:border-box;flex:1 1;justify-content:center;align-items:Center;display:flex;font-weight:600;font-size:14px;letter-spacing:1px}.landing-page{display:flex;justify-content:space-around;flex-direction:column;align-items:Center;width:100%}.home-button{z-index:1;height:40px;align-self:baseline;padding:10px;margin-left:10px;display:flex;align-items:center;font-size:20px;position:relative}.landing-page .page{display:flex;width:100%;max-width:800px;min-height:500px;padding:10px;box-sizing:border-box}.landing-page .page .images{flex:1 1;max-width:500px;overflow-x:hidden;box-sizing:border-box;display:flex;animation:AnimateImg .5s ease 1}.landing-page .page .images .image-list{min-width:100%;height:100%;display:flex;transition:.3s}.landing-page .page .images .image-list .image{min-width:100%;height:100%;position:relative;padding:10px;box-sizing:border-box}.landing-page .page .images .image-list .image .img{border-radius:9px}.landing-page .page .images .control{position:absolute;width:360px;height:500px;display:flex;justify-content:space-between}.landing-page .page .images .control .dots{height:500px;display:flex;align-items:flex-end;justify-content:Center;flex:1 1}.landing-page .page .images .control .dots div{height:8px;width:8px;background:#fff6;box-shadow:0 0 8px #000;border-radius:50%;margin:5px 8px;transition:.3s;cursor:pointer}.landing-page .page .images .control .dots div:hover{scale:1.1}.landing-page .page .images .control .dots .show{background:#fff}.landing-page .page .images .back{width:160px;height:500px;cursor:pointer;transition:.3s;display:flex;align-items:Center;justify-content:flex-start;transition:.5s;opacity:0}.landing-page .page .images:hover .back{opacity:1}.landing-page .page .images .back *{rotate:-90deg;width:32px;height:32px;margin:10px;transition:.5s;box-shadow:inset 0 0 30px #000;border-radius:50%}.landing-page .page .images .back:hover *{scale:1.1}.landing-page .page .images .forward{width:100px;height:500px;cursor:pointer;transition:.3s;display:flex;align-items:Center;justify-content:flex-end;transition:.5s;opacity:0}.landing-page .page .images:hover .forward{opacity:1}.landing-page .page .images .forward *{rotate:90deg;width:32px;height:32px;margin:10px;transition:.5s;box-shadow:inset 0 0 30px #000;border-radius:50%}.landing-page .page .images .forward:hover *{scale:1.1}.landing-page .page .info{flex:1 1;z-index:1;display:flex;flex-direction:column;justify-content:Center;box-sizing:border-box;padding:10px 20px;animation:AnimateInfo .5s ease 1}.landing-page .page .info .icon{width:40px;height:40px;transition:.3s;padding:20px;align-self:center}.landing-page .page .info b{font-size:18px;letter-spacing:1px}.landing-page .page .info p{font-size:14px;letter-spacing:1px}.landing-page .page .info .links{font-size:12px;display:flex;flex-direction:column;box-sizing:border-box}.landing-page .page .info .links a{flex:1 1}.landing-page .page .info .links a div{display:flex;justify-content:Center;align-items:Center;min-width:130px;height:40px;transition:.3s}.landing-page .page .info .links a div:hover{transform:scale(1.02);color:#fff}.landing-page .page .info .links .url div{box-sizing:border-box;padding:10px;background:#1977d2;border-radius:3px;margin:10px 0}.landing-page .page .info .links .github div{box-sizing:border-box;padding:10px;background:#444;border-radius:3px;margin:10px 0}.landing-page .page .info .links .github div span{transform:none}@keyframes AnimateImg{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:none}}@keyframes AnimateInfo{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}@media only screen and (max-width:1080px){.landing-container .page-container .work .grid .center{grid-template-columns:1fr 1fr 1fr}}@media only screen and (max-width:680px){.landing-container .page-container .landing{flex-direction:column;justify-content:start}.landing-container .page-container .landing .home{grid-template-columns:1fr}.landing-container .page-container .landing .header{min-height:40vh}.landing-container .page-container .landing .intro{width:100%;grid-row-start:2;grid-row-end:2}.landing-container .page-container .landing .interactive{width:100%;padding-bottom:50px;grid-column-start:1;grid-column-end:1;grid-row-start:3;grid-row-end:3}.landing-container .page-container .work .header{min-height:30vh;align-items:start}.landing-container .page-container .work .grid .center{grid-template-columns:1fr 1fr}.app-feature .head{max-height:50vw}.landing-container .page-container .about .center{grid-template-columns:1fr;grid-template-rows:auto;padding-bottom:100px}.landing-container .page-container .about .center .left{grid-column-start:1;grid-column-end:1;min-height:60vh}.landing-container .page-container .about .center .bottom,.landing-container .page-container .about .center .right{grid-column-start:1;grid-column-end:1}.landing-page .page{flex-direction:column}.landing-page .page .images{max-width:680px;width:100%;height:400px}.landing-page .page .images .control,.landing-page .page .images .image-list{height:70vh}.landing-page .page .images .control .dots{height:calc(70vh + 20px)}.landing-page .page .images .control .back,.landing-page .page .images .control .forward{height:70vh}.landing-page .page .images .control *{opacity:1}.landing-page .page .info{min-height:450px;padding:10px}footer .link{font-size:14px}}