*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;height:100dvh;background-color:var(--bg-color);overflow-x:hidden}ul{list-style:none;padding:0}a{text-decoration:none;color:var(--txt-color)}section{padding-block-end:3rem}input,label{all:unset}:root{--bg-color: #FDFFED;--txt-color: #171616;--main-color: #E6FF00;--pink-color: #FF00A2;--h1-sz: 7vw;--h2-sz: 4vw;--h3-sz: 5vw;--p-sz: 5vw;--btn-pd: calc(var(--h3-sz) *2) var(--h2-sz);--btn-rad: calc(var(--h2--sz) /10);--btn-bd: 1px solid var(--txt-color);--btn-bdactivated: 1.5px solid var(--pink-color)}@font-face{font-family:"DINdong";src:local("DINdong"),url("/webfonts/DINdong.woff2") format("woff2")}@font-face{font-family:"Bricolage Grotesque";src:local("Bricolage Grotesque"),url("/webfonts/BricolageGrotesque_.woff2") format("woff2")}header{background-color:var(--main-color);font-family:"Bricolage Grotesque";padding-inline:var(--h1-sz)}.star_fly{position:fixed;z-index:-1;width:90%;left:5%;top:25%;overflow-x:hidden;opacity:25%}.active{opacity:40%;transition:all 1s}.sec__nav{display:flex;justify-content:space-between;position:relative}.sec__nav_logo{align-self:start;max-width:45%;margin-block-start:1rem}.sec__nav_list{display:none;flex-direction:column;justify-content:end;align-items:end;margin-block-start:1rem}.sec__nav_list_item{font-family:"DINdong";text-transform:uppercase;color:var(--txt-color);margin-block-end:.4rem;padding-block:.2rem;padding-inline:.8rem;border:1px solid var(--txt-color);border-radius:30px;background-color:var(--main-color)}.sec__nav_list_item:hover{background-color:var(--bg-color);transition:all 250ms}.langue{display:flex;justify-content:flex-end;margin-block-start:1rem;height:-moz-fit-content;height:fit-content;gap:.5rem}.default-btn{font-family:"DINdong";text-transform:uppercase;color:var(--txt-color);margin-block-end:.4rem;padding-block:.2rem;padding-inline:.8rem;border:1px solid var(--txt-color);border-radius:30px;background-color:var(--bg-color)}.langue-btn{font-family:"DINdong";text-transform:uppercase;color:var(--txt-color);margin-block-end:.4rem;padding-block:.2rem;padding-inline:.8rem;border:1px solid var(--txt-color);border-radius:30px;background-color:var(--main-color)}@media screen and (min-width: 600px){.hero__title{font-size:4rem}.hero__para{font-size:3.5rem;max-width:65%}.hero__para-second{display:block}.sec__nav_list{display:flex}}h1{font-family:"DINdong";writing-mode:vertical-lr;direction:rtl;transform:rotate(180deg);margin-block-start:2rem;margin-inline:0;padding-inline:0;justify-self:end;font-size:var(--h1-sz)}.iframe-div{display:flex;justify-content:flex-end;margin-block-end:0}iframe{justify-self:flex-end;max-width:100%;margin-block-end:0}.normal{margin-block-start:4rem;writing-mode:horizontal-tb;transform:none}h2,h3{font-family:"Bricolage Grotesque";color:var(--txt-color)}h2{background-color:var(--main-color);padding-inline:1rem;padding-block:.5rem;border:var(--btn-bd);border-radius:30px;direction:rtl;font-size:var(--h2-sz)}h3{font-size:var(--h3-sz)}.wrapper{padding-inline:var(--h1-sz)}.back{position:relative}.fleche_back{position:absolute;left:-1rem;top:.7rem;border-radius:200px;transform:rotate(-90deg);max-width:30px}.fleche_back:hover{background-color:var(--main-color)}.hero p{direction:ltr;max-width:80%}p{font-family:"DINdong";font-size:var(--p-sz);direction:rtl;line-height:1.2}span{text-decoration:underline}.main__nav_list{display:flex;flex-direction:column;align-items:flex-start}.main__nav_list_item{font-family:"DINdong";font-size:.8rem;text-transform:uppercase;margin-block-end:.5rem;padding-block:.3rem;padding-inline:.8rem;border:1px solid var(--txt-color);border-radius:30px}.main__nav_list_item:hover{background-color:var(--bg-color);transition:all linear 200ms}.main__nav_list_item:hover a{color:var(--txt-color)}.hero{display:flex;margin-block-start:3rem}.hero__title{font-size:calc(var(--h1-sz)*3/2);margin-block-end:1rem;margin-block-start:0;justify-self:flex-end}.hero__contant{display:flex}.hero__para{font-family:"Bricolage Grotesque",arial;font-size:calc(var(--h1-sz)/3*2);margin-block:0;padding-block:0;max-width:100%;line-height:normal}.hero__para-second{display:none;max-width:55%;line-height:1.2}.hero__para p{font-family:"Bricolage Grotesque",arial}.content_section{display:flex;flex-direction:column;justify-content:end;align-content:end}.content_section h2{align-self:end}.content_section p{width:90%;align-self:end}.apparition{opacity:100%;transform:translateY(-5px);transition:all 1s ease-out}.bold{font-family:"Bricolage Grotesque"}.title_btn_style{width:-moz-fit-content;width:fit-content}.only_mobile{display:block}img .only_mobile{max-width:25%}.scroll_grid{display:flex;justify-content:space-around;gap:1rem;overflow-x:scroll;scroll-snap-type:x mandatory}.scroll_grid_img{max-width:372px;max-height:219px;border-radius:5px;scroll-snap-align:start}.scroll_grid_screens{max-width:186px;border-radius:10px;scroll-snap-align:start}.ux-ui_screens img{min-width:50%}.scroll_grid_img_zines{max-width:70%;scroll-snap-align:start;border-radius:5px}.scroll_grid_illu{scroll-snap-align:start;max-width:372px;max-height:219px;border-radius:5px}img.scroll_grid_illu{border-radius:10px}.icons_img{display:flex;justify-content:space-around;gap:1rem;overflow-x:scroll;scroll-snap-type:x mandatory}.scroll_grid_icon{scroll-snap-align:start;max-width:20%;max-height:20%;border-radius:0;margin-block-start:2rem}form{display:none;flex-direction:column;align-items:end;gap:.5rem}label{font-family:"DINdong";margin-block-start:1rem}input,textarea{width:90%;background-color:#f2fd8f;padding-block:.5rem;padding-inline:1rem;margin-block:.5rem;border-radius:5px;border:var(--btn-bd);font-family:"DINdong";font-size:1rem;color:var(--txt-color)}input:focus,textarea:focus{background-color:var(--main-color)}textarea{resize:none;margin:0}.submit{align-self:end;margin-block-start:2rem;background-color:var(--main-color);color:var(--txt-color)}.submit:hover{background-color:var(--txt-color);color:var(--pink-color)}@media screen and (max-width: 380px){.main__nav_list_item{font-size:.7rem;padding-block:.2rem;padding-inline:.6rem;margin-block-end:.3rem}.hero{padding-block-end:0}}@media screen and (min-width: 600px){.content_section{width:75%;justify-self:end}.content_section p{font-size:1.5rem}.content_section h2{font-size:2rem}.main__nav_list{display:none}.hero__title{font-size:var(--h1-sz)}.hero__para-second{display:block;font-size:1.5rem}.only_mobile{display:none}h3{font-size:1rem}.ux-ui_div{justify-content:end}input,textarea{width:45%}}@media screen and (min-width: 850px){p .hero__para{font-size:var(--h2-sz)}.scroll_grid{justify-content:end;gap:1rem}.scroll_zines{justify-content:start}.scroll_grid_img{max-width:496px;max-height:292px}.scroll_grid_illus{justify-content:start}.scroll_grid_illus img:first-child{margin-left:auto}.scroll_grid_illus img:last-child{margin-right:auto}.scroll_grid_screens_maxi{justify-content:start}.scroll_grid_screens img:first-child{margin-left:auto}.scroll_grid_screens img:last-child{margin-right:auto}.scroll_grid_illu{max-width:496px;max-height:292px}.scroll_grid_icon{max-width:10%;max-height:10%;border-radius:0}}@media screen and (min-width: 1000px){.hero__title{font-size:calc(var(--h1-sz)/7*5);padding-inline-start:1rem;margin-block-end:2rem}.hero__para{font-size:calc(var(--h1-sz)/5*3)}#max-p{font-size:calc(var(--h1-sz)/5*2)}.content_section p{width:70%;align-self:end}.scroll_zines{justify-content:end}}footer{background-color:var(--main-color);margin-block:4rem 3rem}.fleche{width:10%;position:fixed;bottom:.5rem;right:1rem;opacity:20%;transition:all linear 200ms}.fleche:hover{opacity:100%;border-radius:30px;background-color:var(--main-color)}.main__footer__sections{display:flex;flex-direction:row;justify-content:space-around;padding-inline:1rem;gap:1rem}.main__footer__section a{font-family:"DINdong";font-size:.8rem;line-height:1.2}.main__footer__section a:hover{text-decoration:underline}.main__footer__section__copyright{display:flex;justify-content:center}.main__footer__section__copyright p{font-size:1rem}@media screen and (max-width: 380px){.main__footer__section__copyright p{font-size:.6rem}}@media screen and (min-width: 600px){.fleche{width:5%;bottom:1rem;right:3rem}.main__footer__section__copyright p{font-size:.8rem}}@media screen and (min-width: 1000px){.main__footer__section__copyright p{font-size:.5rem}.fleche{width:4%;bottom:1rem;right:2rem}}