:root{font-family:DM Sans,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#000;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;transition:all .3s ease}#root{width:100%;height:100%}body{margin:0;display:flex;place-items:center;min-width:320px;height:100vh;overflow:hidden;max-width:100vw;max-height:100vh}.box{display:flex;align-items:center;width:100%;height:100%;overflow:hidden}.back{display:block;position:fixed;width:100%;height:100%;overflow:hidden;max-width:100%;max-height:100%;top:0;left:0}.back .back-blur{position:absolute;transition:all 2s ease;transform:translateZ(0)}.back .back-blur.right{border-radius:900px;width:900px;height:900px;background:#57a7fb;filter:blur(250px);-webkit-backdrop-filter:blur(250px);top:-200px;right:-200px}.back .back-blur.left{width:700px;height:700px;border-radius:700px;background:#be61b7;filter:blur(170px);-webkit-backdrop-filter:blur(170px);top:-300px;left:-200px}.back .back-blur.bottom{width:800px;height:800px;border-radius:800px;background:#7362d7;filter:blur(290px);-webkit-backdrop-filter:blur(290px);bottom:-100px;left:150px}.menu-container{height:100%;padding:1rem;overflow:hidden;width:50%;background-color:transparent}.menu-container .back{display:none;position:absolute}.menu-block{display:flex;align-items:center;height:100%;position:relative}.menu-slide{position:absolute;right:0;top:0;height:100%;padding:.5rem;background-color:#191919;transform:translate(100%);display:none;flex-direction:column;justify-content:center}.menu-slide .bar-block{display:flex;flex-direction:column;gap:6px}.menu-slide .bar-block .bar{width:30px;background-color:#fff;height:2px}.menu{height:150px}.title{font-family:Playfair Display,serif;font-size:100px;line-height:1.75em;width:100%;cursor:pointer}.title.active{opacity:1}.title.d_1{opacity:.3}.title.d_2{opacity:.1}.title.d_3,.title.d_4{opacity:0}.swiper-container{width:100%;min-height:100%;max-width:100%;max-height:100%;overflow:hidden;width:50%}.screen{width:100%;height:100vh;display:flex;justify-content:center;padding:1rem;overflow:hidden}.screen-container{position:relative;max-width:900px;width:100%;display:flex;flex-direction:column;justify-content:center;gap:1rem;animation:fadeIn .5s cubic-bezier(.25,.46,.45,.94) 0s}.screen-container .screen-imgs{position:relative;border-radius:20px;overflow:hidden}.screen-container .screen-img{opacity:0;transition:opacity .5s cubic-bezier(.25,.46,.45,.94) 0s;border-radius:20px}.screen-container .screen-img.active{opacity:1}.screen-container .screen-img:not(.ref){position:absolute;top:0;left:0}.screen-container img{display:block;max-width:100%}.screen-container .screen-middle{display:flex;justify-content:space-between;align-items:center}.screen-container .screen-labels{display:flex;gap:1rem}.screen-container .screen-label{background-color:#b6ff00;padding:.5rem 1rem;border-radius:4rem;color:#242424;font-weight:700;font-size:.8rem}.screen-container .screen-label.symfony{background-color:#f50b86}.screen-container .screen-label.laravel{background-color:#05f9e2}.screen-container .screen-label.nextjs{background-color:#fce700}.screen-container .screen-label.vuejs{background-color:#df00ff}.screen-container .screen-label.threejs{background-color:#faff00}.screen-container .screen-label.webflow{background-color:#0085ff}.screen-container .screen-link a{color:#fff;display:inline-flex;align-items:center}.screen-container .screen-link a svg{fill:#fff;display:inline-block;height:1rem;width:1rem;margin:0 0 0 4px}.screen{position:relative}.screen.project .screen-text{text-align:justify}.screen.contact{justify-content:center;align-items:center;flex-direction:column;gap:2rem;text-align:center}.screen:before{transition:opacity 1s ease;content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 70%,rgba(0,0,0,.3) 100%);opacity:0}.screen.focus:before{opacity:1}.screen.home .screen-container{justify-content:center;align-items:center}.screen.home .profil-image{max-width:500px}.screen.home .profil-name{color:#fff;font-family:Playfair Display;font-size:40px;font-style:normal;font-weight:700;line-height:normal;text-transform:uppercase}.screen.home .profil-text{color:#fff;font-size:16px;font-style:normal;font-weight:400;line-height:200%;max-width:500px}.screen.home .pi-border{position:relative;padding:30px;border-radius:50px;overflow:hidden}.screen.home .pi-border .stroke{position:absolute;bottom:0;left:0;width:100%}.screen.home .pi-card{padding-top:80px;background:linear-gradient(180deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 100%);overflow:hidden;border-radius:60px}.screen.home .pi-card-image img{width:100%;height:auto}.contact-title{font-family:Playfair Display,serif;font-size:2rem}.contact-text{max-width:500px;font-size:16px;line-height:200%}.next{position:absolute;bottom:1rem;width:50px;height:50px;cursor:pointer;animation:arrow 1.5s linear infinite;display:none}.next svg{width:100%;transform:rotate(90deg);height:auto}a.button{font-family:Playfair Display,serif;font-weight:400;font-size:1.4rem;letter-spacing:.1rem;color:#fff;text-decoration:none;border:1px solid #d9dfe8;padding:1rem 2rem;opacity:.8;transition:background-color .3s ease,color .3s ease}a.button:hover{color:#242424;background-color:#fff;opacity:1}@keyframes arrow{0%{transform:translate(0)}50%{transform:translateY(10px)}to{transform:translate(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media screen and (max-width: 1200px){.title{font-size:80px}.screen-text{font-size:.9rem}}@media screen and (max-width: 1000px){.menu-container{position:absolute;z-index:100;top:0;left:0;width:auto;overflow:visible;padding:0;background-color:#000}.menu-container .back{display:block}.menu-block{padding:1rem}.menu-slide{display:flex}.screen.home .pi-card{padding-top:20px}.swiper-container{width:100%}.screen{padding-left:3.5em}.screen-container{justify-content:flex-start;padding:1rem 0 2rem}.screen-container .screen-middle{flex-direction:column;gap:1rem;align-items:flex-start}.next{display:block}.title.d_1{opacity:.3}.title.d_2{opacity:.2}.title.d_3{opacity:.1}.title.d_4{opacity:0}}@media screen and (max-width: 600px){.title{font-size:40px}.screen-text{font-size:.8rem}.menu{height:70px}.screen.home .screen-img{max-width:200px}.back .back-blur.bottom{display:none}a.button{font-size:1.1rem;padding:1rem 1.5rem}}@media screen and (max-height: 900px){.screen.home .profil-image{max-width:350px}}