@import"https://fonts.googleapis.com/css2?family=Karantina:wght@300;400;700&family=Lato:wght@100;300;400;700;900&family=Major+Mono+Display&display=swap";.fontspe{font-family:Major Mono Display,monospace}body{background-color:var(--color-background);color:var(--color-font);overflow:hidden}.lightmode{background-color:var(--color-bg-light);color:var(--color-background)}.darkmode{background-color:var(--color-background);color:var(--color-font)}.body{position:relative;height:100vh;width:100vw}.body .darkmode-btn{position:absolute;height:1.5rem;width:1.5rem;background-color:var(--color-bg-light);border-radius:2rem;top:2rem;right:2rem;transition:all .3s ease-in-out}html{box-sizing:border-box;font-size:16px;font-family:Karantina,system-ui}*,*:before,*:after{box-sizing:inherit}body,h1,h2,h3,h4,h5,h6,p,ol,ul{margin:0;padding:0;font-weight:400}ol,ul{list-style:none}img{max-width:100%;height:auto}a{text-decoration:none;color:var(--color-font);cursor:none}:root{cursor:none;--color-background: rgb(12, 12, 12);--color-font: #FFF;--color-black: #000;--color-black-50: #0c0c0c80;--color-green: #44ff0033;--color-green-border: #3b8022;--color-bg-light: #f0f8ff;--color-gray: #c5c5c5d5}.home{position:relative;height:100vh;max-height:100vh;width:100vw;transition:all .3s ease-in-out;overflow:hidden}.home .darkmode-btn{position:absolute;height:1.5rem;width:1.5rem;background-color:var(--color-bg-light);border-radius:2rem;top:2rem;right:2rem;transition:all .3s ease-in-out}.home .header,.home .footer{width:100vw;height:15vh;display:flex;justify-content:center;align-items:center;transition:all .3s ease-in-out}.home .header{font-size:3rem}.home .footer{font-size:1rem;display:flex;flex-direction:column;gap:1rem}.home .footer h2{font-size:1rem}.home .content{height:70vh;width:auto;margin:0 7vw;display:flex;align-items:center;gap:4rem}.home .navbar,.home .name-project{height:100%;width:25vw}.home .container{height:100%;width:60%;overflow-y:scroll}.home .container .name{display:none}.home .container::-webkit-scrollbar{display:none}.home .container img{filter:grayscale(100%)}.home .container .image-div{position:relative;height:6rem;transition:height .3s ease-in-out;background-color:var(--color-font);width:100%;margin:1rem 0;transition:all .3s ease-in-out;overflow:hidden}.home .container .image-div:hover,.home .container .image-div .image-div.selected:hover{filter:grayscale(60%)!important}.home .container .image-div .btn{display:none;transition:all .3s ease-in-out}.home .container .image-div .btn:hover{margin-left:1rem}.home .container .image-div.selected{height:23rem;filter:grayscale(60%)!important}.home .container .image-div.selected a{color:var(--color-font);text-decoration:none}.home .container .image-div.selected a .btn{display:block;position:absolute;bottom:1rem;font-size:1.5rem;letter-spacing:.3rem;width:100%}.home .container .image-div.selected a .btn p{display:flex;align-items:center;justify-content:center}.home .container .image-div.selected a .btn p img{height:1.5rem;margin-left:.2rem}.home .name-project{text-transform:uppercase;font-size:4rem;display:grid;place-items:center;opacity:1}.home .name-project h2{transition:all .4s ease-in-out}.home .name-project h2.enter{opacity:1;animation:enterAnimation .4s ease-in-out}.home .name-project h2.exit{opacity:0;animation:exitAnimation .4s ease-in-out}@keyframes enterAnimation{0%{transform:translate(250%)}to{transform:translate(0)}}@keyframes exitAnimation{0%{transform:translate(0)}to{transform:translate(250%)}}.home .navbar{overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;height:70%;align-items:end}.home .navbar .navbar-content{height:8%;width:18vw;display:flex;align-items:center;transition:all .5s ease-in-out}.home .navbar .navbar-content .indice{background-color:#fff;height:100%;width:.3rem}.home .navbar .navbar-content .name{margin-left:1rem;font-size:.7rem}.home .navbar .navbar-content .name p{font-family:Lato,sans-serif;font-weight:700;height:100%;text-transform:uppercase;transition:all .3s ease-in-out;animation:downAnimation .5s ease-in-out}@keyframes downAnimation{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}.home .navbar .navbar-content.selected{height:25%}.home .navbar .navbar-content.selected .indice{opacity:.8}.home.lightmode .darkmode-btn{background-color:var(--color-background)}.home.lightmode .indice{background-color:var(--color-background)!important}@media (max-width: 768px){.content{justify-content:center}.content .navbar,.content .name-project{display:none}.content .container{width:80%}.content .container .name{display:block;width:100%;text-align:center;font-size:3rem;text-transform:uppercase}.content .container .name h2{transition:all .4s ease-in-out}.content .container .name h2.enter{opacity:1;animation:enterAnimation .2s ease-in-out}.content .container .name h2.exit{opacity:0;animation:exitAnimation .2s ease-in-out}@keyframes enterAnimation{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes exitAnimation{0%{transform:translateY(0)}to{transform:translateY(-100%)}}.content .container .selected .name{display:block}.content .container .unselected .name{display:none}}@media (max-width: 992px){.content{justify-content:center}.content .name-project{display:none}.content .container{width:80%}.content .container .name{display:block;width:100%;text-align:center;font-size:3rem;text-transform:uppercase}.content .container .name h2{transition:all .4s ease-in-out}.content .container .name h2.enter{opacity:1;animation:enterAnimation .2s ease-in-out}.content .container .name h2.exit{opacity:0;animation:exitAnimation .2s ease-in-out}@keyframes enterAnimation{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes exitAnimation{0%{transform:translateY(0)}to{transform:translateY(-100%)}}.content .container .selected .name{display:block}.content .container .unselected .name{display:none}}@media (min-width: 992px) and (max-width: 1400px){.content{justify-content:center}.content .name-project{text-transform:uppercase;font-size:3rem;display:grid;place-items:center;opacity:1}.content .name-project h2{transition:all .4s ease-in-out}.content .name-project h2.enter{opacity:1;animation:enterAnimation .4s ease-in-out}.content .name-project h2.exit{opacity:0;animation:exitAnimation .4s ease-in-out}}.details{width:100vw;height:100vh;overflow-y:scroll;overflow-x:hidden}.details::-webkit-scrollbar{display:none}.details .presentation{position:relative;width:100vw;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;filter:grayscale(70%)}.details .presentation img{position:absolute;top:0;left:0;width:100%;opacity:.2;z-index:-1}.details .presentation .header{z-index:999;width:100vw;height:15vh;display:flex;justify-content:center;align-items:center;transition:all .3s ease-in-out;font-size:3rem}.details .presentation .content{height:85vh;width:100vw;display:flex;flex-direction:column;justify-content:end;align-items:center}.details .presentation .content .name{height:77vh;width:100vw;display:grid;place-items:center;font-size:4rem;color:var(--color-gray)}.details .presentation .content .name h1{font-family:Karantina,system-ui;letter-spacing:3rem;transition:all .3s ease-in-out}.details .presentation .content .name h1:hover{letter-spacing:4rem!important}.details .presentation .content .text{height:8vh;width:100vw;justify-content:space-around;display:flex;margin-bottom:4rem}.details .presentation .content h1,.details .presentation .content p,.details .presentation .content a,.details .presentation .content span{font-family:lato,sans-serif;text-transform:uppercase;margin:0 5rem}.details .presentation .content .each{display:flex;flex-direction:column;height:8vh}.details .presentation .content p{width:10vw;margin:0 2rem}.details .presentation .content span{margin:2rem;font-size:.8rem;font-weight:300;color:var(--color-gray)}.details .presentation .content .scroll-down{margin-bottom:2rem}.details .presentation .content .scroll-down p{font-size:.7rem;font-weight:100;text-align:center}.details .bloc{width:100vw;height:70vh;display:flex;align-items:center;justify-content:center;gap:2rem}.details .bloc:nth-child(odd){flex-direction:row-reverse}.details .bloc .image{height:55vh;width:100vh;display:flex;align-items:center}.details .bloc .image img{width:100%;opacity:.7;filter:grayscale(50%);transition:all .3s ease-in-out}.details .bloc .image:hover img{filter:grayscale(0)}.details .bloc .text{height:55vh;width:74vh}.details .bloc .text h1,.details .bloc .text p{font-weight:300;font-family:lato,sans-serif}.details .bloc .text h1{text-align:center;font-size:2.6rem;margin:3rem 0}.details .bloc .text p{font-size:1.1rem;margin:0 5rem;color:var(--color-gray)}.details .next-page,.details .prev-page{position:relative;margin-top:5rem;height:50vh;width:100vw;overflow:hidden;display:flex;justify-content:center;align-items:center}.details .next-page img,.details .prev-page img{position:absolute;z-index:1;filter:grayscale(70%);width:100vw;opacity:.5}.details .next-page a,.details .prev-page a{position:absolute;z-index:2}.details .next-page a:hover p,.details .prev-page a:hover p{margin-left:.5rem}.details .next-page h2,.details .prev-page h2{font-size:2.5rem;letter-spacing:.5rem}.details .next-page p,.details .prev-page p{display:flex;align-items:center;transition:all .3s ease-in-out;font-weight:"lato",sans-serif;letter-spacing:1rem}.details .next-page p img,.details .prev-page p img{position:relative;height:1.5rem;width:auto;opacity:1}@media (max-width: 768px){.details .presentation img{height:100%;width:200vw!important}.details .presentation .content{justify-content:start}.details .presentation .content .name{font-size:2rem;height:50vh}.details .presentation .content .name h1{letter-spacing:2rem;transition:all .3s ease-in-out}.details .presentation .content .name h1:hover{letter-spacing:2.3rem!important}.details .presentation .content p{width:6rem}.details .presentation .content .text{flex-wrap:wrap;height:34vh;margin-bottom:0rem}.details .presentation .content .text .each{width:30vw}.details .presentation .content .text .each span{margin:1rem 2rem}.details .bloc{flex-direction:column-reverse!important;height:55vh}.details .bloc .image{width:80vw}.details .next-page{height:35vh}}.preloader{position:absolute;height:100vh;width:100vw;background-color:var(--color-background)}.preloader .progress-bar{position:absolute;top:50%;left:46%;font-size:2rem}.preloader .progress-bar span{font-size:.7rem;text-align:center}.preloader .progress-bar p{text-align:center}.preloader.loading{top:0;z-index:9999}.preloader.loaded{transition:all 8s linear;top:2000vh;z-index:-9999}.preloader.end{display:none}