@font-face {
    font-family: "Candy Beans-Regular";
    src: url("fonts/Candy-Beans.ttf") format("truetype");
}

body {
    background-color: #e4dcdc;
    background-size:auto;
}

.french-version {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
}

.french-version .div {
    background-color: #e4dcdc;
    width: 1440px;
    height: 7787px;
    position: relative;
}

.french-version .overlap {
    position: absolute;
    width: 1275px;
    height: 595px;
    top: 147px;
    left: 76px;
}

.french-version .overlap-group {
    position: absolute;
    width: 1275px;
    height: 595px;
    top: 0;
    left: 0;
}

.french-version .element {
    position: absolute;
    width: 587px;
    height: 595px;
    top: 0;
    left: 688px;
    object-fit: cover;
}

.french-version .hello-c-est-nour {
    position: absolute;
    width: 721px;
    top: 125px;
    left: 0;
    font-family: "Candy Beans-Regular", Helvetica;
    font-weight: 400;
    color: #322323;
    font-size: 96px;
    letter-spacing: 9.6px;
    line-height: normal;
}

.french-version .etudiante-en-licence {
    position: absolute;
    width: 488px;
    top: 402px;
    left: 3px;
    font-family: "Comfortaa", Helvetica;
    font-weight: 400;
    color: #000000;
    font-size: 24px;
    line-height: 35px;
}

.french-version .text-wrapper {
    font-weight: 700;
    letter-spacing: 1.15px;
}

.french-version .span {
    font-weight: 700;
    letter-spacing: 0.58px;
}

.french-version .text-wrapper-2 {
    font-family: "Candy Beans-Regular", Helvetica;
    letter-spacing: 1.15px;
}

.french-version .overlap-2 {
    position: absolute;
    width: 1440px;
    height: 906px;
    top: 955px;
    left: 0;
    border-radius: 25px;
    background: linear-gradient(90deg, rgb(106, 51, 44) 0%, rgb(208, 100.08, 86.34) 100%);
}

.french-version .here-s-a-bit-about {
    position: absolute;
    width: 655px;
    top: 52px;
    left: 383px;
    font-family: "Candy Beans-Regular", Helvetica;
    font-weight: 400;
    color: transparent;
    font-size: 36px;
    text-align: center;
    letter-spacing: 3.6px;
    line-height: normal;
}

.french-version .text-wrapper-3 {
    color: #e5dddd;
    letter-spacing: 1.3px;
}

.french-version .text-wrapper-4 {
    color: #461411;
    letter-spacing: 1.3px;
}

.french-version .overlap-3 {
    position: absolute;
    width: 404px;
    height: 636px;
    top: 162px;
    left: 978px;
    background-color: #e5dddd40;
    border-radius: 35px;
    box-shadow: 0px 2px 6px #00000040;
}

.french-version .ma-nature-organis-e {
    position: absolute;
    width: 364px;
    top: 81px;
    left: 40px;
    font-family: "Comfortaa", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 19px;
    line-height: 35px;
}

.french-version .text-wrapper-5 {
    font-weight: 700;
    letter-spacing: 0.36px;
}

.french-version .text-wrapper-6 {
    font-weight: 700;
    font-size: 24px;
    letter-spacing: 0.58px;
}

.french-version .text-wrapper-7 {
    font-family: "Candy Beans-Regular", Helvetica;
    font-size: 24px;
    letter-spacing: 1.15px;
}

.french-version .text-wrapper-8 {
    position: absolute;
    width: 404px;
    top: 23px;
    left: 0;
    font-family: "Candy Beans-Regular", Helvetica;
    font-weight: 400;
    color: #f7b95c;
    font-size: 24px;
    text-align: center;
    letter-spacing: 2.4px;
    line-height: normal;
}

.french-version .overlap-4 {
    position: absolute;
    width: 404px;
    height: 636px;
    top: 162px;
    left: 521px;
    background-color: #e5dddd40;
    border-radius: 35px;
    box-shadow: 0px 2px 6px #00000040;
}

.french-version .ma-passion-pour-les {
    position: absolute;
    width: 349px;
    top: 81px;
    left: 28px;
    font-family: "Comfortaa", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 19px;
    line-height: 35px;
}

.french-version .overlap-5 {
    position: absolute;
    width: 404px;
    height: 647px;
    top: 162px;
    left: 64px;
    background-color: #e5dddd40;
    border-radius: 35px;
    box-shadow: 0px 2px 6px #00000040;
}

.french-version .mon-int-r-t-pour-le {
    position: absolute;
    width: 349px;
    top: 83px;
    left: 33px;
    font-family: "Comfortaa", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 19px;
    line-height: 35px;
}

.french-version .text-wrapper-9 {
    font-weight: 700;
    letter-spacing: 0.72px;
}

.french-version .text-wrapper-10 {
    font-family: "Candy Beans-Regular", Helvetica;
    letter-spacing: 0.72px;
}

.french-version .overlap-group-2 {
    position: absolute;
    width: 1440px;
    height: 2779px;
    top: 4672px;
    left: 0;
    border-radius: 25px;
    background: linear-gradient(90deg, rgb(106, 51, 44) 0%, rgb(208, 100.08, 86.34) 100%);
}

.french-version .test {
    height: 529px;
    top: 2080px;
    position: absolute;
    width: 848px;
    left: 568px;
    object-fit: cover;
}

.french-version .img {
    height: 538px;
    top: 1535px;
    position: absolute;
    width: 848px;
    left: 568px;
    object-fit: cover;
}

.french-version .mon-int-r-t-pour-le-wrapper {
    position: absolute;
    width: 494px;
    height: 1066px;
    top: 1535px;
    left: 39px;
    background-color: #e5dddd40;
    border-radius: 35px;
    box-shadow: 0px 2px 6px #00000040;
}

.french-version .p {
    position: absolute;
    width: 418px;
    top: 65px;
    left: 36px;
    font-family: "Comfortaa", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 19px;
    line-height: 35px;
}

.french-version .element-wrapper {
    position: absolute;
    width: 840px;
    height: 1066px;
    top: 212px;
    left: 572px;
    background-color: #fefefe94;
    border-radius: 35px;
    box-shadow: 0px 2px 6px #00000040;
}

.french-version .element-2 {
    position: absolute;
    width: 759px;
    height: 1055px;
    top: 0;
    left: 41px;
    object-fit: cover;
}

.french-version .div-wrapper {
    position: absolute;
    width: 494px;
    height: 1066px;
    top: 212px;
    left: 39px;
    background-color: #e5dddd40;
    border-radius: 35px;
    box-shadow: 0px 2px 6px #00000040;
}

.french-version .text-wrapper-11 {
    position: absolute;
    width: 358px;
    top: 153px;
    left: 105px;
    font-family: "Candy Beans-Regular", Helvetica;
    font-weight: 400;
    color: #f6b95c;
    font-size: 30px;
    text-align: center;
    letter-spacing: 3px;
    line-height: normal;
}

.french-version .text-wrapper-12 {
    position: absolute;
    width: 336px;
    top: 1475px;
    left: 118px;
    font-family: "Candy Beans-Regular", Helvetica;
    font-weight: 400;
    color: #f7b95c;
    font-size: 30px;
    text-align: center;
    letter-spacing: 3px;
    line-height: normal;
}

.french-version .text-wrapper-13 {
    position: absolute;
    width: 1440px;
    top: 43px;
    left: 0;
    font-family: "Candy Beans-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 36px;
    text-align: center;
    letter-spacing: 3.6px;
    line-height: normal;
}

.french-version .overlap-6 {
    position: absolute;
    width: 339px;
    height: 39px;
    top: 2615px;
    left: 851px;
}

.french-version .rectangle {
    position: absolute;
    width: 339px;
    height: 38px;
    top: 1px;
    left: 0;
    background-color: #f7b95c8f;
    border-radius: 10px;
    box-shadow: 0px 2px 6px #75575740;
}

.french-version .text-wrapper-14 {
    position: absolute;
    width: 339px;
    height: 38px;
    top: 0;
    left: 0;
    font-family: "Comfortaa", Helvetica;
    font-weight: 700;
    color: #ffffff;
    font-size: 20px;
    text-align: center;
    letter-spacing: 2px;
    line-height: normal;
}

.french-version .overlap-7 {
    position: absolute;
    width: 262px;
    height: 39px;
    top: 1296px;
    left: 872px;
}

/* .french-version .rectangle-2 {
    position: absolute;
    width: 262px;
    height: 38px;
    top: 1px;
    left: 0;
    background-color: #f7b95c8f;
    border-radius: 10px;
    box-shadow: 0px 2px 6px #75575740;
}
 */


.french-version .rectangle-2 {
    
    color: #fff;
    letter-spacing: 2px;
    text-decoration: none;
    font-family: Candy Beans-Regular, Helvetica;
    position: relative;
    display: inline-block;
    width: 215px;
    height: 40px;
    line-height: 40px;
    background-color: #f7b95c8f;
    border-radius: 10px;      
    text-align: center;
    cursor: pointer;
}

.french-version .rectangle-2:hover {
    background-color: #f1a1288f; 
}


.rectangle-7 {
    color: #fff;
    letter-spacing: 2px;
    text-decoration: none;
    font-family: Candy Beans-Regular, Helvetica;
    position: absolute;
    display: inline-block;
    width: 260px;
    height: 40px;
    line-height: 40px;
    background-color: #f7b95c8f;
    border-radius: 10px;      
    text-align: center;
    cursor: pointer;
}

/* Style pour le survol du rectangle */
.rectangle-7:hover {
    background-color: #f1a1288f;
}


.french-version .text-wrapper-15 {
    position: absolute;
    width: 262px;
    height: 38px;
    top: 0;
    left: 0;
    font-family: "Comfortaa", Helvetica;
    font-weight: 700;
    color: #ffffff;
    font-size: 20px;
    text-align: center;
    letter-spacing: 2px;
    line-height: normal;
}

.french-version .overlap-8 {
    position: absolute;
    width: 272px;
    height: 45px;
    top: 42px;
    left: 293px;
}

.french-version .text-wrapper-16 {
    position: absolute;
    width: 127px;
    height: 43px;
    top: 0;
    left: 0;
    font-family: "Comfortaa", Helvetica;
    font-weight: 700;
    color: #000000;
    font-size: 22px;
    text-align: center;
    letter-spacing: 2.2px;
    line-height: normal;
}

.french-version .text-wrapper-17 {
    position: absolute;
    width: 148px;
    height: 44px;
    top: 0px;
    left: 124px;
    font-family: "Comfortaa", Helvetica;
    font-weight: 700;
    color: #000000;
    font-size: 20px;
    text-align: center;
    letter-spacing: 2px;
    line-height: normal;
}

.french-version .line {
    position: absolute;
    width: 61px;
    height: 1px;
    top: 42px;
    left: 30px;
    object-fit: cover;
}

.french-version .line-2 {
    position: absolute;
    width: 86px;
    height: 2px;
    top: 41px;
    left: 154px;
    object-fit: cover;
}

.french-version .text-wrapper-18 {
    position: absolute;
    width: 222px;
    height: 43px;
    top: 42px;
    left: 56px;
    font-family: "Comfortaa", Helvetica;
    font-weight: 700;
    color: #000000;
    font-size: 22px;
    text-align: center;
    letter-spacing: 2.2px;
    line-height: normal;
}

.french-version .pinterest {
    position: absolute;
    width: 51px;
    height: 51px;
    top: 814px;
    left: 1120px;
    object-fit: cover;
}

.french-version .instagram {
    position: absolute;
    width: 51px;
    height: 51px;
    top: 814px;
    left: 1057px;
    object-fit: cover;
}

.french-version .linkedin {
    position: absolute;
    width: 51px;
    height: 51px;
    top: 815px;
    left: 933px;
    object-fit: cover;
}

.french-version .github {
    position: absolute;
    width: 51px;
    height: 50px;
    top: 815px;
    left: 995px;
    object-fit: cover;
}

.french-version .mes-projets {
    position: absolute;
    width: 655px;
    top: 1934px;
    left: 387px;
    font-family: "Candy Beans-Regular", Helvetica;
    font-weight: 400;
    color: #322323;
    font-size: 36px;
    text-align: center;
    letter-spacing: 3.6px;
    line-height: normal;
    margin-top: 20px;
}

.french-version .text-wrapper-19 {
    letter-spacing: 1.3px;
}

.french-version .ma-passion-pour-les-2 {
    top: 2198px;
    left: 151px;
    position: absolute;
    width: 605px;
    font-family: "Comfortaa", Helvetica;
    font-weight: 400;
    color: #000000;
    font-size: 19px;
    line-height: 35px;
}

.french-version .text-wrapper-20 {
    position: absolute;
    width: 404px;
    top: 2140px;
    left: 151px;
    font-family: "Candy Beans-Regular", Helvetica;
    font-weight: 400;
    color: #a45151;
    font-size: 30px;
    letter-spacing: 3px;
    line-height: normal;
}

.french-version .ma-passion-pour-les-3 {
    top: 2709px;
    left: 766px;
    position: absolute;
    width: 605px;
    font-family: "Comfortaa", Helvetica;
    font-weight: 400;
    color: #000000;
    font-size: 19px;
    line-height: 35px;
}

.french-version .text-wrapper-21 {
    position: absolute;
    width: 404px;
    top: 2651px;
    left: 766px;
    font-family: "Candy Beans-Regular", Helvetica;
    font-weight: 400;
    color: #a45151;
    font-size: 30px;
    letter-spacing: 3px;
    line-height: normal;
}

.french-version .rectangle-3 {
    position: absolute;
    width: 517px;
    height: 477px;
    top: 2067px;
    left: 810px;
    background-color: #392727;
    border-radius: 49px;
}

.french-version .ma-passion-pour-les-4 {
    top: 3218px;
    left: 133px;
    position: absolute;
    width: 605px;
    font-family: "Comfortaa", Helvetica;
    font-weight: 400;
    color: #000000;
    font-size: 19px;
    line-height: 35px;
}

.french-version .text-wrapper-22 {
    position: absolute;
    width: 404px;
    top: 3160px;
    left: 133px;
    font-family: "Candy Beans-Regular", Helvetica;
    font-weight: 400;
    color: #a45151;
    font-size: 30px;
    letter-spacing: 3px;
    line-height: normal;
}

.french-version .rectangle-4 {
    position: absolute;
    width: 517px;
    height: 477px;
    top: 3087px;
    left: 792px;
    background-color: #392727;
    border-radius: 49px;
}

.french-version .rectangle-5 {
    position: absolute;
    width: 517px;
    height: 477px;
    top: 2567px;
    left: 133px;
    background-color: #392727;
    border-radius: 49px;
}

.french-version .ma-passion-pour-les-5 {
    top: 3780px;
    left: 766px;
    position: absolute;
    width: 605px;
    font-family: "Comfortaa", Helvetica;
    font-weight: 400;
    color: #000000;
    font-size: 19px;
    line-height: 35px;
}

.french-version .text-wrapper-23 {
    position: absolute;
    width: 404px;
    top: 3722px;
    left: 766px;
    font-family: "Candy Beans-Regular", Helvetica;
    font-weight: 400;
    color: #a45151;
    font-size: 30px;
    letter-spacing: 3px;
    line-height: normal;
}

.french-version .rectangle-6 {
    position: absolute;
    width: 517px;
    height: 477px;
    top: 3638px;
    left: 133px;
    background-color: #392727;
    border-radius: 49px;
}

.french-version .line-3 {
    position: absolute;
    width: 192px;
    height: 1px;
    top: 84px;
    left: 70px;
    object-fit: cover;
}

.french-version .text-wrapper-24 {
    position: absolute;
    width: 172px;
    height: 44px;
    top: 42px;
    left: 572px;
    font-family: "Comfortaa", Helvetica;
    font-weight: 700;
    color: #000000;
    font-size: 20px;
    text-align: center;
    letter-spacing: 2px;
    line-height: normal;
}

.french-version .line-4 {
    position: absolute;
    width: 116px;
    height: 1px;
    top: 85px;
    left: 599px;
    object-fit: cover;
}

.french-version .line-5 {
    position: absolute;
    width: 685px;
    height: 5px;
    top: 4205px;
    left: 383px;
}

.french-version .visual-studio {
    position: absolute;
    width: 90px;
    height: 86px;
    top: 4390px;
    left: 1075px;
    object-fit: cover;
}

.french-version .langc {
    width: 77px;
    height: 88px;
    left: 217px;
    position: absolute;
    top: 4386px;
    object-fit: cover;
}

.french-version .postgre {
    position: absolute;
    width: 86px;
    height: 86px;
    top: 4386px;
    left: 557px;
    object-fit: cover;
}

.french-version .python-2 {
    width: 88px;
    height: 86px;
    left: 438px;
    position: absolute;
    top: 4386px;
    object-fit: cover;
}

.french-version .js {
    position: absolute;
    width: 80px;
    height: 86px;
    top: 4388px;
    left: 940px;
    object-fit: cover;
}

.french-version .java {
    position: absolute;
    width: 120px;
    height: 120px;
    top: 4357px;
    left: 306px;
    object-fit: cover;
}

.french-version .css {
    position: absolute;
    width: 110px;
    height: 109px;
    top: 4367px;
    left: 803px;
    object-fit: cover;
}

.french-version .text-wrapper-25 {
    position: absolute;
    width: 880px;
    top: 4258px;
    left: 258px;
    font-family: "Candy Beans-Regular", Helvetica;
    font-weight: 400;
    color: #322323;
    font-size: 32px;
    text-align: center;
    letter-spacing: 3.2px;
    line-height: normal;
}

.french-version .html {
    position: absolute;
    width: 109px;
    height: 110px;
    top: 4366px;
    left: 669px;
    object-fit: cover;
}

.menu a {
  color: #000000;
  text-decoration: none;
  /* letter-spacing: 0.15em; */
  display: inline-block;
  padding: 15px 20px;
  position: relative;
}

.menu a::after { 
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  display: block;
  background: none repeat scroll 0 0 transparent;
  height: 2px;
  width: 0;
  background: #000000;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
}

.menu a:hover::after { 
  width: 100%; 
  left: 0px; 
}

html {
  scroll-behavior: smooth;
}