:root{--primary-color:#fff;--secondary-color:#e5e5e5;--secpndary-dark-color:#c4c4c4;--tertiary-color:#802d5e;--transparent-bg-color:hsla(0,0%,89.8%,0.12);--border-radius:5px;--tablet-max-width:100em;--phone-max-width:50em;--transition-duration:0.3s;--page-padding:20px}body{margin:0;font-family:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#000;color:#fff;color:var(--primary-color);font-size:18px;font-weight:400}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}ul{margin:0;padding:0;list-style:none}button{border-radius:60px;border-width:1px;border-style:solid;width:-webkit-max-content;width:-moz-max-content;width:max-content;transform:scale(1);transition-property:color,border-color,transform,background-color;transition-duration:.3s;transition-duration:var(--transition-duration)}button:hover{cursor:pointer;transform:scale(1.15)}a{color:#fff;color:var(--primary-color);text-decoration:none;transition-property:color;transition-duration:.3s;transition-duration:var(--transition-duration)}@media (min-width:50em){a:hover{color:#802d5e;color:var(--tertiary-color)}}svg{stroke:#fff;stroke:var(--primary-color);transition-property:stroke;transition-duration:.3s;transition-duration:var(--transition-duration)}.header-comp{display:flex;flex-direction:row;justify-content:space-between;font-size:18px;padding:20px 0}.header-comp .logo{font-family:"Saira Stencil One",cursive;font-size:36px;transform:scale(1);transition-property:transform;transition-duration:.3s}.header-comp .logo:hover{transform:scale(1.15)}.header-comp .menu{display:flex;flex-direction:row}.header-comp .menu.is-stiky{position:fixed;top:20px;z-index:1;right:20px}.nav-menu-comp{display:none;flex-direction:column;align-items:flex-end;border-radius:100%;position:relative;z-index:2}.nav-menu-comp.mobile-menu-is-open{display:flex;padding:20px}.nav-menu-comp ul{display:flex;flex-direction:column;align-items:flex-end}.nav-menu-comp .nav-item{padding:14px 0}.nav-menu-comp .cta-btn{border-radius:60px;width:-webkit-max-content;width:-moz-max-content;width:max-content;transform:scale(1);transition-property:color,border-color,transform,background-color;transition-duration:var(--transition-duration);margin-top:14px;padding:7px 20px;color:var(--primary-color);background-color:transparent;display:flex;flex-direction:row;align-items:center;justify-content:center;border:1px solid var(--primary-color);height:-webkit-max-content;height:-moz-max-content;height:max-content}.nav-menu-comp .cta-btn:hover{transform:scale(1.15)}.nav-menu-comp .cta-btn .icon{margin-right:.7em}.nav-menu-comp.cta-btn .text{text-transform:uppercase}@media (min-width:50em){.nav-menu-comp{display:flex;background-color:transparent;padding:0}.nav-menu-comp,.nav-menu-comp ul{flex-direction:row;align-items:center}.nav-menu-comp .nav-item{padding:14px 20px;position:relative;transform:scale(1);transition-property:transform,color;transition-duration:var(--transition-duration)}.nav-menu-comp .nav-item:hover{transform:scale(1.15)}.nav-menu-comp .nav-item:hover a{color:var(--tertiary-color)}.nav-menu-comp .nav-item>a:before{content:"\002B24";position:absolute;font-size:7px;left:5px;top:0;bottom:0;display:none;justify-content:flex-start;align-items:center;transition-property:display;transition-duration:var(--transition-duration)}.nav-menu-comp .nav-item>a.active:before{display:flex}.nav-menu-comp .nav-item>a.active{color:var(--tertiary-color);font-weight:700}.nav-menu-comp .cta-btn{margin-top:0;padding:7px 20px;color:var(--primary-color);background-color:transparent;display:flex;flex-direction:row;align-items:center;justify-content:center;border:1px solid var(--primary-color);height:-webkit-max-content;height:-moz-max-content;height:max-content}.nav-menu-comp .cta-btn:hover{color:var(--tertiary-color);background-color:var(--primary-color)}.nav-menu-comp .cta-btn:hover .icon{stroke:var(--tertiary-color)}}.burger-menu-comp>svg{height:50px!important;width:50px!important;position:relative;z-index:1}.burger-menu-comp.is-open{position:relative}.burger-menu-comp.is-open:before{content:"";display:block;position:absolute;right:0;top:0;z-index:1;height:600px;width:600px;background-color:var(--tertiary-color);border-radius:50%;transform:translate(46%,-46%);animation-duration:var(--transition-duration);animation-name:growth}.burger-menu-comp.is-open:after{content:"";display:block;position:fixed;bottom:0;top:0;left:0;right:0;z-index:0;background-color:rgb(0 0 0/85%)}@keyframes growth{0%{transform:translate(46%,-46%) scale(0)}to{transform:translate(46%,-46%) scale(1)}}@media (min-width:50em){.burger-menu-comp{display:none}}#modal-root{position:relative;z-index:100}#modal-root .modal-comp{position:fixed;top:0;bottom:0;left:0;right:0;display:flex;justify-content:center;align-items:center;background-color:rgb(0 0 0/85%)}#modal-root .container{display:grid;grid-template-rows:-webkit-min-content 1fr;grid-template-rows:min-content 1fr;background-color:var(--transparent-bg-color);border-radius:var(--border-radius);padding:10px;margin:7px}#modal-root .container>header{display:flex;justify-content:flex-end;align-items:center}#modal-root .container>header button{color:#fff;background-color:transparent;border-radius:60px;border-width:1px;border-style:solid;width:-webkit-max-content;width:-moz-max-content;width:max-content;height:-webkit-max-content;height:-moz-max-content;height:max-content}#modal-root .container>main{display:flex;flex-direction:column;align-items:center;padding:1.5rem}#modal-root .container>main p{margin:0 0 20px;text-align:center}#modal-root .container>main button{color:var(--primary-color);background-color:var(--tertiary-color);padding:10px 20px;border-radius:60px;border:1px solid var(--tertiary-color);width:-webkit-max-content;width:-moz-max-content;width:max-content;transform:scale(1);transition-property:color,border-color,transform,background-color;transition-duration:var(--transition-duration)}#modal-root .container>main button:hover{cursor:pointer;transform:scale(1.15)}#home-page{display:flex;flex-direction:column;justify-content:center;align-items:center}#home-page:before{background-image:url(https://firebasestorage.googleapis.com/v0/b/issoufi-v3.appspot.com/o/bg%2Fhome.jpeg?alt=media&token=5db53a4d-725e-428e-bcd4-df46ce477c56)}#home-page main{text-align:center}#home-page h1{font-size:18px;font-weight:500}#home-page h1 strong{font-size:24px;font-weight:700}#home-page p{font-size:18px;font-weight:400}#home-page .btn-container{display:flex;flex-direction:column;align-items:center;padding-top:5rem}#home-page .btn-container .btn{display:block;font-size:14px;font-weight:400px;border-radius:60px;border:1px solid var(--primary-color);width:-webkit-max-content;width:-moz-max-content;width:max-content;padding:10px 20px;background-color:transparent;color:var(--primary-color);transform:scale(1);transition-property:transform,background-color,color,border-color;transition-duration:var(--transition-duration)}#home-page .btn-container .btn:hover{transform:scale(1.15)}#home-page .btn-container .btn:not(.call-to-action):hover{background-color:var(--primary-color);color:var(--tertiary-color)}#home-page .btn-container .btn.call-to-action{display:flex;background-color:var(--tertiary-color);border-color:var(--tertiary-color);margin-bottom:20px}@media (min-width:50em){#home-page .btn-container{padding-top:10rem}#home-page h1{font-size:24px}#home-page h1 strong{font-size:36px}}.exp-comp{border:none;border-radius:var(--border-radius);background-color:var(--transparent-bg-color);padding:10px;margin-bottom:10px}.exp-comp .entity-logo{height:55px;width:55px;object-fit:cover;border-radius:var(--border-radius)}.exp-comp .summary{display:flex;flex-direction:row;align-items:center}.exp-comp .job-summary{display:flex;flex-direction:column;padding-left:10px}.exp-comp .job-summary .job-name{margin:0;font-size:15px;font-weight:700}.exp-comp .job-summary .job-details{font-size:14px;font-weight:500}.exp-comp .job-summary .job-duration{font-size:14px;font-weight:400;color:var(--secondary-color)}.exp-comp .details{font-size:14px;font-weight:400;margin-top:10px;position:relative}.exp-comp .exp-technologies{margin-top:10px}.exp-comp .exp-technologies .title{font-weight:700;color:var(--secpndary-dark-color)}.exp-comp .exp-project{padding:0 0 20px 20px;position:relative;overflow:hidden}.exp-comp .exp-project:not(:last-child):before{content:"";position:absolute;top:18px;bottom:0;width:1px;background-color:#fff;left:7px}.exp-comp .exp-project>header{display:flex;position:relative}.exp-comp .exp-project>header:before{content:"\002B24";position:absolute;font-size:7px;left:-17px;top:0;bottom:0;right:100%;display:flex;justify-content:flex-start;align-items:center}.exp-comp .exp-project .title{font-size:14px;font-weight:700;margin:0}.exp-comp .exp-project .state{font-size:14px;font-weight:700;color:var(--secpndary-dark-color)}.exp-comp .exp-project .description{font-size:14px;font-weight:400}@media (min-width:50em){.exp-comp .job-summary .job-name{font-size:17px}}#experiences-page:before{background-image:url(https://firebasestorage.googleapis.com/v0/b/issoufi-v3.appspot.com/o/bg%2Fexperiences.jpeg?alt=media&token=1c6b8b2b-9613-42ad-8ae7-2b835c4eaf52)}#experiences-page>header>.title{font-size:24px;font-weight:700;margin:0 0 10px}@media (min-width:50em){#experiences-page>header>.title{font-size:36px}}.project-comp{height:-webkit-max-content;height:-moz-max-content;height:max-content;width:100%;display:flex;flex-direction:column;margin:0 auto 30px}.project-comp>header{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;margin-bottom:10px;padding-left:var(--page-padding);padding-right:var(--page-padding)}.project-comp>main{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;max-width:100vw;white-space:nowrap;overflow-x:auto}.project-comp>main.display-all{display:grid;grid-template-columns:repeat(1,minmax(-webkit-min-content,1fr));grid-template-columns:repeat(1,minmax(min-content,1fr));grid-auto-flow:row;grid-row-gap:5px;row-gap:5px}.project-comp .title{font-size:24px;font-weight:700;margin:0 0 10px}.project-comp .nav-ctrl{display:flex;flex-direction:row;align-items:center}.project-comp .ctrl-item{margin:0 10px 0 0;border:none;color:var(--primary-color);background-color:transparent;font-size:18px}.project-comp .ctrl-item:first-child{order:3}.project-comp .project-item:first-child{padding-left:var(--page-padding)}.project-comp .project-item:last-child{padding-right:var(--page-padding)}.project-comp>main.display-all .project-item:first-child{padding-left:0}.project-comp>main.display-all .project-item:last-child{padding-right:0}.project-comp .ctrl-item:hover{stroke:var(--tertiary-color);color:var(--tertiary-color);cursor:pointer;transform:none}.project-comp .project-item{display:flex;flex-direction:column;margin:5px;flex-grow:1;flex-shrink:1;flex-basis:0}.project-comp .project-item .thumbnail{width:100%;height:100%;object-fit:cover;object-position:top;transition-property:object-position;transition-duration:var(--transition-duration)}.project-comp .project-item:hover .thumbnail{object-position:center}.project-comp .project-item .image-container{height:260px;border-radius:10px;overflow:hidden;position:relative}.project-comp .project-item .image-container:before{content:"";position:absolute;background:linear-gradient(180deg,rgba(0,0,0,.5),transparent);top:0;bottom:0;left:0;right:0}.project-comp .project-item .like-container{position:absolute;top:0;right:0;padding:20px;display:flex;flex-direction:row;align-items:center}.project-comp .project-item .like-container .counter{margin-right:10px;font-size:14px}.project-comp .project-item .like-container .isLiked{stroke:var(--tertiary-color);fill:var(--tertiary-color)}.project-comp .project-item .like-container .like:hover{cursor:pointer;stroke:var(--tertiary-color)}.project-comp .project-item main{margin-top:10px;padding-left:10px}.project-comp .project-item main .name{font-size:18px;font-weight:800}.project-comp .project-item main .tools,.project-comp .project-item main .type{font-size:14px}@media (min-width:50em){.project-comp .title{font-size:36px}.project-comp>header{flex-direction:row;justify-content:space-between;align-items:center;padding-left:0;padding-right:0}.project-comp .ctrl-item{margin:0 0 0 10px}.project-comp .project-item:first-child{padding-left:0}.project-comp .project-item:last-child{padding-right:0}.project-comp>main.display-all{grid-template-columns:repeat(2,minmax(-webkit-min-content,1fr));grid-template-columns:repeat(2,minmax(min-content,1fr))}}@media (min-width:100em){.project-comp>main.display-all{grid-template-columns:repeat(3,minmax(-webkit-min-content,1fr));grid-template-columns:repeat(3,minmax(min-content,1fr))}}#projects-page:before{background-image:url(https://firebasestorage.googleapis.com/v0/b/issoufi-v3.appspot.com/o/bg%2Fprojects.jpeg?alt=media&token=715628ce-d543-4024-8876-701547ec8580)}#projects-page{padding-left:0;padding-right:0}@media (min-width:50em){#projects-page{padding-left:var(--page-padding);padding-right:var(--page-padding)}}.skill-comp{border:none;border-radius:var(--border-radius);background-color:var(--transparent-bg-color);padding:10px;margin-bottom:10px}.skill-comp>header{display:flex;flex-direction:row;justify-content:space-between}.skill-comp .name{font-size:18px;font-weight:700;margin:0 10px 0 0}.skill-comp .valuation{font-size:18px;color:var(--secpndary-dark-color)}.skill-comp .valuation .fill{color:var(--tertiary-color)}.skill-comp .additional-infos{margin-bottom:10px;font-size:14px;font-weight:500}.skill-comp .tools{font-size:14px;font-weight:400}#skills-page:before{background-image:url(https://firebasestorage.googleapis.com/v0/b/issoufi-v3.appspot.com/o/bg%2Fskills.jpg?alt=media&token=4d574a90-fa9d-472f-a5a2-cb490c2cff05)}#skills-page .skill-section{margin-bottom:30px}#skills-page .section-title{font-size:24px;margin:0 0 10px}#skills-page .section-list{display:grid;grid-template-columns:repeat(1,minmax(-webkit-min-content,1fr));grid-template-columns:repeat(1,minmax(min-content,1fr));grid-auto-flow:row;grid-gap:10px}@media (min-width:50em){#skills-page .section-title{font-size:36px}#skills-page .section-list{grid-template-columns:repeat(2,minmax(-webkit-max-content,1fr));grid-template-columns:repeat(2,minmax(max-content,1fr))}}@media (min-width:100em){#skills-page .section-list{grid-template-columns:repeat(3,minmax(-webkit-max-content,1fr));grid-template-columns:repeat(3,minmax(max-content,1fr))}}.web-app{display:grid;grid-template-areas:"header" "main";grid-template-rows:-webkit-max-content 1fr;grid-template-rows:max-content 1fr;grid-template-columns:1fr;height:100vh;max-width:1440px;margin:0 auto}.web-app>header{padding-left:var(--page-padding);padding-right:var(--page-padding);grid-area:header}.web-app .page{padding:0 var(--page-padding);position:relative;grid-area:main}.web-app .page:before{z-index:-2;background-image:url(https://images.unsplash.com/photo-1611776917406-5be7d613a00a?auto=format&fit=crop&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&q=80&w=1950);background-repeat:no-repeat;background-position:50%;background-size:cover}.web-app .page:after,.web-app .page:before{content:"";display:block;position:fixed;top:0;bottom:0;left:0;right:0}.web-app .page:after{z-index:-1;background-color:rgb(0 0 0/85%)}
/*# sourceMappingURL=main.d12afe4e.chunk.css.map */