@font-face {
  font-family: "AlegreyaSansSC-Medium";
  src: url(../fonts/AlegreyaSansSC-Medium.ttf);
}

@font-face {
  font-family: "Amaranth-Bold";
  src: url(../fonts/Amaranth-Bold.ttf);
}


@font-face {
  font-family: "Amaranth-BoldItalic";
  src: url(../fonts/Amaranth-BoldItalic.ttf);
}


@font-face {
  font-family: "Amaranth-Italic";
  src: url(../fonts/Amaranth-Italic.ttf);
}


@font-face {
  font-family: "Amaranth-Regular";
  src: url(../fonts/Amaranth-Regular.ttf);
}


@font-face {
  font-family: "Bangers-Regular";
  src: url(../fonts/Bangers-Regular.ttf);
}


@font-face {
  font-family: "Yoruka";
  src: url(../fonts/Yoruka.otf);
}

html {
  scroll-behavior: smooth;
}




body {
  margin: auto;
  background: #30263C;
}


#navigation-bar {
  background-color: #C68AFF;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  height: 8vh;
  position: fixed;
  z-index: 1000;


}

#logo {
  padding-left: 15px;
}

#nav-list {
  display: flex;

  padding: 0;
  min-width: 20%;
  justify-content: space-around;
  margin-left: 55px;
}

.nav-items {}

.hamburger {
  display: none;
  cursor: pointer;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: #662D91;
  border-radius: 20px;
}

#logo-list {
  display: flex;
  padding: 0;
  min-width: 6%;
  justify-content: space-between;
  padding-right: 15px;
  transition: 0.1s;

}

#logo-list li a:hover img {
  filter: brightness(0) saturate(100%) invert(99%) sepia(12%) saturate(4496%) hue-rotate(67deg) brightness(108%) contrast(101%);

  transition: 0.1s;
}

.socials {}





#hero-header {
  height: 100vh;
  background-color: #1c4343;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  background-image: url(../images/hero-header-background.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;

}

.cta-1 {
  width: 264px;
  height: 73px;
  border-radius: 45px;
  background-color: #662D91;
  transition: 1.2ms;
  -webkit-transition: 0.9s ease-out;
  -moz-transition: 0.9s ease-out;
  -ms-transition: 0.9s ease-out;
  -o-transition: 0.9s ease-out;
  transition: 0.9s ease-out;
  border: solid white 6px;
  color: #8BFFA8;
  font-size: 2rem;
  font-family: "Bangers-Regular";
  letter-spacing: 3.9px;
  display: flex;
  justify-content: center;
  align-items: center;
}



.cta-1:hover {
  background-color: #8BFFA8;
  transition: 1.2ms;
  -webkit-transition: 0.9s ease-out;
  -moz-transition: 0.9s ease-out;
  -ms-transition: 0.9s ease-out;
  -o-transition: 0.9s ease-out;
  transition: 0.9s ease-out;
  color: #662D91;
}



.cta-1 {
  -webkit-animation: slide-in-elliptic-top-fwd 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: slide-in-elliptic-top-fwd 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes cta-1 {
  0% {
    -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
    transform: translateY(-600px) rotateX(-30deg) scale(0);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
    transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% 1400px;
    transform-origin: 50% 1400px;
    opacity: 1;
  }
}

@keyframes slide-in-elliptic-top-fwd {
  0% {
    -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
    transform: translateY(-600px) rotateX(-30deg) scale(0);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0) rotateX(0) scale(1);
    transform: translateY(0) rotateX(0) scale(1);
    -webkit-transform-origin: 50% 1400px;
    transform-origin: 50% 1400px;
    opacity: 1;
  }
}





ul {
  list-style-type: none;
}

a {
  text-decoration: none;
}

#nav-list a {
  font-size: 1rem;
  letter-spacing:
    1.4px;
  font-family: "Amaranth-Bold";
  text-transform: uppercase;
  transition: 0.3s ease-out;
  color: #662D91;
}

.menu-burger {
  display: none;
  font-size: 2rem;
  cursor: pointer;
}


#nav-list a:hover {
  color: #8BFFA8;
  transition: 0.3s ease-out;
}

#title {
  width: 866px;
  height: 320px;
}


#title {
  -webkit-animation: roll-in-left 0.6s ease-out both;
  animation: roll-in-left 0.6s ease-out both;
}


@-webkit-keyframes title {
  0% {
    -webkit-transform: translateX(-800px) rotate(-540deg);
    transform: translateX(-800px) rotate(-540deg);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateX(0) rotate(0deg);
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}

@keyframes roll-in-left {
  0% {
    -webkit-transform: translateX(-800px) rotate(-540deg);
    transform: translateX(-800px) rotate(-540deg);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateX(0) rotate(0deg);
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}


#mascotte-hero {
  width: 325.01px;
  height: 375.08px;
  position: absolute;
  top: 300px;
  z-index: 1;
}

#mascotte-hero {
  -webkit-animation: bounce-in-top 1.1s both;
  animation: bounce-in-top 1.1s both;
}





@-webkit-keyframes mascotte-hero {
  0% {
    -webkit-transform: translateY(-500px);
    transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  38% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
  }

  55% {
    -webkit-transform: translateY(-65px);
    transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  72% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  81% {
    -webkit-transform: translateY(-28px);
    transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  90% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  95% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}

@keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
    transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  38% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
  }

  55% {
    -webkit-transform: translateY(-65px);
    transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  72% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  81% {
    -webkit-transform: translateY(-28px);
    transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  90% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  95% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}




h1 {
  font-size: 4.688rem;
  margin: 0;
  font-family: "Yoruka";
  letter-spacing: 7.5px;
  color: #662D91;
}

h2 {
  font-size: 4.688rem;
  margin: 0;
  font-family: "Yoruka";
  letter-spacing: 7.5px;
  color: #8BFFA8;
}

h3 {
  margin: 0;
  font-size: 4.688rem;
  margin: 0;
  font-family: "Yoruka";
  letter-spacing: 7.5px;
  color: #662D91;
}

h4 {
  font-family: "Amaranth-Bold";
  font-size: 1.563rem;
  letter-spacing:
    2.5px;
  color: #C68AFF;
}

p {}

.picture-paragraph {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-evenly;
  height: 45vh;
}

.paragraph-story {
  font-size: 1.1rem;
  font-family: "AlegreyaSansSC-Medium";
  color: #282828;
  letter-spacing: 1.8px;
  line-height: 45px;
  width: 61%;
}



#gallery {
  display: flex;
  align-items: center;
  width: 100%;
  height: 85vh;
  background-color: #C68AFF;
  flex-direction: column;
  justify-content: space-evenly;

}

#cards {
  height: 400px;
  border-radius: 4px;
  width: 70%;
  display: flex;
  gap: 5px;
  padding: 6px;
  justify-content: center;
  align-items: center;
}


#cards .card-items {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  text-decoration: none;
  color: azure;
  filter: grayscale(100%);
  flex: 1;
  transition: all .5s;
  border: solid 5px #8BFFA8;

}

#cards .card-items:hover {
  filter: none;
  flex: 2;
  transition: all .5s;
}


#cards .card-items:hover h1 {
  transform: rotate(0);
  text-shadow: 4px 2px 24px rgba(255, 255, 255, 1);


}

#cards .card-items:nth-child(1) {
  background-image: url(../images/1.jpg);

}

#cards .card-items:nth-child(2) {
  background-image: url(../images/2.jpg);

}

#cards .card-items:nth-child(3) {
  background-image: url(../images/3.jpg);

}

#cards .card-items:nth-child(4) {
  background-image: url(../images/4.jpg);

}

#cards .card-items:nth-child(5) {
  background-image: url(../images/5.jpg);

}

#cards .card-items:nth-child(6) {
  background-image: url(../images/6.jpg);

}





#first-background {
  background-image: url(../images/first-background.jpg);
  width: 100%;
  height: 60vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

#menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 90vh;
  justify-content: space-around;
}

#container {
  display: flex;
  width: 100%;
  justify-content: space-around;
  height: 60vh;
}

.mascott-bowl {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}


#second-background {
  background-image: url(../images/second-background.jpg);
  width: 100%;
  height: 60vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

#Story {
  background-color: #C68AFF;
  display: flex;
  flex-direction: column;
  height: 116vh;
  align-items: center;
  justify-content: center;
  width: 100%;
}


@-webkit-keyframes image-mascotte {
  0% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }

  20% {
    -webkit-transform: translate(-2px, 2px);
    transform: translate(-2px, 2px);
  }

  40% {
    -webkit-transform: translate(-2px, -2px);
    transform: translate(-2px, -2px);
  }

  60% {
    -webkit-transform: translate(2px, 2px);
    transform: translate(2px, 2px);
  }

  80% {
    -webkit-transform: translate(2px, -2px);
    transform: translate(2px, -2px);
  }

  100% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
}

@keyframes vibrate-1 {
  0% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }

  20% {
    -webkit-transform: translate(-2px, 2px);
    transform: translate(-2px, 2px);
  }

  40% {
    -webkit-transform: translate(-2px, -2px);
    transform: translate(-2px, -2px);
  }

  60% {
    -webkit-transform: translate(2px, 2px);
    transform: translate(2px, 2px);
  }

  80% {
    -webkit-transform: translate(2px, -2px);
    transform: translate(2px, -2px);
  }

  100% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
}


.image-mascotte {
  -webkit-animation: vibrate-1 0.3s linear infinite both;
  animation: vibrate-1 0.3s linear infinite both;
}

#formulaire {
  width: 50%;

  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60vh;

  border-radius: 60px;

}











#contact-section {
  height: 96vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url(../images/form-background.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  justify-content: space-around;
}

form {
  height: 95%;
  width: 50%;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  align-items: center;


}

.input {
  width: 406px;
  height: 49px;
  background-color: #C68AFF;


}

::placeholder {
  padding-left: 20px;
  font-family: "Amaranth-Regular";
  color: #4D4D4D;
  letter-spacing: 1.8px;
  font-size: 1.125rem;
}

input[type="text"] {
  outline: none
}

input[type="text"] {
  border: none
}

#submit-button {
  width: 178px;
  height: 51px;
  background-color: #662D91;
  border-radius: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #8BFFA8;
  font-family: "Amaranth-Regular";
  font-size: 1.2rem;
  letter-spacing: 3.2px;
}


#footer {
  width: 100%;
  height: 5vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#footer-list {
  padding: 0;
  display: flex;
  width: 35%;
  justify-content: space-evenly;
}



.footer-item {
  text-decoration: none;
  color: white;
  font-family: "Amaranth-Regular";
  font-size: 1rem;
  letter-spacing: 1.4px;

}

.footer-item:hover {
  color: #8BFFA8;
  transition: 0.3s ease-out;
}

#submit-button:hover {
  background-color: #8BFFA8;
  transition: 1.2ms;
  -webkit-transition: 0.9s ease-out;
  -moz-transition: 0.9s ease-out;
  -ms-transition: 0.9s ease-out;
  -o-transition: 0.9s ease-out;
  transition: 0.9s ease-out;
  color: #662D91;
}

#input-message {
  height: 150px;
}



/* RESPONSIVE */


@media screen and (max-width: 756px) {

  #navigation-bar {
    background-color: #C68AFF;
    display: flex;
    width: 100%;
    align-items: center;
    height: 14vh;
  }

  #logo {
    padding: 0;
  }

  #nav-list {
    display: flex;

    padding: 0;
    min-width: 20%;
    justify-content: space-around;
    flex-direction: column;
    margin-left: 0;
  }

  .hamburger {
    display: block;
    padding-left: 13px;
  }

  .hamburger.active .bar:nth-child(2) {
    opacity: 0;
  }

  .hamburger.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .hamburger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  #nav-list {
    position: fixed;
    left: -100%;
    top: 112px;
    gap: 0;
    flex-direction: column;
    background-color: #C68AFF;
    width: 100%;
    text-align: center;
    transition: 0.3s;
  }

  .nav-items {
    margin: 16px 0;
  }

  #nav-list.active {
    left: 0;
  }





  #logo-list {
    display: flex;
    padding: 0;
    min-width: 10%;
    justify-content: space-between;
    padding-right: 15px;
    transition: 0.1s;
    flex-direction: column;
    height: 10vh;
    align-items: center;
    gap: 10px;

  }

  #logo-list li a:hover img {
    filter: brightness(0) saturate(100%) invert(99%) sepia(12%) saturate(4496%) hue-rotate(67deg) brightness(108%) contrast(101%);

    transition: 0.1s;
  }

  .socials {}





  #hero-header {
    height: 99vh;
    background-color: #1c4343;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    background-image: url(../images/hero-header-background.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;

  }

  .cta-1 {
    width: 264px;
    height: 73px;
    border-radius: 45px;
    background-color: #662D91;
    transition: 1.2ms;
    -webkit-transition: 0.9s ease-out;
    -moz-transition: 0.9s ease-out;
    -ms-transition: 0.9s ease-out;
    -o-transition: 0.9s ease-out;
    transition: 0.9s ease-out;
    border: solid white 6px;
    color: #8BFFA8;
    font-size: 2rem;
    font-family: "Bangers-Regular";
    letter-spacing: 3.9px;
    display: flex;
    justify-content: center;
    align-items: center;
  }



  .cta-1:hover {
    background-color: #8BFFA8;
    transition: 1.2ms;
    -webkit-transition: 0.9s ease-out;
    -moz-transition: 0.9s ease-out;
    -ms-transition: 0.9s ease-out;
    -o-transition: 0.9s ease-out;
    transition: 0.9s ease-out;
    color: #662D91;
  }



  .cta-1 {
    -webkit-animation: slide-in-elliptic-top-fwd 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-elliptic-top-fwd 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  }

  @-webkit-keyframes cta-1 {
    0% {
      -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
      transform: translateY(-600px) rotateX(-30deg) scale(0);
      -webkit-transform-origin: 50% 100%;
      transform-origin: 50% 100%;
      opacity: 0;
    }

    100% {
      -webkit-transform: translateY(0) rotateX(0) scale(1);
      transform: translateY(0) rotateX(0) scale(1);
      -webkit-transform-origin: 50% 1400px;
      transform-origin: 50% 1400px;
      opacity: 1;
    }
  }

  @keyframes slide-in-elliptic-top-fwd {
    0% {
      -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
      transform: translateY(-600px) rotateX(-30deg) scale(0);
      -webkit-transform-origin: 50% 100%;
      transform-origin: 50% 100%;
      opacity: 0;
    }

    100% {
      -webkit-transform: translateY(0) rotateX(0) scale(1);
      transform: translateY(0) rotateX(0) scale(1);
      -webkit-transform-origin: 50% 1400px;
      transform-origin: 50% 1400px;
      opacity: 1;
    }
  }





  ul {
    list-style-type: none;
  }

  a {
    text-decoration: none;
  }

  #nav-list a {
    font-size: 1rem;
    letter-spacing:
      1.4px;
    font-family: "Amaranth-Bold";
    text-transform: uppercase;
    transition: 0.3s ease-out;
    color: #662D91;
  }

  #nav-list a:hover {
    color: #8BFFA8;
    transition: 0.3s ease-out;
  }

  #title {
    width: 80%;
    height: 19%;
  }


  #title {
    -webkit-animation: roll-in-left 0.6s ease-out both;
    animation: roll-in-left 0.6s ease-out both;
  }


  @-webkit-keyframes title {
    0% {
      -webkit-transform: translateX(-800px) rotate(-540deg);
      transform: translateX(-800px) rotate(-540deg);
      opacity: 0;
    }

    100% {
      -webkit-transform: translateX(0) rotate(0deg);
      transform: translateX(0) rotate(0deg);
      opacity: 1;
    }
  }

  @keyframes roll-in-left {
    0% {
      -webkit-transform: translateX(-800px) rotate(-540deg);
      transform: translateX(-800px) rotate(-540deg);
      opacity: 0;
    }

    100% {
      -webkit-transform: translateX(0) rotate(0deg);
      transform: translateX(0) rotate(0deg);
      opacity: 1;
    }
  }



  #mascotte-hero {
    width: 54%;
    height: 30%;
    position: absolute;
    top: 312px;
    z-index: 1;
  }

  #mascotte-hero {
    -webkit-animation: bounce-in-top 1.1s both;
    animation: bounce-in-top 1.1s both;
  }





  @-webkit-keyframes mascotte-hero {
    0% {
      -webkit-transform: translateY(-500px);
      transform: translateY(-500px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
      opacity: 0;
    }

    38% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
      opacity: 1;
    }

    55% {
      -webkit-transform: translateY(-65px);
      transform: translateY(-65px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }

    72% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }

    81% {
      -webkit-transform: translateY(-28px);
      transform: translateY(-28px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }

    90% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }

    95% {
      -webkit-transform: translateY(-8px);
      transform: translateY(-8px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }

    100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }
  }

  @keyframes bounce-in-top {
    0% {
      -webkit-transform: translateY(-500px);
      transform: translateY(-500px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
      opacity: 0;
    }

    38% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
      opacity: 1;
    }

    55% {
      -webkit-transform: translateY(-65px);
      transform: translateY(-65px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }

    72% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }

    81% {
      -webkit-transform: translateY(-28px);
      transform: translateY(-28px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }

    90% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }

    95% {
      -webkit-transform: translateY(-8px);
      transform: translateY(-8px);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }

    100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }
  }






  h1 {
    font-size: 2.5rem;
    margin: 25px;
    font-family: "Yoruka";
    letter-spacing: 7.5px;
    color: #662D91;
    text-align: center;
  }

  h2 {
    font-size: 1.4rem;
    margin: 0;
    font-family: "Yoruka";
    letter-spacing: 7.5px;
    color: #8BFFA8;
  }

  h3 {

    font-size: 4.688rem;
    margin: 15px;
    font-family: "Yoruka";
    letter-spacing: 7.5px;
    color: #662D91;
  }

  h4 {
    font-family: "Amaranth-Bold";
    font-size: 1.563rem;
    letter-spacing:
      2.5px;
    color: #C68AFF;
  }

  p {}

  .picture-paragraph {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-evenly;
    height: 100vh;
    flex-direction: column;
  }

  .paragraph-story {
    font-size: 0.9rem;
    font-family: "AlegreyaSansSC-Medium";
    color: #282828;
    letter-spacing: 1.8px;
    line-height: 45px;
    width: 93%;
    text-align: center;
  }



  #gallery {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    height: 195vh;
    background-color: #C68AFF;
    flex-direction: column;

  }

  #cards {
    height: 150vh;
    border-radius: 4px;
    width: 70%;
    display: flex;
    gap: 26px;
    padding: 6px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }


  #cards .card-items {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    text-decoration: none;
    color: azure;
    filter: none;
    flex: 1;
    transition: all .5s;
    border: solid 5px #8BFFA8;
    width: 100%;
  }


  #cards .card-items:hover {
    filter: none;
    flex: 1;
    transition: all .5s;
  }


  #cards .card-items:hover h1 {
    transform: rotate(0);
    text-shadow: 4px 2px 24px rgba(255, 255, 255, 1);


  }

  #cards .card-items:nth-child(1) {
    background-image: url(../images/1.jpg);

  }

  #cards .card-items:nth-child(2) {
    background-image: url(../images/2.jpg);

  }

  #cards .card-items:nth-child(3) {
    background-image: url(../images/3.jpg);

  }

  #cards .card-items:nth-child(4) {
    background-image: url(../images/4.jpg);

  }

  #cards .card-items:nth-child(5) {
    background-image: url(../images/5.jpg);

  }

  #cards .card-items:nth-child(6) {
    background-image: url(../images/6.jpg);

  }





  #first-background {
    background-image: url(../images/first-background.jpg);
    width: 100%;
    height: 60vh;
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: initial;
  }

  #menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 78vh;
    justify-content: space-around;
  }

  #container {
    display: flex;
    width: 100%;
    justify-content: space-around;
    height: 60vh;
    flex-direction: column;
  }

  .mascott-bowl {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    height: 50%;
  }

  .image-mascotte {
    height: 120px;
  }


  #second-background {
    background-image: url(../images/second-background.jpg);
    width: 100%;
    height: 60vh;
    background-position: left;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: inherit;
  }

  #Story {
    background-color: #C68AFF;
    display: flex;
    flex-direction: column;
    height: 187vh;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .image-story {
    width: 100%;
  }


  @-webkit-keyframes image-mascotte {
    0% {
      -webkit-transform: translate(0);
      transform: translate(0);
    }

    20% {
      -webkit-transform: translate(-2px, 2px);
      transform: translate(-2px, 2px);
    }

    40% {
      -webkit-transform: translate(-2px, -2px);
      transform: translate(-2px, -2px);
    }

    60% {
      -webkit-transform: translate(2px, 2px);
      transform: translate(2px, 2px);
    }

    80% {
      -webkit-transform: translate(2px, -2px);
      transform: translate(2px, -2px);
    }

    100% {
      -webkit-transform: translate(0);
      transform: translate(0);
    }
  }

  @keyframes vibrate-1 {
    0% {
      -webkit-transform: translate(0);
      transform: translate(0);
    }

    20% {
      -webkit-transform: translate(-2px, 2px);
      transform: translate(-2px, 2px);
    }

    40% {
      -webkit-transform: translate(-2px, -2px);
      transform: translate(-2px, -2px);
    }

    60% {
      -webkit-transform: translate(2px, 2px);
      transform: translate(2px, 2px);
    }

    80% {
      -webkit-transform: translate(2px, -2px);
      transform: translate(2px, -2px);
    }

    100% {
      -webkit-transform: translate(0);
      transform: translate(0);
    }
  }


  .image-mascotte {
    -webkit-animation: vibrate-1 0.3s linear infinite both;
    animation: vibrate-1 0.3s linear infinite both;
  }

  #formulaire {
    width: 100%;

    height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60vh;

    border-radius: 60px;

  }











  #contact-section {
    height: 96vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url(../images/form-background.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    justify-content: space-around;
  }

  form {
    height: 95%;
    width: 50%;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;


  }

  .input {
    width: 406px;
    height: 49px;
    background-color: #C68AFF;


  }

  ::placeholder {
    padding-left: 20px;
    font-family: "Amaranth-Regular";
    color: #4D4D4D;
    letter-spacing: 1.8px;
    font-size: 1.125rem;
  }

  input[type="text"] {
    outline: none
  }

  input[type="text"] {
    border: none
  }

  #submit-button {
    width: 178px;
    height: 51px;
    background-color: #662D91;
    border-radius: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #8BFFA8;
    font-family: "Amaranth-Regular";
    font-size: 1.2rem;
    letter-spacing: 3.2px;
  }


  #footer {
    width: 100%;
    height: 5vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #footer-list {
    padding: 0;
    display: flex;
    width: 90%;
    justify-content: space-evenly;
  }



  .footer-item {
    text-decoration: none;
    color: white;
    font-family: "Amaranth-Regular";
    font-size: 1rem;
    letter-spacing: 1.4px;

  }

  .footer-item:hover {
    color: #8BFFA8;
    transition: 0.3s ease-out;
  }

  #submit-button:hover {
    background-color: #8BFFA8;
    transition: 1.2ms;
    -webkit-transition: 0.9s ease-out;
    -moz-transition: 0.9s ease-out;
    -ms-transition: 0.9s ease-out;
    -o-transition: 0.9s ease-out;
    transition: 0.9s ease-out;
    color: #662D91;
  }

  #input-message {
    height: 150px;
  }



}