header{transform:translateY(-100%);transition:all .3s ease-in-out;position:fixed;width:100%;background-color:#151515cc;z-index:100;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}header.active{transform:translateY(0)}header .container{display:flex;justify-content:space-between;padding:40px 0}.hero .container{padding:110px 0;position:relative;display:flex;align-items:center;height:100%;min-height:calc(100vh - 100px)}@media (max-width: 640px){.hero .container{flex-direction:column-reverse;align-items:center}}.hero .container .heading{flex:1}@media (max-width: 640px){.hero .container .heading{display:flex;flex-direction:column;align-items:center}}.hero .container img{max-width:35%}@media (max-width: 640px){.hero .container img{max-width:80%;max-height:300px}}.hero .container .decor{position:absolute;top:180px;left:0;transform:translate(-80%,-50%);z-index:-1}@media (max-width: 640px){.hero .container .decor{transform:translate(-80%,-50%)}}.hero .container h2{margin-bottom:50px;transition:all 1s ease-in-out;transition-delay:1s;opacity:0;transform:translateY(50%)}.hero .container h2 div{position:relative;display:inline-block}.hero .container h2 div:before{content:"";position:absolute;width:0;height:6px;background-color:#4ee1a0;bottom:-6px;right:0;transition:all 1s ease-in-out;transition-delay:2s}.hero .container p{max-width:450px;margin-bottom:65px;transform:translateY(-50%);opacity:0;transition:all 1s ease-in-out;transition-delay:1s}@media (max-width: 640px){.hero .container p{text-align:center}}.hero.active h2{opacity:1;transform:translateY(0)}.hero.active h2 div:before{width:100%}.hero.active p{opacity:1;transform:translateY(0)}.hero.active .contact-link{opacity:1}.technologies .container{margin-top:160px;padding-bottom:80px;display:grid;grid-template-columns:repeat(3,1fr);gap:50px;position:relative}@media (max-width: 640px){.technologies .container{grid-template-columns:repeat(2,1fr)}}.technologies .container .decor{position:absolute;right:0;bottom:0;transform:translate(80%,50%)}.technologies .container .technology{display:flex;flex-direction:column;align-items:center;justify-content:center;text-transform:capitalize;gap:15px;opacity:0;transform:translateY(50%);transition:all 1s ease-in-out}.technologies .container .technology svg{max-height:100px;fill:#fff;transition:all .3s ease-in-out}.technologies .container .technology svg:hover{fill:#4ee1a0;transform:scale(1.1)}.technologies.active .technology{opacity:1;transform:translateY(0)}.projects .container{padding-top:80px;padding-bottom:160px}.projects .container>.heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:80px}.projects .container .projects-container{display:grid;grid-template-columns:repeat(2,1fr);gap:80px 30px}@media (max-width: 640px){.projects .container .projects-container{grid-template-columns:repeat(1,1fr)}}.projects .container .projects-container .project{opacity:0;transition:all 1s ease-in-out}.projects .container .projects-container .project .img-container{position:relative}.projects .container .projects-container .project .img-container img{display:block;width:100%}.projects .container .projects-container .project .img-container .links-container{position:absolute;width:100%;height:100%;top:0;left:0;background-color:#0009;display:flex;align-items:center;justify-content:space-evenly;padding:20px}.projects .container .projects-container .project .img-container .links-container a{padding:20px;position:relative}.projects .container .projects-container .project .img-container .links-container a:hover svg{fill:#fff}.projects .container .projects-container .project .img-container .links-container a:hover:after{width:100%}.projects .container .projects-container .project .img-container .links-container a:after{content:"";position:absolute;width:0%;height:2px;background-color:#4ee1a0;bottom:0;left:50%;transform:translate(-50%);transition:all .3s ease-in-out}.projects .container .projects-container .project .img-container .links-container a svg{fill:#4ee1a0;width:100%;max-width:60px;transition:all .3s ease-in-out}.projects .container .projects-container .project .heading{display:flex;justify-content:space-between;align-items:center;margin-top:20px;text-transform:uppercase;margin-bottom:8px}.projects .container .projects-container .project .heading a{display:flex;align-items:center}.projects .container .projects-container .project .heading a svg{fill:#fff;transition:fill .3s ease-in-out}.projects .container .projects-container .project .heading a svg:hover{fill:#4ee1a0}.projects .container .projects-container .project .languages{display:flex;gap:18px;transition:all .3s ease-in-out}.projects .container .projects-container .project .languages span{transition:all .3s ease-in-out;opacity:0;transform:translateY(100%)}.projects.active .projects-container .project{opacity:1}.projects.active .projects-container .project .languages span{opacity:1;transform:translateY(0)}.contact{background-color:#242424}.contact .container{display:flex;justify-content:space-between;padding:80px 0;position:relative}@media (max-width: 640px){.contact .container{flex-direction:column}}.contact .container .decor{position:absolute;left:0;bottom:0;transform:translate(-75%,-50%)}.contact .container .heading h2{margin-bottom:36px;transition:all 1s ease-in-out;opacity:0;transform:translateY(100%)}.contact .container .heading p{max-width:600px;transition:all 1s ease-in-out;opacity:0;transform:translateY(-100%)}.contact .container form{max-width:600px;display:flex;flex-direction:column;align-items:flex-end;gap:24px;width:100%}.contact .container form input,.contact .container form textarea{padding:16px 24px;border:none;border-bottom:1px solid #fff;width:100%;background-color:transparent;font-family:SpaceGrotesk,sans-serif;font-size:16px;font-weight:500;letter-spacing:-.2px;transition:border-bottom .3s ease-in-out;outline:none;color:#fff}.contact .container form input:hover,.contact .container form input:focus,.contact .container form textarea:hover,.contact .container form textarea:focus{border-bottom:1px solid #4ee1a0}.contact .container form input::placeholder,.contact .container form textarea::placeholder{text-transform:uppercase}.contact .container form textarea{resize:none}.contact .container form button{font-family:SpaceGrotesk,sans-serif;font-size:16px;font-weight:700;line-height:26px;letter-spacing:2.5px;text-transform:uppercase;border:none;color:#fff;padding-bottom:10px;border-bottom:2px solid #4ee1a0;background-color:transparent;transition:color .3s ease-in-out}.contact .container form button:hover{color:#4ee1a0}.contact.active .heading h2,.contact.active .heading p{transform:translateY(0);opacity:1}footer{background-color:#242424}footer .footer-container{display:flex;justify-content:space-between;padding:80px 0}footer .footer-container .logo{font-size:32px;font-weight:700;color:#fff;letter-spacing:-.5px}footer .footer-container .logo .logo-dot{color:#4ee1a0}footer .footer-container .social-icons{display:flex;gap:32px}footer .footer-container .social-icons a{display:flex;align-items:center}footer .footer-container .social-icons a svg{transition:fill .3s ease-in-out;fill:#fff;height:28px;width:auto}footer .footer-container .social-icons a:hover svg{fill:#4ee1a0}.legal{display:flex;justify-content:center;gap:10px}.legal a{color:#fff;text-decoration:none;font-size:14px;font-weight:500;transition:color .3s ease-in-out;text-transform:uppercase}.legal a:hover{color:#4ee1a0}.cursor{width:50px;height:50px;border:2px solid #fff;position:fixed;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:1000}.imprint{padding:180px 0}.imprint a{color:#4ee1a0;text-decoration:none}@font-face{font-family:SpaceGrotesk;src:url(/portfolio/SpaceGrotesk-VariableFont_wght.ttf)}*,*:before,*:after{box-sizing:border-box}*,*:hover,*:active{cursor:none!important}html{scroll-behavior:smooth}body{font-family:SpaceGrotesk,sans-serif;font-size:18px;line-height:28px;font-weight:500;background-color:#151515;color:#d9d9d9;overflow-x:hidden;margin:0;padding:0}@media (max-width: 640px){body{font-size:16px;line-height:24px}}main{overflow-x:hidden}.container{max-width:1440px;margin:0 auto;padding-left:20px!important;padding-right:20px!important}hr{position:relative;width:0;animation:expand 1s ease-in-out forwards;border-width:0;height:2px;background-color:#fff;left:50%;transform:translate(-50%);margin:0}@keyframes expand{to{width:100%}}.heading-xl{font-family:SpaceGrotesk,sans-serif;font-size:64px;letter-spacing:-2.5px;font-weight:700;line-height:1;color:#fff}@media (max-width: 1024px){.heading-xl{font-size:32px}}@media (max-width: 640px){.heading-xl{text-align:center;font-size:24px}}.heading-l{font-family:SpaceGrotesk,sans-serif;font-size:48px;letter-spacing:-1.5px;font-weight:700;line-height:56px;color:#fff}.heading-m{font-family:SpaceGrotesk,sans-serif;font-size:24px;font-weight:700;line-height:32px;color:#fff}.contact-link{font-weight:700;text-transform:uppercase;color:#fff;text-decoration:none;padding:10px;letter-spacing:2.5px;transition:color .3s ease-in-out;opacity:0;position:relative;transition:all 1s ease-in-out;transition-delay:1s}.contact-link:after{content:"";position:absolute;width:100%;height:2px;background-color:#4ee1a0;bottom:0;left:0;transition:all .3s ease-in-out;z-index:-1}.contact-link:hover{color:#151515}.contact-link:hover:hover:after{height:100%}.decor{width:100%;max-width:500px}@keyframes blink{0%,to{fill:currentColor}50%{fill:#4ee1a0;opacity:1}}.decor svg path:nth-child(1){animation:blink 3s infinite 0s}.decor svg path:nth-child(2){animation:blink 3s infinite .3s}.decor svg path:nth-child(3){animation:blink 3s infinite .6s}.decor svg path:nth-child(4){animation:blink 3s infinite .9s}.decor svg path:nth-child(5){animation:blink 3s infinite 1.2s}.decor svg path{fill:#fff;opacity:.25}.logo a{font-size:32px;font-weight:700;color:#fff;letter-spacing:-.5px;text-decoration:none;position:relative}@media (max-width: 640px){.logo a{font-size:18px}}.logo a:before{content:"";position:absolute;width:0;height:2px;background-color:#4ee1a0;bottom:0;right:0;transition:all .3s ease-in-out}.logo a:hover:before{width:100%}.logo a .logo-dot{color:#4ee1a0}.social-icons{display:flex;gap:32px}.social-icons a{display:flex;align-items:center}.social-icons a svg{transition:fill .3s ease-in-out;fill:#fff;height:28px;width:auto}.social-icons a:hover svg{fill:#4ee1a0}@media (pointer: fine){.cursor{display:block}}@media (pointer: coarse){.cursor{display:none}}