html { overflow-x: hidden; height: -webkit-fill-available; scroll-behavior: smooth; }
body { background-color: #fff; margin: 0; padding: 0; transition: opacity ease-out 400ms; font-family: "gyst-variable", sans-serif; }
html, body{ min-height: 100vh; }

/* BASIC HTML */
.content-container, .part{
  display: flex;
  flex-direction: row;
  position: relative;
  width: 100%;
  height: auto;
}

    /* PART 1 STYLES */
    .part-1{
        max-height: 100vh;
        min-width: 720px;
        height: 100vh;
        width: 450px;
    }

    /* PART 1 TEXTS */
        .part-2 .p1-t1{
            position: absolute;
            top: 25vh;
            left: 20%;
        }

        .part-2 .p1-t2{
            position: absolute;
            top: 35vh;
            left: 70%;
        }

        .part-2 .p1-t3{
            position: absolute;
            top: 45vh;
            left: 5%;
            width: 366px;
            height: 130px;
            background:url(../media/cloud-1.svg);
        }

        .part-2 .p1-t3 .inner{
            margin-top: 60px;
            margin-left: 65px;
        }

        .part-2 .p1-t4{
            position: absolute;
            top: 55vh;
            left: 75%;
        }

        .part-2 .p1-t5{
            position: absolute;
            top: 70vh;
            left: 25%;
            width: 408px;
            height: 131px;
            background:url(../media/cloud-2.svg);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .part-2 .p1-t5 .inner{
            margin-top: 40px;
            margin-left: 50px;
            color:#3d3d3b;
        }

        /* PART 1 IMAGES */

        .part-2 .p1-i1{
            position: absolute;
            bottom: -30px;
            left: -2%;
            width: auto;
        }

        .part-2 .p1-i2{
            position: absolute;
            bottom: -40px;
            left: 50%;
            width: auto;
        }

        .part-2 .p1-i3{
            position: absolute;
            top: 30vh;
            left: -30px;
            width: auto;
        }

        .part-2 .p1-i4{
            position: absolute;
            top: 36vh;
            left: 97px;
            width: auto;
        }

        .part-2 .p1-i5{
            position: absolute;
            top: 100px;
            left: 80%;
            width: auto;
        }

        .part-2 .p1-i6{
            position: absolute;
            top: -20px;
            left: -10px;
            width: auto;
        }

        .part-2 .p1-i7{
            position: absolute;
            top: -30px;
            left: -10px;
            width: auto;
        }

        .part-2 .p1-svg1{
            position: absolute;
            top: 40px;
            left: 250px;
            width: auto;
        }
        .part-2 .p1-svg1 svg{
            width: 360px;
        }


/* PART 2 STYLES */
.part-2{
    max-height: 100vh;
    min-width: 1000px;
    height: 100vh;
    padding-left: 200px;
    font-size: 20px;
    font-weight: bold;
    color:#feefe9;
}

.all-bunch{
    display: flex;
    flex-direction: row;
    width: 100%;
}
    .part-2 .p2-svg2{
        position: absolute;
        top: 40px;
        left: 30px;
        width: auto;
    }
    .part-2 .p2-svg2 svg{
        width: 530px;
    }


.part-2 .first-bunch{
    height: 100vh;
    width: 1000px;
    display: flex;
    flex-direction: column;
}

.part-2 .second-bunch{
    height: 100vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width:300px;
}

.part-2 .content{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 50%;

}
.part-2 .content.row-even{
    align-items: flex-end;
}

.part-2 .p2-svg3{
    position: absolute;
    bottom: 0;
    right: -250px;
}

.part-2 .p2-svg3 svg{
    width: 420px;
}


/* END : PART 2 STYLES */

/* PART 3 STYLES */

.part-3{
    max-height: 100vh;
    min-width: 1000px;
    height: 100vh;
    width: 482px;
}

.part-3 .content.last-part{
    padding-left: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.part-3 .content.last-part .voeux-text{
    padding: 10px 60px 20px 60px;
    width: 500px;
    background: #2c7881;
    white-space:normal;
    height: auto;
    color:#feefe9;
    font-size:18px;
    line-height: 22px;
    border:3px solid #feefe9;
    border-radius :20px;

}
.part-3 .content.last-part .voeux-text .voeux-img-1{
    text-align: right;
    margin-bottom: 50px;
    margin-right: -30px;
}
.part-3 .content.last-part .voeux-text .voeux-img-1 img{
    width: 370px;

}

.part-3 .p3-moon{
    position: absolute;
    z-index:0;
    margin-left: -250px;
    margin-top: -50px;
}

.part-3 .p3-moon img{width:150px;}


.part-3 .p3-cloud1{
    position: absolute;
    z-index:3;
    margin-left: -300px;
    margin-top: 95px;
}

.part-3 .p3-cloud1 img{width:300px;}

.part-3 .p3-cloud2{
    position: absolute;
    z-index:2;
    margin-left: -100px;
    margin-top: 55px;
}

.part-3 .p3-cloud2 img{width:300px;}

.part-3 .p3-i1{position: absolute;left: 150px;bottom:-30px;}
.part-3 .p3-i1 img{width:300px;}

.part-3 .p3-i2{position: absolute;right: 200px;bottom:-30px;}
.part-3 .p3-i2 img{width:300px;}

.part-3 .p3-i3{position: absolute;right: -60px;top:40%;}
.part-3 .p3-i3 img{width:400px;}

.part-3 .p3-i4{position: absolute;right: -60px;top:40%;}
.part-3 .p3-i4 img{width:400px;}

.part-3 .p3-i5{position: absolute;left: 50%;top:-20px;}
.part-3 .p3-i5 img{width:400px;}

.part-3 .p3-i6{position: absolute;right: -10px;bottom:-20px;}
.part-3 .p3-i6 img{width:400px;}

.color-rose{
    color:#d866a3;
}
.color-yellow{
    color:#ffe36e;
}
.color-blue{
    color:#63b3cc;
}
.color-orange{
    color:#f18440;
}

.part-3 .content.last-part .voeux-text p.last-voeux{
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
}

/* END : PART 3 STYLES */
.part{
  &-1{
      background-color: #ECC9F7;
      color: #2A66E1;
      justify-content: center;
      align-items: center;

  }
  &-2{
    background-color: #E9E1E5;
    color: #83448F;
    justify-content: center;
    align-items: center;
  }
  &-3{
    background-color: #306EDE;
    color: #F3ECCF;
    justify-content: center;
    align-items: center;
  }
}

/* BASIC HTML */





// LOCOMOTIVE CSS (WILL NOT WORK WITHOUT THIS)
/*! locomotive-scroll v4.1.0 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */
html.has-scroll-smooth {
  overflow: hidden; }

html.has-scroll-dragging {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.has-scroll-smooth body {
  overflow: hidden; }

.has-scroll-smooth [data-scroll-container] {
  min-height: 100vh; }

[data-scroll-direction="horizontal"] [data-scroll-container] {
  white-space: nowrap;
  height: 100vh;
  display: inline-block;
  white-space: nowrap; }

[data-scroll-direction="horizontal"] [data-scroll-section] {
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
  height: 100%; }

.c-scrollbar {
  position: absolute;
  right: 0;
  top: 0;
  width: 11px;
  height: 100%;
  transform-origin: center right;
  transition: transform 0.3s, opacity 0.3s;
  opacity: 0; }
  .c-scrollbar:hover {
    transform: scaleX(1.45); }
  .c-scrollbar:hover, .has-scroll-scrolling .c-scrollbar, .has-scroll-dragging .c-scrollbar {
    opacity: 1; }
  [data-scroll-direction="horizontal"] .c-scrollbar {
    width: 100%;
    height: 10px;
    top: auto;
    bottom: 0;
    transform: scaleY(1); }
    [data-scroll-direction="horizontal"] .c-scrollbar:hover {
      transform: scaleY(1.3); }

.c-scrollbar_thumb {
  position: absolute;
  top: 0;
  right: 0;
  background-color: black;
  opacity: 0.5;
  width: 7px;
  border-radius: 10px;
  margin: 2px;
  cursor: -webkit-grab;
  cursor: grab; }
  .has-scroll-dragging .c-scrollbar_thumb {
    cursor: -webkit-grabbing;
    cursor: grabbing; }
  [data-scroll-direction="horizontal"] .c-scrollbar_thumb {
    right: auto;
    bottom: 0; }