@import url(https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap);@import url(https://fonts.googleapis.com/css2?family=Heebo:ital,wght@0,100..800;1,100..800&display=swap);*{--black:#000000;--white:#ffffff;--primary:#273c91;--filterColor:#00000090;--circleSize:40px;--circleLeft:-150px;--lineLength:100%;scroll-behavior:smooth;transition:all .3s}:root{font-size:20px;font-family:Heebo,sans-serif;color:var(--white)}body,html{margin:0;padding:0;overflow-x:hidden;background:var(--black)}main{overflow:hidden}h1,h2{font-family:'JetBrains Mono';font-size:2rem;text-align:center}a,p{font-size:1rem}a{font-family:'JetBrains Mono',sans-serif}.buttons{display:flex;gap:30px;flex-wrap:wrap}.button,button,input[type='submit']{color:var(--white);text-decoration:none;padding:15px 25px;background:var(--black);border-radius:15px;border:0;cursor:pointer;width:fit-content;text-align:center}input[type='submit']{background:var(--white);color:var(--black);width:fit-content}.button.reverse:hover,.button:hover,button.active,button:hover,input[type='submit']:hover{background:var(--primary);border-radius:0;color:var(--white)}.button.reverse{background-color:var(--white);color:var(--black)}section.visible{animation-play-state:running!important}#hero_banner{width:100%;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:50px;background:url(./hero_banner.webp),var(--black);background-size:cover;color:var(--white);position:relative;animation:grow .5s paused;transform-origin:top center;box-sizing:border-box;padding:50px}#hero_banner::before,#realisations_banner::before{content:'';display:block;position:absolute;width:100%;height:100%}#hero_banner::before,#realisations_banner::before{background:var(--filterColor)}#hero_banner *,#realisations_banner *{z-index:1}#contact,#realisations_banner{width:100%;min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:50px;padding:20px 50px;position:relative;box-sizing:border-box}#realisations_banner{background:url(./real_banner.webp),var(--white);background-size:cover;color:var(--white);animation:leftEnter 1s paused}#realisations{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;width:100%;height:100%;gap:20px}#filters{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:center}#filters button{font-size:.8rem;font-family:'JetBrains Mono',monospace}#filters button.active,#filters button:hover{padding:15px 30px}.image-container,.image-container img{width:100%;height:100%;position:relative;object-fit:contain;overflow:hidden;padding:10px 20px;box-sizing:border-box}.image-container.black{background:var(--black)}.image-container.white{background:var(--white)}.image-container{width:calc(20% - 20px);height:auto;aspect-ratio:4/3}.image-container:after{display:none;content:attr(data-name);height:100%;width:100%;padding:10px 20px;box-sizing:border-box;background:var(--filterColor);justify-content:center;align-items:center;text-align:center;color:var(--white);position:absolute;top:0;left:0;z-index:-1;font-size:.8rem}.image-container.white::after{background:#ffffff90;color:var(--black)}.image-container:hover::after{display:flex}#presentation{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;min-height:100vh;background:#000;color:#fff;padding:20px 100px 20px 150px;box-sizing:border-box;animation:rightEnter 1s paused}#presentation_content{display:flex;justify-content:center;align-items:flex-start;width:100%;gap:10vw}#presentation .content{display:flex;flex-direction:column;gap:20px;width:100%;position:relative;flex-grow:1;max-width:60vw}#presentation .image{flex-grow:0;height:100%;width:auto;aspect-ratio:1/1;border-radius:50%;border-bottom-left-radius:0}#presentation img{width:100%;height:100%;object-fit:cover;object-position:right top;border-radius:50%;border-bottom-left-radius:0}#presentation p{padding-left:50px}.circle{width:40px;height:40px;border-radius:50%;background:red;position:absolute;display:inline-block;margin-left:-100px}.line{content:'';display:inline-block;position:absolute;left:-30px;top:30px;width:var(--lineLength);height:10px;background:red;transform-origin:left center;transform:rotate(90deg);border-top-right-radius:15px;border-bottom-right-radius:15px}#contact{background:var(--black);color:var(--white);animation:leftEnter 1s paused}#contact form{width:100%;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;gap:30px}.input{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;width:100%;gap:10px}.identity{display:flex;justify-content:center;align-items:center;gap:40px;width:100%}.identity .input{width:calc(50% - (40px / 2))}label{width:100%;font-family:'JetBrains Mono',sans-serif;font-size:1rem}input,textarea{width:100%;padding:10px 20px;font-family:'JetBrains Mono',sans-serif;font-size:.8rem;box-sizing:border-box;border:0}.input:has(:required) label::after{content:'*';color:red;display:inline-block;font-size:1rem;width:1ch;margin-left:1ch}#form_result{width:100%;position:fixed;top:0;height:fit-content;padding:.5rem 50px;text-align:center;z-index:9;box-sizing:border-box;animation:hide .3s 3s linear both;transform-origin:top center}.send{background:var(--white);color:var(--black)}.error{background-color:var(--primary);color:var(--white)}footer{display:flex;align-items:center;justify-content:center;height:50px;background:var(--primary)}@media screen and (max-width:1280px){.image-container{width:calc(30% - 20px)}#presentation_content{gap:50px}#presentation .content{max-width:80vw}#presentation .image{width:50%;height:100%}}@media screen and (max-width:720px){h1,h2{font-size:1.5rem}.buttons{justify-content:center}.image-container{width:100%}#hero_banner,#realisations_banner,#presentation,#contact{padding:20px}#presentation_content{flex-direction:column-reverse;gap:50px}#presentation .content{max-width:calc(100vw - (50px * 2))}#presentation .image{align-self:center}#presentation img{width:100%;height:auto;box-sizing:border-box;aspect-ratio:1/1}#presentation p{padding:0}.circle,.line{display:none}.identity{flex-direction:column}.identity .input{width:100%}.button,button,input[type='submit']{padding:15px 20px}.button.reverse:hover,.button:hover,button.active,button:hover,input[type='submit']:hover{padding:15px 30px}}