body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}body,html{overflow-x:hidden;width:100%}*{box-sizing:border-box;font-family:poppins,sans-serif;margin:0;padding:0}body{background-color:#081c2b;color:#fff;overflow-x:hidden}.header{align-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0000;background:#081b2980;display:flex;justify-content:space-between;left:0;margin:auto;padding:20px;position:fixed;top:0;transition:transform .3s ease-in-out,background-color .3s ease-in-out;width:100%;z-index:100}.header.hide{transform:translateY(-100%)}.header.show{transform:translateY(0)}.header.transparent{-webkit-backdrop-filter:none;backdrop-filter:none;background-color:initial}.logo{cursor:default;font-weight:600;position:relative}.logo,.navbar button{background:#0000;border:none;color:#fff;cursor:pointer;font-size:25px;text-decoration:none}.navbar button{animation:slideTop .7s ease forwards;animation-delay:calc(.2s*var(--i));display:inline-block;font-weight:500;margin-left:30px;opacity:0;transition:1s}.navbar button.active{color:#0ef}.hover-underline-animation{color:#0ef;display:inline-block;position:relative}.hover-underline-animation:after{background-color:#0ef;bottom:0;content:"";height:2px;left:0;position:absolute;text-underline-position:under;transform:scaleX(0);transform-origin:bottom right;transition:transform .25s ease-out;width:100%}.hover-underline-animation:hover:after{text-underline-position:under;transform:scaleX(1);transform-origin:bottom left}.navbar button:hover{color:#0ef}.home{margin-top:20vh}@keyframes slideLeftss{0%{opacity:0;transform:translateX(100px)}50%{transform:translateX(-105px)}to{opacity:1;transform:translateX(0)}}@keyframes slideLefts{0%{opacity:0;transform:translateX(200px)}50%{transform:translateX(0)}to{opacity:1;transform:translateX(0)}}@media (max-width:768px){.logo{display:none}.navbar{display:flex;justify-content:center;width:100%}.navbar button{font-size:1rem;margin-left:15px;margin-right:15px}}.home{background-image:url(/static/media/joe_background.f8c2d81c15a651299b77.jpg);background-position:50%;background-repeat:no-repeat;background-size:cover;height:100vh;margin:0;overflow:hidden;padding:0;position:relative;width:100vw;z-index:1}.home,.home-overlay{align-items:center;display:flex;justify-content:center}.home-overlay{background-color:#0006;height:100%;width:100%}.home-content{text-align:center}.home-title{animation:slideUp .5s ease forwards;animation-delay:1s;color:#fff;font-size:4rem;font-weight:700;margin-bottom:1rem}.home-line{animation:lineShow 1s ease forwards;background-color:#fff;height:3px;margin:0 auto 1rem;opacity:0;width:90%}.home-subtitle{animation:slideDown 1s ease forwards;animation-delay:3s;color:#fff;font-size:1.5rem;font-weight:300;opacity:0}.name{display:flex;font-size:56px;font-weight:700}.V{translate:340px}.L,.V{animation:showInitials .5s ease forwards;animation-delay:1s;opacity:0;position:relative}.V.moved{animation:moveLeftV .5s ease forwards}.aran,.eela{opacity:0;position:relative}.aran.visible,.eela.visible{animation:moveRight 1s ease forwards;animation-delay:1s}@keyframes showInitials{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes moveLeftV{0%{opacity:1}to{opacity:1;translate:0}}@keyframes moveRight{0%{opacity:0;transform:translateX(-50px)}to{opacity:1;transform:translateX(0)}}@keyframes lineShow{0%{opacity:0;scale:0}to{opacity:1;scale:100%}}@keyframes slideDown{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@media (max-width:768px){.home-title{flex-wrap:wrap;font-size:1.5rem;justify-content:center}.home-subtitle{font-size:.8rem;padding:0 1rem}.home-line{width:90%}.V{translate:150px}}.about{background-color:#081c2b;color:#fff;min-height:100%;padding:3vh 5vw 5vh}.about-title{text-align:center}.aboutBody{align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;margin-top:5vh;overflow:hidden}.about-photo,.about-text{animation-delay:1s;opacity:0;transform:translateX(0);transition:transform 1s ease,opacity 1s ease}.about-text{word-wrap:break-word;line-height:2;max-width:500px;overflow-wrap:break-word;text-align:start}.about-text h2,.about-text p{margin-bottom:1rem}.birth{display:flex}.slide-photo{opacity:1;transform:translateX(-50px)}.slide-text{opacity:1;transform:translateX(50px)}.photo{border-radius:10px;height:auto;max-width:300px;width:100%}.toggle-button{background-color:#ffffff10;border:1px solid #ffffff30;border-radius:5px;color:#fff;cursor:pointer;margin-top:1rem;padding:.6rem 1.2rem;transition:background .3s}.toggle-button:hover{background-color:#ffffff20}.more-info{animation:fadeIn .5s ease-in-out;margin-bottom:5vh;margin-top:2rem}.info-grid{display:flex;flex-wrap:wrap;gap:2rem;justify-content:center}.info-block{background-color:#2a2a2a;border-radius:10px;display:flex;flex-direction:column;justify-content:start;min-height:250px;padding:1.5rem;text-align:center;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease;width:250px}.info-block:hover{transform:translateY(-5px)}.info-block h3{color:#fc0;font-size:1.2rem;margin-bottom:1rem}.icon-group,.icon-group-plus{align-items:center;display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}.icon-group-plus{margin-top:2vh}.icon-group i,.icon-group-plus i{color:#fff;font-size:2rem}.icon-group-plus p,.icon-group-plus span,.info-icon{margin-top:10px}.info-icon{text-align:center}.info-icon p{font-size:small}.info-icon-react{align-items:center;display:flex;flex-direction:column;font-size:small;margin-top:10px}.skill-icon{height:2rem;width:2rem}.modal-overlay{align-items:center;background-color:#0009;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:999}.modal-content{background-color:#222;border-radius:10px;color:#fff;max-width:90%;padding:2rem;position:relative;width:400px}.modal-content h2{color:#fc0;text-align:center}.close-btn{background:#0000;border:none;color:#fff;cursor:pointer;font-size:1.5rem;position:absolute;right:1rem;top:.5rem}@media (max-width:768px){.aboutBody{flex-direction:column}.slide-photo,.slide-text{transform:translateX(0)}.about-text h2{text-align:center}}.countdown{opacity:50%}.project{background-color:#263d4e;color:#fff;min-height:100%;padding:3vh 5vh}.project-title{text-align:center}.project-section{align-items:center;background-color:#263d4e;display:flex;justify-content:center;padding-bottom:2vh}.carousel{height:300px;max-width:500px}.card-container,.carousel{align-items:center;display:flex;justify-content:center;position:relative;width:100%}.card-container{color:#000;height:100%;perspective:1000px}.card{background:#fff;border-radius:12px;box-shadow:0 10px 30px #0003;height:80%;opacity:0;padding:2rem;position:absolute;text-align:center;transition:transform .6s ease,opacity .6s ease;width:300px;z-index:0}.title-card{margin-bottom:1rem}.card.active{opacity:1;transform:scale(1);z-index:2}.card.left,.card.right{filter:blur(4px);opacity:.5;z-index:1}.card.left{transform:translateX(-60%) scale(.9)}.card.right{transform:translateX(60%) scale(.9)}.card.hidden{opacity:0;pointer-events:none}.nav{background:#0000;border:none;color:#000;cursor:pointer;font-size:3rem;position:absolute;top:50%;transform:translateY(-50%);z-index:3}.nav.left{left:0}.nav.right{right:0}.see-all-container{text-align:center}.see-all-button{background-color:#ffffff20;border:1px solid #ffffff60;border-radius:6px;color:#fff;font-weight:500;padding:.7rem 1.5rem;text-decoration:none;transition:background .3s,transform .3s}.see-all-button:hover{background-color:#ffffff40;transform:scale(1.05)}@media (max-width:768px){.card{width:90%}}.contact{background-color:#01111d;padding:4vh 0 2vh;width:100%}ul{align-items:center;display:flex;flex-wrap:wrap;gap:2.5rem;justify-content:center;list-style:none;margin:0 10px;padding:0}.item{animation:slideTop 1s ease forwards;opacity:0;position:relative}.item a:before{background:var(--bg-color);content:"";height:100%;position:absolute;scale:1 0;transform-origin:bottom;transition:scale .5s ease;width:100%;z-index:0}.item:hover a:before{scale:1 1}.icon{color:#fff;font-size:2rem;transition:.5s ease;z-index:2}.item-1:hover .icon{color:#1877f2;transform:scale(1.5)}.item-2:hover .icon{-webkit-text-fill-color:#0000;background:linear-gradient(to bottom right,#f9ce34,#ee2a7b,#6228d7);-webkit-background-clip:text;transform:scale(1.5)}.item-3:hover .icon{color:#0077b5;transform:scale(1.5)}.item-4:hover .icon{color:#555;transform:scale(1.5)}.item-5:hover .icon{-webkit-text-fill-color:#0000;background:linear-gradient(0deg,#4d0505,#c00);-webkit-background-clip:text;transform:scale(1.5)}.copyr{animation:showUp 1s ease forwards;animation-delay:3s;display:flex;justify-content:center;margin-top:30px;opacity:0;position:relative}.copyr.hidden,.socials.hidden .item{opacity:0;pointer-events:none;transform:translateY(50px)}.socials.visible .item{animation:slideTop 1s ease forwards;opacity:1}.copyr.visible{animation:showUp 1s ease forwards;opacity:1}@keyframes slideTop{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}@keyframes showUp{0%{opacity:0}to{opacity:1}}@media (max-width:768px){ul{gap:1.5rem;margin:0 4vw}.icon{font-size:1.5rem}.copyr{flex-wrap:wrap;font-size:.8rem;padding:0 2vw;text-align:center}}.title{margin-top:20px;text-align:center}.back-button{background-color:initial;display:inline-block;text-align:start;transform:scale(1);transform-origin:left center;transition:transform .3s ease,color .3s ease}.back-button:hover{color:#aaa;transform:scale(1.1)}.project-page{background-color:#081c2b;color:#fff;display:flex;flex-direction:column;min-height:80vh;padding:5vh 5vw}.tab-buttons{display:flex;gap:1rem;justify-content:center;margin-bottom:2rem}.tab{background-color:#ffffff10;border:1px solid #ffffff30;border-radius:5px;color:#fff;cursor:pointer;padding:.5rem 1rem;transition:background .3s ease}.tab:hover{background-color:#ffffff20}.tab.active{background-color:#fc0;color:#081c2b;font-weight:700}.project-list{display:flex;flex-wrap:wrap;gap:2rem;justify-content:center}.project-card{background-color:#2a2a2a;border-radius:10px;justify-content:space-between;min-height:250px;padding:1.5rem;transition:transform .3s;width:250px}.project-card,.project-content{display:flex;flex-direction:column}.project-content{gap:.5rem}.project-card:hover{transform:translateY(-5px)}.project-card h2{color:#fc0;margin-bottom:.5rem}.circle-button{align-items:center;align-self:start;background-color:initial;border:1px solid #ffffff40;border-radius:50%;color:#fff;display:flex;font-size:.9rem;gap:.5rem;gap:0;height:40px;justify-content:center;overflow:hidden;padding:0;position:relative;text-decoration:none;transition:all .5s ease;white-space:nowrap;width:40px}.circle-button .icon{font-size:1.2rem;transition:transform .5s ease;z-index:2}.circle-button .button-text{color:#fff;max-width:0;opacity:0;overflow:hidden;transition:max-width .5s ease,opacity .5s ease;white-space:nowrap}.circle-button:hover{background-color:#ffffff20;border-radius:8px;gap:.5rem;height:40px;padding:0 1.2rem;width:auto}.circle-button:hover .button-text{max-width:200px;opacity:1}.circle-button.github:hover{background-color:#333}.circle-button.web:hover{background-color:#005f9e}.project-header{align-items:center;display:flex;gap:.7rem;margin-bottom:.5rem}.project-logo{background-color:#fff;border-radius:50%;height:35px;object-fit:cover;width:35px}.gallery{background-color:#081c2b;box-sizing:border-box;color:#fff;min-height:100vh;padding:5vh 5vw}.gallery-title{color:#fff;font-size:2.5rem;text-align:center}.quotes{color:#acacac;margin-bottom:2rem;margin-top:1rem;text-align:center}.back-button{background:none;border:none;color:#fff;cursor:pointer;font-size:1.2rem;margin-bottom:1rem;transition:color .2s}.back-button:hover{color:#fc0}.masonry{column-count:3;column-gap:1vh;padding-left:20vw;padding-right:20vw}.masonry-item{background-color:#0e2433;border-radius:10px;box-shadow:0 4px 10px #0000004d;break-inside:avoid;cursor:pointer;margin-bottom:1vh;overflow:hidden;page-break-inside:avoid;transition:transform .3s}.masonry-item img{border-radius:10px;display:block;height:auto;transition:transform .3s ease;width:100%}.masonry-item:hover img{transform:scale(1.05)}.gallery-modal{align-items:center;background-color:#0a0a0ae6;display:flex;flex-direction:column;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:1000}.modal-image{border-radius:12px;box-shadow:0 0 15px #fff3;max-height:90%;max-width:90%}.close-modal{color:#fff;cursor:pointer;font-size:2rem;margin-top:1rem}.close-modal:hover{color:#858585}.nav-button{background:none;border:none;color:#fff;cursor:pointer;font-size:3rem;padding:0 1rem;position:absolute;top:50%;transform:translateY(-50%);transition:color .2s;-webkit-user-select:none;user-select:none;z-index:1001}.nav-button:hover{color:#858585}.nav-button.left{left:2vw}.nav-button.right{right:2vw}.end{margin-top:2rem;text-align:center}.scroll-to-top{background-color:#80808080;border:none;border-radius:50px;bottom:4vh;box-shadow:0 4px 12px #0000004d;color:#fff;cursor:pointer;font-size:1.2rem;font-weight:700;left:50%;padding:.8rem 1.5rem;position:fixed;transform:translateX(-50%);transition:background-color .3s ease;z-index:1000}.scroll-to-top:hover{background-color:#808080cc}@media (max-width:1400px){.masonry{column-count:3;padding-left:5vw;padding-right:5vw}}@media (max-width:900px){.masonry{column-count:2;padding-left:4vw;padding-right:4vw}}@media (max-width:600px){.masonry{column-count:1;padding-left:3vw;padding-right:3vw}}.gallery-home{height:40vh;overflow:hidden;position:relative}.gallery-collage{align-content:space-between;display:flex;flex-wrap:wrap;height:100%;justify-content:center;overflow:hidden;padding:4px;position:absolute;width:100%;z-index:1}.collage-img{filter:blur(4px);flex:1 0 180px;height:32%;margin:2px;max-width:220px;object-fit:cover;opacity:.5}.gallery-overlay{align-items:center;background-color:#0006;display:flex;height:100%;justify-content:center;position:relative;width:100%;z-index:2}.gallery-button{background-color:#ffffffe6;border:none;border-radius:10px;color:#000;cursor:pointer;font-size:1rem;padding:1rem 2rem;transition:.3s ease}.gallery-button:hover{background-color:#fff;transform:scale(1.05)}
/*# sourceMappingURL=main.ad716616.css.map*/