:root{--primary: rgb(28, 214, 206);--secondary: rgb(50, 52, 58)}@keyframes bounceMe{0%,20%,53%,80%,to{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}40%,43%{-webkit-transition-timing-function:cubic-bezier(.755,.05,.855,.06);transition-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}70%{-webkit-transition-timing-function:cubic-bezier(.755,.05,.855,.06);transition-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-3px,0);transform:translate3d(0,-3px,0)}90%{-webkit-transform:translate3d(0,-2,0);transform:translate3d(0,-4px,0)}}@keyframes jiggle{0%{transform:rotate(0)}25%{transform:rotate(-1deg)}50%{transform:rotate(2deg)}75%{transform:rotate(0)}to{transform:rotate(0)}}@keyframes bounce{0%{transform:translateY(-50px)}50%{transform:translateY(12px)}to{transform:translateY(0)}}body{overflow-x:hidden}#app{position:relative;width:100vw}#app .main-nav{transition:background-color .3s ease}#app .main-nav .navbar-brand{color:#fff}#app .main-nav .link-items{height:50px}#app .main-nav .link-items ul{list-style:none;height:100%;display:flex;align-items:center}#app .main-nav .link-items ul li a{min-width:36px;min-height:36px;width:auto;display:flex;justify-content:center;align-items:center;text-decoration:none;font-size:24px;color:#fff;transition:all ease .3s}#app .main-nav .link-items ul li a:hover{background-color:#fff3}#app .main-nav .link-items ul li .btn-custom{font-weight:600;font-size:1.8rem}#app main{display:flex;flex-direction:column;gap:80px}#app .bg-navbar{background-color:var(--primary)}@media (max-width: 768px){#app .color-container{display:none!important}}#app .color-container{position:fixed;top:30%;z-index:3;right:1px;list-style:none;display:flex;gap:16px;opacity:1}#app .color-container .show-color-btn{position:absolute;right:0;bottom:16px;z-index:3;display:flex;justify-content:center;align-items:center;background-color:#0000004d;color:#ffffffb3;height:60px;width:60px;font-size:32px;border:none;border-top-left-radius:8px;border-bottom-left-radius:8px}#app .color-container .show-color-btn i{animation:jiggle 1s ease-in-out infinite}#app .color-container .settings-pop-up{position:absolute;background-color:#fff;right:80px;display:flex;bottom:4px;padding:24px;border-radius:16px;color:#fff;opacity:0;border:2px solid rgba(0,0,0,.2);transition:opacity .5s ease-in-out,visibility 0s .5s}#app .color-container .settings-pop-up label{color:#000}#app .color-container .settings-pop-up ul{display:flex;list-style:none;gap:10px;margin:0}#app .color-container .settings-pop-up ul li button{height:20px;width:20px;border-radius:100%;cursor:pointer;border:0px;transition:transform ease .3s;border:1px solid var(--primary)}#app .color-container .settings-pop-up ul li button:hover{border:2px solid var(--primary);transform:scale(1.1)}#app .color-container .settings-pop-up.show{opacity:1;visibility:visible;animation:bounce .3s ease-in}#app .color-container .settings-pop-up:before{content:"";position:absolute;z-index:3;width:0;height:0;border-left:15px solid #ffffff;border-top:10px solid transparent;border-bottom:12px solid transparent;right:-15px;top:50%;transform:translateY(-50%)}#app .color-container .settings-pop-up:after{content:"";position:absolute;z-index:2;width:0;height:0;border-left:18px solid rgba(0,0,0,.2);border-top:12px solid transparent;border-bottom:15px solid transparent;right:-18px;top:50%;transform:translateY(-50%)}#app .up-btn{position:fixed;bottom:24px;right:32px;height:48px;width:48px;background-color:var(--primary);display:flex;justify-content:center;align-items:center;color:#fff;text-decoration:none;animation:bounceMe 1.3s ease-in-out infinite;transition:display .3s ease-in}main{position:relative;width:100vw;overflow-x:hidden}.banner-container{position:relative;background-color:var(--primary);min-height:100vh;overflow:hidden}.banner-container .bg-image{position:relative;display:flex;justify-content:center;overflow:hidden}.banner-container .bg-image img{width:100%;object-fit:cover;max-width:1200px;height:100vh;object-position:bottom}.banner-container .bg-image .overlay{position:absolute;height:100%;width:100%;background-color:#0003}.banner-container .content{position:absolute;width:100%;top:20%;bottom:0}.banner-container .content .container .details{padding-top:62px;width:100%;height:100%;display:flex;flex-direction:column;justify-content:end;align-items:center}.banner-container .content .container .details img{width:80px;height:auto;border-radius:50%}.banner-container .content .container .details .type-container{display:flex;font-size:1.8rem;color:#fff;height:30px;gap:2px}.banner-container .content .container .details .type-container span{color:#000}.banner-container .content .container .details .name,.banner-container .content .container .details .type-js{text-align:center;line-height:normal}.banner-container .content .container .details .name{font-size:4rem;font-weight:500;letter-spacing:3px;text-transform:uppercase;font-family:Anton,sans-serif;color:#fff}@media (max-width: 768px){.banner-container .content .container .details .name{font-size:3rem}.banner-container .content .container .details .type-js{font-size:.8rem}}.banner-container .content .container .details .btn-contact-me{margin-top:30px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.banner-container .content .container .details .btn-contact-me a{font-weight:600;height:42px;width:160px;border-radius:50px;text-transform:uppercase;background-color:var(--secondary);color:#fff;animation:bounceMe 1.3s ease-in-out infinite}.banner-container .content .container .details .btn-contact-me .btn-light{box-shadow:0 1px 2px #000}section{font-size:16px}section .card{margin-top:80px;border-radius:24px;border:1px solid rgba(var(--primary),1);padding:8px}section .title-container{width:100%;display:flex;justify-content:center;text-align:center}section .title-container div:nth-child(1){text-transform:uppercase;font-size:2.6em;font-weight:900;text-align:center;color:var(--secondary)}@media (max-width: 768px){section .title-container div:nth-child(1){font-size:2em}}section .information{display:flex;justify-content:center}section .information p{max-width:920px;text-align:center}section ul{list-style:none;display:flex;gap:16px;font-size:4em;justify-content:center;flex-wrap:wrap;margin:0;padding:0}section ul li{color:var(--primary);width:100px;height:100px;display:flex;justify-content:center;align-items:center}.services{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.services .card-service{height:420px;max-width:380px;background-color:var(--secondary);transition:all ease .3s;overflow:hidden;position:relative}.services .card-service .overlay,.services .card-service .description{position:absolute;bottom:0;width:100%;z-index:2;transition:height .3s ease;color:var(--primary);display:flex;justify-content:center;align-items:center;flex-direction:column}.services .card-service .overlay h5,.services .card-service .description h5{padding:16px;margin-top:32px;border-radius:4px;font-weight:600}.services .card-service .overlay p,.services .card-service .description p{padding:8px;text-align:center;color:#fffc}.services .card-service .overlay{height:100%;background-color:#000c}.services .card-service .description{height:0%}.services .card-service img{height:100%;width:100%;object-fit:cover;transition:transform .3s ease;filter:grayscale(100%) contrast(180%)}.services .card-service:hover{cursor:pointer}.services .card-service:hover img{transform:rotate(15deg) scale(1.3)}.services .card-service:hover .description{height:100%}.front-end-image,.backend-image{position:relative;width:100%;min-height:520px;margin-bottom:105px}.front-end-image .title,.backend-image .title{font-weight:600;text-transform:uppercase;width:100%;font-size:2em;padding:10px 0;display:flex;justify-content:center;align-items:center;color:var(--primary);line-height:42px}@media (max-width: 768px){.front-end-image .title,.backend-image .title{font-size:1.8em}}.front-end-image img:nth-child(2),.backend-image img:nth-child(2){width:100%;height:auto}.front-end-image img:nth-child(3),.backend-image img:nth-child(3){max-width:620px;display:none}.front-end-image p,.backend-image p{font-size:1.2em;margin-top:10px}.info{display:flex;justify-content:center;margin-bottom:20px}.info p{border:2px solid var(--primary);padding:10px;max-width:620px;font-size:1.2em}@media (min-width: 1165px){.front-end-image .title,.backend-image .title{position:absolute;bottom:-60px;max-width:520px;width:100%;font-size:2.5em;font-weight:800;display:flex;justify-content:center;align-items:center;color:var(--primary);border-radius:16px;z-index:1}.front-end-image img:nth-child(2),.backend-image img:nth-child(2){position:absolute;max-width:620px}.front-end-image img:nth-child(3),.backend-image img:nth-child(3){position:absolute;max-width:620px;bottom:-70px;display:block}.front-end-image p,.backend-image p{position:absolute;top:12px;max-width:520px;font-size:1.2em;margin-top:10px}.front-end-image .title{left:10%}.front-end-image img:nth-child(2){left:0}.front-end-image img:nth-child(3){right:0}.front-end-image p{text-align:start;right:0}.backend-image .title{right:10px}.backend-image img:nth-child(2){right:0}.backend-image img:nth-child(3){left:0}.backend-image p{text-align:end;left:0}}.projects{font-size:16px}.projects .project{position:relative;display:flex;align-items:center;flex-direction:column;padding-bottom:60px;border-bottom:1px solid rgba(0,0,0,.3);transition:all ease .3s}.projects .project:hover{transform:scale(1.02);cursor:pointer}.projects .project .project-title{font-weight:800;max-width:320px;font-size:1.8em;text-transform:uppercase;color:var(--secondary);width:100%;text-align:center}.projects .project img{max-width:720px;width:100%}.projects .project .project-title:nth-of-type(2){display:none}.projects .project .btn{background-color:var(--secondary);color:#fff;max-width:280px;width:100%;min-height:60px}.projects .last-project{border-bottom:none}@media (min-width: 768px){.projects .project{position:relative;min-height:516px;display:block}.projects .project .project-title{position:absolute;right:7%;z-index:1;bottom:128px;font-size:5.5em;max-width:520px;font-weight:800;line-height:98px;padding:10px;border-radius:12px}.projects .project img{position:absolute;z-index:2;max-width:620px}.projects .project .project-title:nth-of-type(2){display:block;z-index:3;color:transparent;-webkit-text-stroke:1px rgba(0,0,0,.6)}.projects .project .btn{position:absolute;bottom:30px;right:-10%;transform:translate(-50%);background-color:var(--secondary);color:#fff}}@media (min-width: 1165px){.projects .project:nth-child(odd) .project-title{right:13%;font-size:8em}.projects .project:nth-child(odd) img{position:absolute;z-index:2;max-width:720px;width:100%}.projects .project:nth-child(odd) .project-title:nth-of-type(2){z-index:3}}#contact-me{background-color:var(--secondary);color:#fff}#contact-me .contact-form{display:flex;width:100%;min-height:720px;justify-content:center;flex-direction:column;align-items:center;font-size:16px;height:100%;padding-top:60px}#contact-me .contact-form .header{display:flex;flex-direction:column;align-items:center;margin-bottom:20px}#contact-me .contact-form .header h2{font-size:2em;font-weight:600}#contact-me .contact-form .header p{font-weight:300;max-width:820px;text-align:center}#contact-me .contact-form .form-fields{display:flex;flex-direction:column;gap:15px;width:100%;align-items:center;margin-bottom:30px}#contact-me .contact-form .form-fields .input-container{position:relative;max-width:420px;width:100%;display:flex;justify-content:center}#contact-me .contact-form .form-fields .input-container i{position:absolute;left:16px;top:19px;transform:translateY(-50%);color:#fff}#contact-me .contact-form .form-fields .input-container input,#contact-me .contact-form .form-fields .input-container textarea{background-color:transparent;box-shadow:none;outline:none;width:100%;border-radius:16px;padding:8px;color:#fff;border:1px solid #ffffff;font-size:.8em}#contact-me .contact-form .form-fields .input-container textarea{padding-top:10px;padding-bottom:10px;height:180px}#contact-me .contact-form .form-fields .input-container input,#contact-me .contact-form .form-fields .input-container textarea{padding-left:38px}#contact-me .contact-form .form-fields .input-container input::placeholder,#contact-me .contact-form .form-fields .input-container textarea::placeholder{position:absolute;left:38px;top:10px}#contact-me .contact-form .submit-button{margin-bottom:30px}#contact-me .contact-form .submit-button button{border-radius:24px;height:50px;width:120px;background-color:var(--primary);color:var(--secondary)}#contact-me .contact-form .footer-note p{font-weight:300;max-width:820px;text-align:center}footer{background-color:var(--secondary);height:40px;display:flex;align-items:center;color:#fff}footer .footer-text{font-size:.9em;width:100%;text-align:center;font-weight:200}.grayscale{max-height:476px;object-fit:cover;object-position:top;filter:grayscale(200%) contrast(120%)}.motor{max-height:436px;width:100%;object-fit:cover;object-position:bottom;filter:grayscale(200%) contrast(120%)}.loading-page{height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:var(--primary);font-family:Courier New,Courier,monospace;color:#fff;font-size:1.2rem;position:fixed;z-index:9999;width:100vw;gap:1.5rem}.loading-page:before{content:"Running 'npm install caffeine'...";animation:devWit 6s infinite}.loading-page:after{content:"";width:40px;height:40px;border:4px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:spin 1.2s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes devWit{0%{content:"Running 'npm install caffeine'..."}20%{content:"Reticulating splines..."}40%{content:"Debugging the debugger..."}60%{content:"Asking Stack Overflow politely..."}80%{content:"Compiling bad decisions..."}to{content:"Running 'npm install caffeine'..."}}.loading-page,.main-content{transition:opacity .6s ease,visibility .6s ease;opacity:1;visibility:visible}.main-content{opacity:0;visibility:hidden;position:relative}.hidden{opacity:0!important;visibility:hidden!important;pointer-events:none}.visible{opacity:1!important;visibility:visible!important;pointer-events:auto}