@import url(https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=JetBrains+Mono:wght@100;200;300;400;500;600;700;800&display=swap);*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"rlig" 1,"calt" 1;background:#0f172a;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:JetBrains Mono,source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.typing-animation{animation:typing 3.5s steps(40),blink-caret .75s step-end infinite;border-right:2px solid #ff6b35;overflow:hidden;white-space:nowrap}.glass-effect{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffff1a;border:1px solid #fff3}.gradient-text{background:linear-gradient(90deg,#60a5fa,#a855f7,#ec4899)}@keyframes typing{0%{width:0}to{width:100%}}@keyframes blink-caret{0%,to{border-color:#0000}50%{border-color:orange}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.animate-pulse{animation:pulse 3s infinite}.animate-fade-in{animation:fadeIn .5s ease-in-out}.animate-slide-up{animation:slideUp .5s ease-out}.dark{color-scheme:dark}html{scroll-behavior:smooth}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#1e293b}::-webkit-scrollbar-thumb{background:#0ea5e9;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#0284c7}html{height:100%;margin:0;padding:0;width:100%}*{text-decoration:none}body{background-color:#040b14;color:#fff}.gradient-text{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#60a5fa,#a855f7);-webkit-background-clip:text;background-clip:text}@keyframes entry{0%{font-size:x-small;left:0;transform:translateX(-100%)}50%{font-size:smaller;transform:translateX(100%)}}.portfolio{display:flex}.before-intro{color:#fff;font-size:small;left:20%;position:absolute;top:35%}.sidebar-container{background:#040b14;bottom:0;left:0;overflow-y:auto;padding:0 15px;position:fixed;top:0;transition:all .5s ease-in-out;transition:all .5s;width:300px;z-index:9997}.socials{display:flex;flex-wrap:wrap;justify-content:space-between}.socials a{height:20px;padding-bottom:50px}.socials a img{border:0;border-radius:0;height:20px;margin-left:10px;margin-top:0;object-fit:contain;width:120px}.sidebar-container div{margin-top:44px}.sidebar-container .links{margin-top:-25px}.sidebar-container .links li{list-style:none;padding-bottom:30px;position:relative;white-space:nowrap}.sidebar-container .links li a span{color:#a8a9b4;font-family:sans-serif;font-size:15px;padding-left:10px}.sidebar-container .links li a span:active{color:#a8a9b4}.sidebar-container img{border:8px solid #2c2f3f;border-radius:50%;display:block;height:150px;margin:55px auto;object-fit:fill;width:150px}.hamburger{visibility:hidden}.hero{background:url(/static/media/jo-cool.a8523f48326956025861.jpeg) top;background-attachment:fixed;background-repeat:no-repeat;background-size:contain;display:flex;height:100vh;margin-left:-200px;overflow:hidden;width:100%}.hero .right{left:78%;position:absolute;z-index:1000}.hero .right img{height:150px;width:150px}.hero .right .cv,.hero .right .linkedin{background-color:#add8e6;height:150px;margin-top:50px;width:150px}.hero .right h4 a b{color:#fff;font-size:larger}.hero:before{background:#050d184d;bottom:0;content:"";height:100vh;left:0;margin-left:-100px;position:absolute;right:0;top:0;z-index:1}.sidebar-container h1{color:#fff;font-family:Poppins,sans-serif;font-size:22px;font-weight:600;margin:0;padding:0;text-align-last:center}.sidebar-container h1 a,.sidebar-container h1 a:hover{color:#fff}.hero .hero-container{left:35%;min-width:300px;position:relative;top:30%;z-index:2}.hero h1{color:#fff;font-size:54px;font-weight:700;line-height:56px;margin:0 0 10px}.hero p{color:#fff;font-family:Poppins,sans-serif;font-size:26px;margin-bottom:50px;width:400px}.hero p span{border-bottom:3px solid #149ddd;color:#fff;letter-spacing:1px;padding-bottom:4px}section{overflow:hidden;padding:60px 0}.section-bg{background:#f5f8fd}.section-title{padding-bottom:30px}.section-title h2{color:#173b6c;font-size:32px;font-weight:700;margin-bottom:20px;padding-bottom:20px;position:relative}.section-title h2:after{background:#149ddd;bottom:0;content:"";display:block;height:3px;left:0;position:absolute;width:50px}.section-title p{margin-bottom:0}.portfolio .body{color:#fff;margin-left:400px;margin-right:10px;position:relative;width:100%}.about .content h3{color:#173b6c;font-size:26px;font-weight:700}.about .content ul{list-style:none;padding:0}.about .content ul li{align-items:center;display:flex;margin-bottom:20px}.about .content ul strong{margin-right:10px}.about .content ul i{color:#149ddd;font-size:16px;line-height:0;margin-right:5px}.about .content p:last-child{margin-bottom:0}.about-content{display:flex}.about-content img{height:600px;padding-right:24px;width:500px}.portfolio .row .filters{background-color:#050d18;border:3px solid #37b3ed;border-radius:30px;color:#fff;left:30%;padding:2px;position:relative;width:300px}.filters ul{align-items:center;display:flex;justify-content:space-between;list-style:none}.filters ul li{cursor:pointer}.filter-active,.filters ul li:hover{background-color:#0d6efd;border-radius:30px;padding:3px}.filters ul:last-child{margin-right:50px}.projects{display:flex;flex-wrap:wrap;margin:10px}.projects img{height:250px;width:250px}.project-hp,.project-panel{align-items:center;background-color:#149ddd;display:flex;height:40px;justify-content:center;margin:0;overflow:hidden;visibility:hidden;width:100%}.visible{visibility:visible}.view{background-color:#050d18;color:#fff;height:100%;left:0;overflow-y:hidden;position:fixed;top:0;width:100%;z-index:1000000}.view .title h2{padding-left:30%;padding-right:30%}.view p{cursor:pointer;text-align:center}.view .title p{font-size:xx-large}.gallery{align-items:center;left:25%;overflow:hidden;overflow-x:scroll;position:relative}.gal,.gallery{display:flex;height:700px;width:700px}.gallery .gal img{height:700px;padding-right:20px;width:700px}.proj{margin-left:24px;width:250px}.project-panel p:last-child{margin-left:50px}.project-panel p:first-child{margin-left:-10px;margin-right:50px}.view .title{align-items:center;display:flex;justify-content:space-evenly}@keyframes panel{0%{transform:translateY(30px)}to{transform:translateY(0)}}@keyframes hp{0%{transform:translateY(-30px)}to{transform:translateY(0)}}.projects .proj:hover{animation:panel .1s linear;border:3px solid #18d26e;box-shadow:0 3px 10px #0003}#proj:hover>#panel{animation:panel .3s linear;visibility:visible}#proj:hover>#hp{animation:hp .3s linear;visibility:visible}.project-panel-animation{animation:panel .3s linear}.hp{animation:hp .3s linear;margin:0}.selected-project{border:3px solid #18d26e;box-shadow:0 3px 10px #0003}.project-panel p:hover{cursor:pointer;text-align:center}.lang,.row{display:flex}.lang{margin-left:310px;margin-top:10px;width:200px}.lang select{background-color:#050d18;border-radius:30px;color:#fff;height:50px;padding:10px;width:200px}.skills{padding:16px}.resume .container{display:flex;flex-wrap:wrap}.resume .resume-title{color:#050d18;font-size:26px;font-weight:700;margin-bottom:20px;margin-top:20px}.resume .resume-item{border-left:2px solid #1f5297;margin-top:-2px;padding:0 0 20px 20px;position:relative}.resume .resume-item h4{color:#050d18;font-family:Poppins,sans-serif;font-size:18px;font-weight:600;line-height:18px;margin-bottom:10px;text-transform:uppercase}.resume .resume-item h5{background:#173b6c;display:inline-block;font-size:16px;font-weight:600;margin-bottom:10px;padding:5px 15px}.resume .resume-item ul{padding-left:20px}.resume .resume-item ul li{padding-bottom:10px}.resume .resume-item:last-child{padding-bottom:0}.resume .resume-item:before{background:#fff;border:2px solid #1f5297;border-radius:50px;content:"";height:16px;left:-9px;position:absolute;top:0;width:16px}.resume .resume-div div,.resume .resume-div h3,.resume .resume-div h4,.resume .resume-div p{color:#fff}.contact{padding-bottom:130px}.contact-main{display:flex}label{color:#040b14;padding-right:20px}.contact-main .my-contact-details{margin-right:50px}.contact .info{background:#fff;box-shadow:0 0 24px 0 #0000001f;padding:30px;width:100%}.contact .info i{align-items:center;background:#dff3fc;border-radius:50px;color:#149ddd;display:flex;float:left;font-size:20px;height:44px;justify-content:center;transition:all .3s ease-in-out;width:44px}.contact .info h4{color:#050d18;font-size:22px;font-weight:600;margin-bottom:5px;padding:0 0 0 60px}.contact .info p{color:#173b6c;font-size:14px;margin-bottom:20px;padding:0 0 10px 60px}.contact .info .email p{padding-top:5px}.contact .info .social-links{padding-left:60px}.contact .info .social-links a{background:#333;border-radius:50%;color:#fff;display:inline-block;font-size:18px;height:36px;line-height:1;margin-right:10px;padding:8px 0;text-align:center;transition:.3s;width:36px}.contact .info .address:hover i,.contact .info .email:hover i,.contact .info .phone:hover i,.contact .info .social-links a:hover{background:#149ddd;color:#fff}.contact .php-email-form{background:#fff;box-shadow:0 0 24px 0 #0000001f;padding:30px;width:100%}.form-control{border-color:#dfe3e8;border-radius:0;box-shadow:none;font-size:14px;height:44px;width:100%}.contact .php-email-form .form-group{display:flex;justify-content:space-between;width:100%}.contact .php-email-form .validate{color:red;display:none;font-size:13px;font-weight:400;margin:0 0 15px}.contact .php-email-form .error-message{background:#ed3c0d;color:#fff;display:none;font-weight:600;padding:15px;text-align:left}.contact .php-email-form .error-message br+br{margin-top:25px}.contact .php-email-form .sent-message{background:#18d26e;color:#fff;display:none;font-weight:600;padding:15px;text-align:center}.contact .php-email-form .loading{background:#fff;display:none;padding:15px;text-align:center}.contact .php-email-form .loading:before{animation:animate-loading 1s linear infinite;border:3px solid #18d26e;border-radius:50%;border-top-color:#eee;content:"";display:inline-block;height:24px;margin:0 10px -6px 0;width:24px}.contact .php-email-form .form-group{margin-bottom:15px}.contact .php-email-form label{padding-bottom:8px}.contact .php-email-form input,.contact .php-email-form textarea{border-radius:0;box-shadow:none;font-size:14px}.contact .php-email-form input{height:44px}.contact .php-email-form textarea{padding:10px 15px}.contact .php-email-form button[type=submit]{background:#149ddd;border:0;border-radius:4px;color:#fff;padding:10px 24px;transition:.4s}.contact .php-email-form button[type=submit]:hover{background:#37b3ed}@keyframes animate-loading{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes text-load{0%{transform:rotate(0deg)}50%{line-height:2em;text-transform:capitalize;transform:translateY(-500px)}to{line-height:4em;text-transform:capitalize;transform:translateY(-1000px)}}.splash{color:#fff;left:35%;position:absolute;top:40%}.splash h1{width:400px}.splash p{cursor:pointer;font-size:20px;position:fixed}.text{animation:text-load 2s none;transform:translateY(-1000px)}.breadcrumbs{background:#f9f9f9;padding:20px 0}.breadcrumbs h2{font-size:26px;font-weight:300}.breadcrumbs ol{display:flex;flex-wrap:wrap;font-size:15px;list-style:none;margin:0;padding:0}.breadcrumbs ol li+li{padding-left:10px}.breadcrumbs ol li+li:before{color:#0e2442;content:"/";display:inline-block;padding-right:10px}@media (max-width:768px){.breadcrumbs .d-flex{display:block!important}.breadcrumbs ol{display:block}.breadcrumbs ol li{display:inline-block}}@media (max-width:508px){.side-c{left:-300px;visibility:hidden}.splash{left:10%;overflow-x:hidden;width:300px}.splash h1{max-width:300px}.portfolio .row .filters{left:2%}.row{display:block}.lang{margin-left:10px}.portfolio .projects{display:block}.hero{background-size:cover;height:90vh}.hero:before{height:91vh;z-index:1}.hero .hero-container{height:50vh;padding-top:30px;top:0}.hero .hero-container p,.hero-container h1{font-size:16px;left:30%;position:relative;text-align:center;top:30%;width:200px}.hero{width:600px}.hero .right{align-items:center;display:flex;justify-content:center;left:5px;top:88vh}.hero .right .cv,.hero .right .linkedin,.hero .right img{height:30px;margin:0;width:30px}.hero .right div{align-items:center;display:flex}.hero .right h4{font-size:small;padding-left:14px}.about-content{display:block}.about{margin-top:50px;padding:7px}.contact-main{display:block}.portfolio .body{color:#fff;margin-left:-1px;overflow-x:hidden;overflow-y:auto;padding:3px;position:relative;width:100%}.body .hamburger{background-color:#0d6efd;border-radius:50px;height:24px;padding:10px;position:fixed;right:10px;top:10px;visibility:visible;width:24px;z-index:100}.hero .hero-container{z-index:1}.view{position:fixed}.gallery{align-items:center;display:flex;left:0;overflow:hidden;overflow-x:scroll;position:relative}.gal,.gallery{height:50vh;width:400px}.gal img{height:100%;object-fit:contain;width:400px}.title h2{font-size:large}.hamburger .line{background-color:#1f2674;color:#173b6c;height:2px;margin-bottom:3px;margin-top:4.5px;padding-left:3.5px;position:relative;width:20px}@keyframes lines{0%{transform:rotate(0deg) translateY(0) translateX(0)}to{transform:rotate(45deg) translateY(5px) translateX(4px)}}@keyframes liness{0%{transform:rotate(0deg) translateY(0) translateX(0)}to{transform:rotate(-45deg) translateY(-5px) translateX(4px)}}.hamburger .lines:nth-child(2){visibility:hidden}.hamburger .lines:first-child{animation:lines 1s none;transform:rotate(45deg) translateY(5px) translateX(4px)}.hamburger .lines:last-child{animation:liness 1s none;transform:rotate(-45deg) translateY(-5px) translateX(4px)}@keyframes lines1{to{transform:rotate(0deg) translateY(0) translateX(0)}0%{transform:rotate(45deg) translateY(5px) translateX(4px)}}@keyframes liness1{to{transform:rotate(0deg) translateY(0) translateX(0)}0%{transform:rotate(-45deg) translateY(-5px) translateX(4px)}}.hamburger .lines1:nth-child(2){visibility:visible}.hamburger .lines1:first-child{animation:lines1 1s none;transform:rotate(0deg) translateY(0) translateX(0)}.hamburger .lines1:last-child{animation:liness1 1s none;transform:rotate(0deg) translateY(0) translateX(0)}}
/*# sourceMappingURL=main.209b5d0c.css.map*/